《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源代码。
然后附上表格数据做个DEMO就OK了，注意table的id要和TableSorterDemo上使用的保持一致。
| Last Name | First Name | Due | Web Site | |
|---|---|---|---|---|
| Smith | John | [email protected] | $50.00 | http://www.jsmith.com |
| Bach | Frank | [email protected] | $50.00 | http://www.frank.com |
| Doe | Jason | [email protected] | $100.00 | http://www.jdoe.com |
| Conway | Tim | [email protected] | $50.00 | http://www.timconway.com |
二，使用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
然后喂一个空的ul给snippet就可以了，注意id要一致。
这里的class用什么可以完全参考jquery treeview
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
用lift调用ajax很容易~