《The Definitive Guide to Lift》12章介绍widgets的地方有些小错误,所以再重复写一下,以免大家为这小小错误浪费时间。
Lift的widget说起来很简单,就是用Scala包装了ajax代码。
一,使用TableSorter
TableSorter在展示表格数据的时候非常有用,lift自带了TableSorter的widget.
Step 1: 初始化
在bootstrap.liftweb.Boot中:
引入
import net.liftweb.widgets.tablesorter._
再调用TableSorter.init,告诉lift你要用这个widget了,lift会将TableSorter的资源(js)准备好供调用。
Step 2: 创建snippet
在snippet包下创建TableSorterDemo
package com.xuefengwu.demo.snippet
import _root_.scala.xml.{NodeSeq, Text}
import _root_.net.liftweb.util._
import _root_.java.util.Date
import _root_.net.liftweb.widgets.tablesorter.TableSorter
import com.carestreamhealth.cms.lib._
import Helpers._
class TableSorterDemo {
def render(xhtml: NodeSeq): NodeSeq = TableSorter("#myTable")
}
注意在《The Definitive Guide to Lift》一书在使用了TableSorter("myTable"),而我们这里使用 TableSorter("#myTable")是因为通常我们都是用id定位HTML上的DOM元素。
Step 3: HTML上调用TableSorterDemo
先用很正常的snippet调用方式,在HTML上调用。在这里TableSorterDemo会做本来用ajax需要写的东西,大家可以查看一下render后的HTML源代码。
<lift:TableSorterDemo/>
然后附上表格数据做个DEMO就OK了,注意table的id要和TableSorterDemo上使用的保持一致。
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
二,使用TreeView
《The Definitive Guide to Lift》一书中有动态调用Tree的例子,但前后的代码没用链接起来。
Step 1: 初始化
在bootstrap.liftweb.Boot中:
引入
import net.liftweb.widgets.tree._
调用
TreeView.init
Step 2: 创建snippet
package com.xuefengwu.demo.snippet
import _root_.net.liftweb.http._
import S._
import _root_.net.liftweb.http.js.JsObj
import _root_.net.liftweb.util._
import Helpers._
import _root_.net.liftweb.widgets.tree._
import _root_.scala.xml._
class TreeviewDemo {
import net.liftweb.http.js.JE._
def render(xhtml:Group):NodeSeq={
TreeView("example", JsObj(("animated"->90)),loadTree,loadNode)
}
def loadTree() = {
Tree("No Children")::
Tree("one static child", Tree("Lone child") :: Nil) ::
Tree("Dynamic node", "myDynamic", true) :: Nil
}
def loadNode(id:String) : List[Tree] = id match {
case "myDynamic" =>
Tree("Child one") ::
Tree("Child two") ::Nil
case _ => Nil
}
}
《The Definitive Guide to Lift》中render和loadTree,loadNode没用关联起来,这里将两个方法组合在一起了。
Step 3: HTML上调用TableSorterDemo
同样先调用snippet
<lift:TreeviewDemo/>
然后喂一个空的ul给snippet就可以了,注意id要一致。
<ul id="example" class="filetree"/>
这里的class用什么可以完全参考jquery treeview
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
用lift调用ajax很容易~
分享到:
相关推荐
变频器说明书大全系列-SIEI-Lift-Drive-Instruction-Manual.rar
下载了很久,下载自https://lift.cs.princeton.edu/java/windows/网速异常的慢,下载时间2021/01/26,需要的自取
maven-lift-plugin-0.1.jar
The Lift Web Framework provides web application developers tools to make writing security, interacting, scalable web applications easier than with any other web framework. After reading Part I of this...
ng-lift 用于将Angular.js应用程序升级到Angular的自动化工具 安装 yarn global add ng-lift 或者 npm install --global ng-... 然后,它会自动将其转换为对应的Angular (click)在此示例中(click) 。 此外,将删除对
Lift Off Java Installer是Java应用程序的安装程序。
Lift, Splat, Shoot: Encoding Images From Arbitrary Camera Rigs by Implicitly Unprojecting to 3D源码及权重,给不会上网的人下载
geojson-jackson.zip,一组javapojosforgeojsongeojsonpojosforjackson-轻松序列化和反序列化对象
ATV71 Lift programme manual-EN(英文)pdf,ATV71 Lift programme manual-EN(英文)
从左到右的流水灯
边缘约化形式上简单机构升力和圆度的计算_Computing Simple Mechanisms Lift-and-Round over Marginal Reduced Forms.pdf
Grasp-and-Lift EEG 检测 Kaggle 比赛 设置 需要 pip 和 python 克隆仓库git clone https://github.com/jrubin01/grasp-and-lift.git cd grasp-and-lift 创建虚拟环境virtualenv venv source venv/bin/activate ...
要启动 Lift 执行 ./sbt 脚本以加载 sbt,然后执行以下操作以启动 Web 服务器并在文件更改时编译源代码: clean ; container:start ; ~compile 进一步改进/不稳定的东西 目前您必须安装 jRebel 并为容器工作:开始...
embedded-jetty.zip,用于启动嵌入式Jetty的代码。提供了一种简单的方法来构建允许无XML应用程序的嵌入式Jetty
这项挑战的目标是仅使用 EEG 信号检测在抓取和抬起物体的任务期间与手部运动相关的 6 种不同事件。我们被要求提供 6 个事件和每个时间样本的概率。此挑战的评估指标是 6 种事件类型的平均 ROC 曲线下面积 (AUC)。 ...
提升相同站点Cookie的解决方法
81、1360:奇怪的电梯(lift)-2020.02.23a
pilot.zip,图数据库运算符