在lift中使用widgets---TableSorter,TreeView

《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很容易~