`
alanwu
  • 浏览: 200472 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    lift-shift-led-3.c_dotledleftright_

    我们的重点是基于C语言的编程实现,具体代码可以在名为"lift-shift-led-3.c"的文件中找到。这个程序涉及到的知识点包括数字电路、C语言编程、移位寄存器以及定时器中断。 首先,了解流水灯的基本原理至关重要。流水...

    lift-java-installer.exe

    下载了很久,下载自https://lift.cs.princeton.edu/java/windows/网速异常的慢,下载时间2021/01/26,需要的自取

    lift-actor_2.9.1-2.6-M1.zip

    标题中的"lift-actor_2.9.1-2.6-M1.zip"指的是一个与 Lift 框架相关的库的版本,Lift 是一个用 Scala 编写的、功能强大的 Web 开发框架。2.9.1-2.6-M1 是这个库的特定版本号,暗示了它是2.9.1版本系列的一个中期版本...

    lift-samesite-cookie-workaround

    "lift-samesite-cookie-workaround"这个项目专注于解决在使用Scala编程语言时遇到的同站(SameSite)Cookie问题。同站Cookie是浏览器为了防止跨站请求伪造(CSRF)攻击和增强用户隐私而引入的一种机制。然而,在某些...

    lift-jquery-module_2-6_2.10-2.7.zip

    标题中的“lift-jquery-module_2-6_2.10-2.7.zip”指出这是一个与Lift Web框架相关的jQuery模块,版本为2.6,兼容2.10到2.7版本的Lift。Lift是一个用Scala编写的开源Web应用框架,它提供了强大的MVC(模型-视图-控制...

    变频器说明书大全系列-SIEI-Lift-Drive-Instruction-Manual.rar

    在SIEI-Lift-Drive-Instruction-Manual中,详细介绍了变频器的安装位置选择、电气连接和机械安装步骤,包括如何正确接地、设置电源输入、电机输出以及各种控制信号的接线方法。 四、参数设置与调试 变频器的性能很...

    maven-lift-plugin-0.1.jar

    maven-lift-plugin-0.1.jar

    lift-proto_2.9.2-2.5-M3.zip

    标题中的"lift-proto_2.9.2-2.5-M3.zip"指的是一个名为"Lift Proto"的开源项目,版本号为2.9.2到2.5的M3预览版。Lift是一个用Scala编程语言编写的开源Web框架,它提供了一种安全、高效的方式来构建现代Web应用程序。...

    Simply_Lift

    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...

    Lift Off Java Installer-开源

    在提供的文件列表中,我们可以看到以下几个关键组件: 1. `installer.filelist`:这个文件很可能包含了安装过程中涉及的所有文件的清单,包括文件路径、大小等信息,用于指导安装过程的正确执行。 2. `installer....

    ng-lift:用于将Angular.js应用程序升级到Angular的自动化工具

    ng-lift 用于将Angular.js应用程序升级到Angular的自动化工具 安装 yarn global add ng-lift 或者 npm install --global ng-... 然后,它会自动将其转换为对应的Angular (click)在此示例中(click) 。 此外,将删除对

    gateway-service-as-0.5.0.zip

    总的来说,"lift-ng-js"是为了解决在Scala的Lift框架中使用AngularJS开发富客户端应用的挑战,它通过提供一个集成层,使得开发者能够无缝地在两个技术栈之间工作,提高了开发效率和应用质量。如果你正在寻找一种方式...

    activate-lift_2.10-1.5.zip

    【标题】"activate-lift_2.10-...对于学习和研究,或者在自己的项目中使用这些技术,开源项目提供了丰富的资源和社区支持。如果你对微服务架构、API网关或者Scala的Lift框架有兴趣,这两个项目都提供了宝贵的实践机会。

    Node.js-Lift是一个功能强大的数据库结构迁移工具

    - `examples/`:示例项目,展示如何在实际应用中使用Lift。 - `docs/`:文档资料,包括API参考和用户指南。 - `scripts/`:可能包含用于初始化、安装或运行Lift的脚本。 - `tests/`:测试用例,确保Lift的正确性和...

    lift-newrelic_2.9.2-1.0.0.zip

    【标题】"lift-newrelic_2.9.2-1.0.0.zip" 提供的是一个针对 Lift 框架与 New Relic 监控集成的版本,具体为 2.9.2-1.0.0。Lift 是一个用 Scala 语言编写的开源 web 开发框架,它以其安全性和高性能而受到开发者青睐...

    lift-ng-chat-impress:15 分钟聊天与lift-ng impress.js 演示文稿

    Lift-ng是Scala语言中的一个Web开发框架,它扩展了AngularJS的功能,使其能在Scala后端和前端之间无缝协作。而impress.js则是一个用于创建令人印象深刻的全屏演示文稿的JavaScript库,它利用CSS3转换和过渡效果来...

    基于Vue.js的Lift-Background-Manager前端设计源码

    该项目是基于Vue.js的Lift-Background-Manager前端设计源码,包含240个文件,涵盖71个Vue组件、63个JavaScript脚本、42个SVG图形、21个GIF动画、16个PNG图片、6个SCSS样式表、5个CSS样式表、3个WOFF字体文件、2个...

    lift-ceshi-bug.rar_测试报告

    这份名为“lift-ceshi-bug.rar_测试报告”的文件,显然记录了针对电梯系统平台的一次详细测试过程,旨在发现并修复潜在的问题,以确保系统的稳定性和安全性。测试报告对于系统更新具有指导意义,因为它们提供了宝贵...

Global site tag (gtag.js) - Google Analytics