lift 에 widgets---TableSorter,TreeView 사용 하기

더 읽 기
'The Definitive Guide to Lift'12 장 은 widgets 를 소개 하 는 데 작은 오류 가 있 으 므 로 작은 실수 로 시간 을 낭비 하지 않도록 다시 한 번 쓰 십시오.
 
Lift 의 widget 은 말 하기 가 매우 간단 하 다.바로 Scala 로 ajax 코드 를 포장 한 것 이다.
 
1.TableSorter 사용 하기
TableSorter 는 표 데 이 터 를 보 여줄 때 매우 유용 합 니 다.lift 는 TableSorter 의 widget 을 가 져 왔 습 니 다.
 
1 단계:초기 화
boottstrap.liftweb.boot 에서:
끌어들이다
 

import net.liftweb.widgets.tablesorter._  

 
TableSorter.init 를 호출 하여 lift 에 게 이 widget 을 사용 하 라 고 알려 줍 니 다.lift 는 TableSorter 의 자원(js)을 호출 할 준 비 를 합 니 다.
 
2 단계:스 니 펫 만 들 기
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('my Table')를 사용 하고 있 습 니 다.여기 서 TableSorter('\#my Table')를 사용 하 는 이 유 는 보통 HTML 의 DOM 요 소 를 id 로 찾 기 때 문 입 니 다.
 
Step 3:HTML 에서 TableSorterDemo 호출
먼저 매우 정상 적 인 snippet 호출 방식 으로 HTML 에서 호출 합 니 다.여기 서 TableSorterDemo 는 ajax 로 써 야 할 것 을 만 들 것 입 니 다.render 후의 HTML 소스 코드 를 보 실 수 있 습 니 다.

 
그리고 표 데 이 터 를 첨부 하여 DEMO 를 만 들 면 됩 니 다.table 의 id 는 Table SorterDemo 에서 사용 하 는 것 과 일치 해 야 합 니 다.

 
 
 
    
Last Name
 
    
First Name
 
    
Email
 
    
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
    
2 단계:스 니 펫 만 들 기
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 에 게 먹 여주 면 됩 니 다.id 가 일치 하도록 주의 하 세 요.
 
 
    class         jquery treeview
 
 
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
 
 
 
 
 
 
 
 
 lift  ajax   ~