JQUERY树型插件ZTREE和插件tmpl()

最新推荐文章于 2023-06-14 15:15:00 发布

paullinjie

最新推荐文章于 2023-06-14 15:15:00 发布

阅读量720

点赞数

分类专栏： web前端

web前端专栏收录该内容

43 篇文章 1 订阅

订阅专栏

JQUERY树型插件ZTREE小例子

一个做.NET WEB开发的朋友介绍了ZTREE，它是基于jQuery库开发的树型控件。于是去官方下了一个开发包，看了看DEMO，觉得效果很不错，自己也做了个小例子，也许不太成形，效果倒是展现出来了，把使用方法记录下来，和大家分享分享。

1、新建了一个HTML在<head>标签内导入需要的JS和CSS文件。

[html]view plaincopy 
   
 <script language="javascript" type="text/javascript" src="js/jquery-1.6.4.js"></script>  
 <script language="javascript" type="text/javascript" src="js/jquery.ztree.core-3.0.js"></script>  
 <link type="text/css" rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" />  
 <script language="javascript" type="text/javascript" src="js/jquery.ztree.excheck-3.0.js"></script>  

我这里使用的是jquery1.6.4，jquery的开发包这是必须的，然后导入ztree.core核心包，这里使用的是ztree-3.0还是beta版本的。呵呵，ztree.excheck-3.0这是升级树控件，比如加上checkbox这些。

2、<script>部分就直接贴代码了

[html]view plaincopy 
   
 <script type="text/javascript" language="javascript">  
 /**ztree的参数配置，setting主要是设置一些tree的属性，是本地数据源，还是远程，动画效果，是否含有复选框等等**/    
 var setting = {  
  check: { /**复选框**/  
   enable: false,  
   chkboxType: {"Y":"", "N":""}  
  },  
  view: {                                    
   //dblClickExpand: false,  
   expandSpeed: 300 //设置树展开的动画速度，IE6下面没效果，  
  },                            
  data: {                                    
   simpleData: {   //简单的数据源，一般开发中都是从数据库里读取，API有介绍，这里只是本地的                           
    enable: true,  
    idKey: "id",  //id和pid，这里不用多说了吧，树的目录级别  
    pIdKey: "pId",  
    rootPId: 0   //根节点  
   }                            
  },                           
  callback: {     /**回调函数的设置，随便写了两个**/  
   beforeClick: beforeClick,                                    
   onCheck: onCheck                            
  }  
 };  
 function beforeClick(treeId, treeNode) {  
  alert("beforeClick");  
 }  
 function onCheck(e, treeId, treeNode) {  
  alert("onCheck");  
 }       
   
 var citynodes = [      /**自定义的数据源，ztree支持json,数组，xml等格式的**/  
  {id:0, pId:-1, name:"中国"},  
  {id:1, pId:0, name:"北京"},   
  {id:2, pId:0, name:"天津"},  
  {id:3, pId:0, name:"上海"},   
  {id:6, pId:0, name:"重庆"},   
  {id:4, pId:0, name:"河北省", open:false, nocheck:true},   
  {id:41, pId:4, name:"石家庄"},   
  {id:42, pId:4, name:"保定"},   
  {id:43, pId:4, name:"邯郸"},   
  {id:44, pId:4, name:"承德"},   
  {id:5, pId:0, name:"广东省", open:false, nocheck:true},   
  {id:51, pId:5, name:"广州"},   
  {id:52, pId:5, name:"深圳"},   
  {id:53, pId:5, name:"东莞"},   
  {id:54, pId:5, name:"佛山"},   
  {id:6, pId:0, name:"福建省", open:false, nocheck:true},   
  {id:61, pId:6, name:"福州"},   
  {id:62, pId:6, name:"厦门"},   
  {id:63, pId:6, name:"泉州"},   
  {id:64, pId:6, name:"三明"},  
  {id:7, pId:0, name:"四川省", open:true, nocheck:true},  
  {id:71, pId:7, name:"成都"},  
  {id:72, pId:7, name:"绵阳"},  
  {id:73, pId:7, name:"自贡"},  
  {id:711, pId:71, name:"金牛区"},  
  {id:712, pId:71, name:"锦江区"},  
  {id:7111, pId:711, name:"九里堤"},  
  {id:7112, pId:711, name:"火车北站"}  
 ];  
   
 $(document).ready(function(){//初始化ztree对象     
   var zTreeDemo = $.fn.zTree.init($("#cityTree"),setting, citynodes);  
 });  
 </script>    

3、body部分，就一个

[html]view plaincopy 
   
 <ul id="cityTree" class="ztree"></ul>  

4、当异步获取数据库的数据时，我们需要修改setting设置，也是返回的数组形式的数据：

[javascript]view plaincopy 
   
 var setting = {  
  async: {    
         enable: true,    
         type:'post',  
         url:"treedata.jsp"  
         ///dataFilter: filter  
     },     
     data: {                                    
   simpleData: {   //简单的数据源，一般开发中都是从数据库里读取，API有介绍，这里只是本地的                           
    enable: true,  
    idKey: "id",  //id和pid，这里不用多说了吧，树的目录级别  
    pIdKey: "pId",  
    rootPId: 0   //根节点  
   }                            
  },                      
  callback: {       
   onAsyncSuccess: zTreeOnAsyncSuccess  /**回调函数的设置，异步提交成功的回调函数**/  
  }  
 };  
   
 $(document).ready(function(){//初始化ztree对象      
  $.fn.zTree.init($("#cityTree"), setting);   
 });  

小结：以上是个很简单的ztree的应用小例子，数据源是本地的，一些复杂的应用还是在这基础上拓展的，API是很好的学习资料，可以多查查。

Java zTree 的异步加载demo示例

最近需要使用树形展示权限，所以研究了一下Java Tree，其实Java中有不少Tree展示，具体有如下几种：吐舌头

Tree的几种开源组件：
1.dtree

2.ztree(国内的，api全中文，我用这个)

3.JTree

4.dhtmlxTree(国外的，种类齐全)，网址为 : http://dhtmlx.com/docs/products/dhtmlxTree/index.shtml

##以后是我找的还不错的Tree组件，还有很多！

具体使用方式请参考zTreeAPI或zTree Demo

（1）编写数据库脚本添加数据

（2）定义一个基本权限类：Competence.java

[java]view plaincopy 
   
 publicclass Competence {
 privateint id;// 编号
 privateint pId;// 父节点
 privateint isParent;// 是否父节点
 private String name;// 节点名称
 privateint open;// 是否打开

[java]view plaincopy 
   

 
  // 此处省略 get,set方法  
 

[java]view plaincopy 
   
 ｝  

[java]view plaincopy 
   
 <span style="color:#ff0000;"><strong>（3）创建BaseDao.java联接数据库</strong></span>  

[java]view plaincopy 
   
 package com.demo.test;
 
 import java.sql.Connection;
 import java.sql.DriverManager;
 import java.sql.PreparedStatement;
 import java.sql.ResultSet;
 import java.sql.SQLException;
 import java.sql.Statement;
 
 /**
 * 连接数据源
 * @author 小奎
 */
 publicclass BaseDao {
 static Connection conn;// 创建联接
 PreparedStatement st; // 　预执行类
 ResultSet rs; // 结果集
 
 /**
 * 得到连接
 * @return connnection
 */
 publicstatic Connection getConnection() {
 try {
 // 加载驱动
 Class.forName("oracle.jdbc.driver.OracleDriver");
 try {
 // 创建联接
 conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl","scott","scott");
 System.out.println("---------------- 打开连接 -----------------");
 } catch (SQLException e) {
 System.out.println("---------------- 连接失败 -----------------");
 e.printStackTrace();
 }
 } catch (ClassNotFoundException e) {
 System.out.println("---------------- 驱动加载失败 -----------------");
 e.printStackTrace();
 }
 return conn;
 }
 
 /**
 * 关闭连接对象
 * @param rs
 * @param st
 * @param conn
 */
 publicstaticvoid closeConnection(ResultSet rs, Statement st, Connection conn) {
 try {
 if (rs !=null) {
 rs.close();
 }
 if (st !=null) {
 st.close();
 }
 if (conn !=null && !conn.isClosed()) {
 conn.close();
 }
 System.out.println("---------------- 关闭连接 -----------------");
 } catch (SQLException e) {
 System.out.println("---------------- 关闭连接失败 -----------------");
 e.printStackTrace();
 }
 }
 }

     /** 
   
 * 关闭连接对象 
   
 * @param rs 
   
 * @param st 
   
 * @param conn 
   
 */ 
   
 public static void closeConnection(ResultSet rs, Statement st, Connection conn) { 
   
 try { 
   
 if (rs != null) { 
   
 rs.close(); 
   
 } 
   
 if (st != null) { 
   
 st.close(); 
   
 } 
   
 if (conn != null && !conn.isClosed()) { 
   
 conn.close(); 
   
 } 
   
 System.out.println("---------------- 关闭连接 -----------------"); 
   
 } catch (SQLException e) { 
   
 System.out.println("---------------- 关闭连接失败 -----------------"); 
   
 e.printStackTrace(); 
   
 } 
   
 } 
   
 }

[java]view plaincopy 
   
 

 
   （4） 创建测试的类 Test.java 
  

[java]view plaincopy 
   
 package com.demo.test;
 
 import java.sql.Connection;
 import java.sql.SQLException;
 import java.util.ArrayList;
 import java.util.List;
 
 publicclass Testextends BaseDao {
 
 public List<Competence> getAllAuthorize() {
 List<Competence> authorizes = new ArrayList<Competence>();
 Connection conn = getConnection(); // 得到联接
 try {
 st = conn.prepareStatement("select * from authorize2 ");
 rs = st.executeQuery(); // 得到结果集
 while (rs.next()) {
 Competence authorize = new Competence();
 authorize.setId(rs.getInt("id"));
 authorize.setpId(rs.getInt("pid"));
 authorize.setOpen(rs.getInt("open"));
 authorize.setIsParent(rs.getInt("isParent"));
 authorize.setName(rs.getString("name"));
 // 添加到集合
 authorizes.add(authorize);
 }
 } catch (SQLException e) {
 System.out.println("---------------- 查询authorize失败 -----------------");
 e.printStackTrace();
 } finally {
 closeConnection(rs, st, conn);
 }
 return authorizes;
 }
 
 /**
 * 拼接成json类型
 * @return
 */
 public String getJSONData(){
 Test d = new Test();
 List<Competence> list=d.getAllAuthorize();
 StringBuffer json=new StringBuffer("[");
 String data="";
 for (int i =0; i < list.size(); i++) {
 json.append("{id:"+list.get(i).getId()+",");
 json.append("pId:"+list.get(i).getpId()+",");
 json.append("name:\""+list.get(i).getName()+"\",");
 if (list.get(i).getIsParent() !=0) {
 json.append("isParent:"+list.get(i).getIsParent()+",");
 }
 if (list.get(i).getOpen() !=0) {
 json.append("open:"+list.get(i).getOpen()+",");
 }
 data=json.substring(0,json.lastIndexOf(","))+"},";
 json=new StringBuffer(data);
 }
 data=json.substring(0, json.length()-1)+"]";
 System.out.println(data);
 return data;
 }
 publicstaticvoid main(String[] args) {
 Test demoTest=new Test();
 demoTest.getJSONData();
 }
 }

（4）创建加载zTree 树的html或jsp页面 asyncLoad.html

[html]view plaincopy 
   
 <!DOCTYPE html>
 <HTML>
 <HEAD>
 <TITLE>zTree Demo</TITLE>
 <metahttp-equiv="content-type"content="text/html; charset=UTF-8">
 <linkrel="stylesheet"href="../css/demo.css"type="text/css">
 <!-- 必须文件 zTreeStyle.css、jquery.ztree.core-x.js、jquery-x.min.js -->
 <linkrel="stylesheet"href="../css/zTreeStyle/zTreeStyle.css"type="text/css">
 <scripttype="text/javascript"src="../js/jquery-1.4.4.min.js"></script>
 <scripttype="text/javascript"src="../js/jquery.ztree.core-3.5.js"></script>
 <scriptlanguage="JavaScript">
 var setting = {
 async : {
 enable : true, // 设置 zTree是否开启异步加载模式
 url : "asyncData/loadData2.jsp", // Ajax 获取数据的 URL 地址
 autoParam : [ "id" ] // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数zId=1
 },
 data:{ // 必须使用data
 simpleData : {
 enable : true,
 idKey : "id", // id编号命名 默认
 pIdKey : "pId", // 父id编号命名 默认
 rootPId : 0 // 用于修正根节点父节点数据，即 pIdKey 指定的属性值
 }
 },
 // 回调函数
 callback : {
 onClick : function(event, treeId, treeNode, clickFlag) {
 // 判断是否父节点
 if(!treeNode.isParent){
 alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
 }
 },
 //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数
 onAsyncError : zTreeOnAsyncError,
 onAsyncSuccess : function(event, treeId, treeNode, msg){
 
 }
 }
 };
 
 // 加载错误提示
 function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
 alert("加载错误：" + XMLHttpRequest);
 };
 
 // 过滤函数
 function filter(treeId, parentNode, childNodes) {
 if (!childNodes)
 return null;
 for ( var i =0,l =childNodes.length; i< l; i++) {
 childNodes[i].name =childNodes[i].name.replace(/\.n/g, '.');
 }
 return childNodes;
 }
 
 // 渲染
 $(document).ready(function() {
 $.fn.zTree.init($("#treeDemo"), setting);
 });
 </script>
 </HEAD>
 <BODY>
 <div>
 <ulid="treeDemo"class="ztree"></ul>
 </div>
 </BODY>
 </HTML>

（5）创建一个接收的Servlet，本测试使用jsp代替 loadData.jsp

[html]view plaincopy 
   
 <%@ pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
 <%@ pageimport="com.demo.test.*" %>
 
 <%
 String id =request.getParameter("id"); // 父节点编号
 System.out.print("得到的节点id："+id);
 Test demo=new Test();
 String json=demo.getJSONData();
 out.print(json);
 %>

注：json数据最终会被拼接成array的形式，如下结果：雷同即可显示

[javascript]view plaincopy 
   
 [{id:100,pId:0,name:"父节点",isParent:1,open:1},{id:101,pId:100,name:"叶子节点—1",isParent:1},{id:102,pId:100,name:"叶子节点—2",isParent:1},{id:103,pId:100,name:"叶子节点—3",isParent:1},{id:104,pId:0,name:"NB的父节点",isParent:1,open:1},{id:105,pId:104,name:"叶子节点2—1",isParent:1},{id:106,pId:104,name:"叶子节点2—2",isParent:1},{id:107,pId:104,name:"叶子节点2—3"},{id:108,pId:0,name:"郁闷的父节点",isParent:1},{id:109,pId:108,name:"叶子节点3—1"},{id:110,pId:108,name:"叶子节点3—2"},{id:111,pId:108,name:"叶子节点3—3"},{id:112,pId:101,name:"秘书"},{id:113,pId:101,name:"行政"},{id:114,pId:102,name:"助理"},{id:115,pId:102,name:"保安"},{id:116,pId:103,name:"销售"},{id:117,pId:103,name:"前台"},{id:118,pId:103,name:"主管"},{id:119,pId:105,name:"卫生"},{id:120,pId:106,name:"人事"}]

 
  效果如图 
 

这里的小测试使用了子父节点同时加载完毕效果，加载完毕后，单击父节点不会再次访问数据库，会从缓存中加载。所以这里使用的open属性有效果，如果是单击父节点，加载子节点再次访问数据库的方式，open可能无效。

json的数据中如isParent:1，这样的数据1代表true

jQuery zTree 动态树的构建

一．下载、安装zTree

zTree下载地址：http://code.google.com/p/jquerytree/downloads/list

下载完成后解压，可以看到其中有三个文件夹和一个更新日志文件。

Css文件夹 zTree的样式和图片存放位置

Demo文件夹存放zTree的一些实例

Js文件夹存放的是所有与zTree相关的js文件。这里min是压缩版，我们在开发的时候建议使用未压缩版的（不含min的）。

开发时建议将这些压缩包统一放在一个文件夹（比如zTree）下，这样，如果需要查看对应的实例，可直接在当前工程下访问并做修改，便于开发使用。当然，开发完成后可以删除demo内容。

二．编辑页面

Jsp代码

<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ include file="../common/header.jsp" %>
<!DOCTYPE html>
<HTML>
<HEAD>
<title>指派权限</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${root}/css/dialogStyle.css"/>
<link rel="stylesheet" href="${root}/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" type="text/css" href="${root}/js/jquery/themes/icon.css" />
<STYLE type="text/css">
.btn {
BACKGROUND: url(../images/bt_bg.gif);
BORDER-RIGHT: #999999 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #CCCCCC 1px solid;
PADDING-LEFT: 2px; FONT-SIZE: 12px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
BORDER-LEFT: #CCCCCC 1px solid;
CURSOR: hand; COLOR: black;
PADDING-TOP: 2px;
BORDER-BOTTOM: #999999 1px solid;
}
</STYLE>
<!--
为提高效率，建议将1.4.4换成1.6.4版
<script type="text/javascript" src="${root}/js/zTree/js/jquery-1.4.4.min.js"></script>
-->
<script type="text/javascript" src="${root}/js/jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="${root}/js/jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.excheck-3.0.js"></script>
<script type="text/javascript" src="${root}/js/winutil.js"></script>
<!--
<script type="text/javascript" src="${root}/js/js/jquery.ztree.exedit-3.0.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
async: {
enable: true,//异步处理
//contentType: "application/json",//提交参数方式，这里 JSON 格式，默认form格式
url: '${root}/sys/listoper.action?roleId=${roleId}',//异步获取json格式数据的路径
autoParam: ["id","name"]//异步加载时需要提交的参数，多个用逗号分隔
},
callback: {//回调函数，在这里可做一些回调处理
//beforeAsync: zTreeBeforeAsync
},
check: {//设置 zTree 的节点上是否显示 checkbox / radio ,默认为false
enable: true
},
data: {
simpleData: {
/**
如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId
并且让数据满足父子关系。*/
enable: true,//true / false 分别表示使用 / 不使用简单数据模式
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var zNodes =[];//树节点，json格式，异步加载可设置为null或[]
var zTreeObj;//树对象
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);//实例化后直接返回树对象
//异步提交表单
$('#permissionform').form({
url: '${root}/sys/PermissionManagerole.action',
onSubmit: function() {
//获取树对象中选中的节点
var nodes = zTreeObj.getCheckedNodes();
var s = '';//选中节点ids
//遍历选中的节点，为s赋值
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].id;
}
document.all("roledto.permissionIds").value = s;
},
success: function(data) {
//操作成功，返回信息
var data = jQuery.parseJSON(data);
if(data.success == false){
alert(data.msg);
}
m_close();
}
});
});
//-->
</SCRIPT>
</HEAD>
<BODY οnunlοad="m_close()" style="background-color: #f7f7f7;">
<div style="border: 0px ;width: 100%;height:100%;background-color: #f7f7f7;">
<ul id="permission_tree" class="ztree" style="border: 0px; background-color: #f7f7f7;"></ul>
<form id="permissionform" method="post">
<table>
<tr>
<td><input type="hidden" name="roledto.permissionIds" /></td>
<td><input type="hidden" name="roledto.roleId" value="${roleId}"/></td>
<td><input type="hidden" name="orgid" value="${orgId}"/></td>
</tr>
<tr>
<td width="100%" align="right">
<input type="submit" style="width:60px;" class="btn" value="保存"/> 
<input type="button" style="width:60px;" class="btn" value="取消" οnclick="m_close()"/>
</td>
</tr>
</table>
</form>
</div>
</BODY>
</HTML>

<span style="font-size:12px;"></span>

三．后台Action

Java代码

private String id;
private String roleId;
/**
* 显示权限栏目树
* 这里采用一次加载所有树节点的方式
* 当然也可以换成逐级动态加载的方式
* @return
* @throws IOException
*/
@SuppressWarnings("unchecked")
public String list() throws IOException{
/**
* 再次查询时直接返回，这里采用所有节点一次加载的方式
* @param id 点击树的节点时传递到后台的属性id
*/
if(ValidateUtil.validateString(id)){
return SUCCESS;
}
//根据角色找到对应的操作权限id
String operationids = this.getOperationIdsByRoleId(roleId);
//查询所有的权限分类，如系统管理、订单管理、采购管理等等，作为树的一级节点
List<OperationClass> list =operationClassServiceImpl.getAllOperationClass();
//存放树节点信息
List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
//当前角色对应的操作
List<RoleOperation> rolist = this.roleServiceImpl.getRoleOperationByRoleId(roleId);
for(OperationClass node: list){ //第一级遍历，遍历所有的权限分类
Map<String,Object> item = new HashMap<String,Object>(); //最外层，父节点
item.put("id", node.getOperationClassId());//id属性，数据传递
item.put("name", node.getClassName()); //name属性，显示节点名称
item.put("isParent", true);//设置为父节点，这样所有最外层节点都是统一的图标，看起来会舒服些
//item.put("iconSkin", "diy02");//设置节点的图标皮肤， diy02在zTreeStyle.css中进行设置
/**
* 如果当前节点（权限分类）有对应的操作（权限），添加操作权限作为该节点的子节点
*/
if (node.getOperations()!=null&&node.getOperations().size()>0){
Iterator<Operation> it = node.getOperations().iterator();
//存放第一层子节点信息
List<Map<String,Object>> subitems = new ArrayList<Map<String,Object>>();
while(it.hasNext()){//对操作进行遍历
Map<String,Object> subitem = new HashMap<String,Object>();//第二层
Operation oper = (Operation) it.next();
subitem.put("id", oper.getOperationId()+":oper");//id属性，数据传递
subitem.put("name", oper.getOperationName()); //name属性，显示节点名称
/**
* 如果操作中有多个选项，添加选项作为第二层的子节点
*/
if(oper!=null&&oper.getOptions()!=null){
String uoption = "";//有操作权限的操作选项
for(RoleOperation ro : rolist){
if(ro.getOperation().getOperationId().
equals(oper.getOperationId())){//如果当前角色有对应的操作
uoption = ro.getOptions();
}
}
String[] suboper = oper.getOptions().split(",");
List<Map<String,Object>> items3 = new ArrayList<Map<String,Object>>(); //第三层
for(int i=0;i<suboper.length;i++){
Map<String,Object> item3 = new HashMap<String,Object>();
item3.put("id", "opt:"+oper.getOperationId()+":"+suboper[i]);//id属性，数据传递
item3.put("name", suboper[i]); //name属性，显示节点名称
if(uoption!=null&&!"".equals(uoption)){//如果操作中有操作选项
if(uoption.contains(suboper[i]+",")){//如果当前角色有此操作选项
item3.put("checked", true);//将此选项选中
}
}
items3.add(item3);//添加到树的第三层
}
subitem.put("children", items3);//添加第二层子节点
}else{//如果操作没有选项
if(operationids.contains(oper.getOperationId())){//当前角色有此操作
subitem.put("checked", true);//将此操作选中
}
}
subitems.add(subitem);//添加到树的第二层
}
item.put("children", subitems);//添加第一层子节点
}
items.add(item); //添加到树的第一层
}
JSONArray json = JSONArray.fromObject(items);//转成json格式
jsonString = json.toString();//json格式字符串
return SUCCESS;
}

jQuery .tmpl(), .template()学习

有趣的jQuery插件.tmpl()，其文档在这里。

官方解释对该插件的说明：将匹配的第一个元素作为模板，render指定的数据，签名如下:

.tmpl([data,][options])

其中参数data的用途很明显：用于render的数据，可以是任意js类型，包括数组和对象。options一般情况下都是选项了，官方指出，此处的options是一个用户自定义的键值对的map，继承自tmplItem数据结构，适用于模板render动作期间。

在这里可以下载到最新的tmpl插件，值的一提的是，官方同时也说明了，tmpl目前是beta版，使用需谨慎..

好吧，先来一个最直观的例子：

 
   
        <%@ Page Language="C#" AutoEventWireup="true" %> 
       

           
       
 
        <!DOCTYPE html> 
       
 
        < 
        html 
        > 
       
 
        < 
        head 
        > 
       
 
             
        < 
        title 
        >jquery template demo</ 
        title 
        > 
       
 
             
        < 
        link 
        rel 
        = 
        "stylesheet" 
        href 
        = 
        "content/site.css" 
        type 
        = 
        "text/css" 
        /> 
       
 
             
        < 
        link 
        rel 
        = 
        "stylesheet" 
        href 
        = 
        "content/jquery.ui.css" 
        type 
        = 
        "text/css" 
        /> 
       
 
             
        < 
        script 
        type 
        = 
        "text/javascript" 
        src 
        = 
        "scripts/jquery.js" 
        ></ 
        script 
        > 
       
 
             
        < 
        script 
        type 
        = 
        "text/javascript" 
        src 
        = 
        "scripts/jquery.ui.js" 
        ></ 
        script 
        > 
       
 
             
        < 
        script 
        type 
        = 
        "text/javascript" 
        src 
        = 
        "scripts/jquery.tmpl.js" 
        ></ 
        script 
        > 
       
 
             
        < 
        script 
        id 
        = 
        "myTemplate" 
        type 
        = 
        "text/x-jquery-tmpl" 
        > 
       
 
                 
        < 
        tr 
        >< 
        td 
        >${ID}</ 
        td 
        >< 
        td 
        >${Name}</ 
        td 
        ></ 
        tr 
        > 
       
 
             
        </ 
        script 
        > 
       
 
             
        < 
        script 
        type 
        = 
        "text/javascript" 
        > 
       
 
                 
        $(function () { 
       
 
                     
        var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}]; 
       
 
                     
        $('#myTemplate').tmpl(users).appendTo('#rows'); 
       
 
                 
        }); 
       
 
             
        </ 
        script 
        > 
       
 
             
        < 
        style 
        type 
        = 
        "text/css" 
        > 
       
 
                 
        body 
       
 
                 
        { 
       
 
                     
        padding: 10px; 
       
 
                 
        } 
       
 
                 
        table 
       
 
                 
        { 
       
 
                     
        border-collapse: collapse; 
       
 
                 
        } 
       
 
             
        </ 
        style 
        > 
       
 
        </ 
        head 
        > 
       
 
        < 
        body 
        > 
       
 
             
        < 
        table 
        cellspacing 
        = 
        "0" 
        cellpadding 
        = 
        "3" 
        border 
        = 
        "1" 
        > 
       
 
                 
        < 
        tbody 
        id 
        = 
        "rows" 
        > 
       
 
                 
        </ 
        tbody 
        > 
       
 
             
        </ 
        table 
        > 
       
 
        </ 
        body 
        > 
       
 
        </ 
        html 
        > 
       
 
 

例子虽然很小也很简单，但我觉得这个已经很有用了。

当然，.tmpl()还可以使用来自远端的数据，比如说服务:

 
        public  
        ActionResult SampleData() 
       
        { 
       
        var json = 
        new  
        JsonResult(); 
       
        json.Data = 
        new 
        [] {  
        new  
        { ID =  
        "remote1" 
        , Name =  
        "abcd"  
        },  
        new 
        { ID =  
        "remote2" 
        , Name = 
        "efg"  
        } }; 
       
        json.JsonRequestBehavior = JsonRequestBehavior.AllowGet; 
       
        return 
        json; 
       
        }

这是一个MVC的Action，我把它当做是一个提供数据的服务，然后js代码如下:

 
        $( 
        '#btnAjax' 
        ).click( 
        function 
        () { 
       
        $.getJSON( 
        '@Url.Action("SampleData", "Home")' 
        , 
        function  
        (json) { 
       
        $( 
        '#rows' 
        ).empty(); 
       
        $( 
        '#myTemplate' 
        ).tmpl(json).appendTo( 
        '#rows' 
        ); 
       
        }); 
       
        });

效果:

定义模板时，推荐的方式为定义使用

 
        <script id= 
        'templateName'  
        type= 
        'text/x-jquery-tmpl' 
        ></script>

做为模板的包装器，但定义方式并不只有这一种，你可以使用

 
   
        < 
        div 
        id 
        = 
        "template" 
        style 
        = 
        "display: none;" 
        > 
        <!-- markup --> 
        </ 
        div 
        > 
       
 
 

的方式来定义，但是官方文档中说，这种方法可能会产生浏览器无法解析的HTML，因此不推荐使用，不过我试了下，倒没有出什么意外：

 
   
        < 
        div 
        id 
        = 
        "container" 
        > 
       
 
        </ 
        div 
        > 
       
 
        < 
        div 
        id 
        = 
        "inline" 
        style 
        = 
        "display: none" 
        > 
       
 
             
        < 
        label 
        > 
       
 
                 
        ${ID}</ 
        label 
        >     
       
 
             
        < 
        label 
        > 
       
 
                 
        ${Name}</ 
        label 
        >< 
        br 
        /> 
       
 
        </ 
        div 
        > 
       
 
 

 
   
        var 
        users = [{ ID:  
        'think8848' 
        , Name: 
        'Joseph Chan'  
        }, { ID:  
        'aCloud' 
        , Name: 
        'Mary Cheung' 
        }]; 
       
 
        $( 
        '#inline' 
        ).tmpl(users).appendTo( 
        '#container' 
        ); 
       
 
 

效果:

编译缓存模板，在jQuery .tmpl()中，还可以将模板事先编译并缓存起来，然后在合适的时侯再使用，这对于一些数据嵌套是很有用的，如:

 
   
        < 
        table 
        cellspacing 
        = 
        "0" 
        cellpadding 
        = 
        "3" 
        border 
        = 
        "1" 
        > 
       
 
             
        < 
        tbody 
        id 
        = 
        "compileRows" 
        > 
       
 
             
        </ 
        tbody 
        > 
       
 
        </ 
        table 
        > 
       
 
 

 
        <script id= 
        "compile1" 
        type= 
        "text/x-jquery-tmpl" 
        > 
       
        {{tmpl 
        'cached' 
        }} 
       
        <tr><td>${ID}</td><td>${Name}</td></tr> 
       
        </script> 
       
        <script id= 
        "compile2" 
        type= 
        "type/x-jquery-tmpl" 
        > 
       
        <tr><td colspan= 
        "2" 
        >${Group}</td></tr>    
       
        </script> 
       
        <script type= 
        "text/javascript" 
        > 
       
        $( 
        function 
        () { 
       
        var 
        groupUsers = [{ ID:  
        'think8848' 
        , Name: 
        'Joseph Chan' 
        , Group: 
        'Administrators'  
        }, { ID:  
        'aCloud' 
        , Name: 
        'Mary Cheung' 
        , Group: 
        'Users' 
        }]; 
       
        $( 
        '#compile2' 
        ).template( 
        'cached' 
        ); 
       
        $( 
        '#compile1' 
        ).tmpl(groupUsers).appendTo( 
        '#compileRows' 
        ); 
       
        }); 
       
        </script>

效果:

$.template()方法，将一段Html编译为模板，示例:

 
        var 
        markup =  
        '<tr><td>${ID}</td><td>${Name}</td></tr>' 
        ; 
       
        $.template( 
        'template' 
        , markup); 
       
        $.tmpl( 
        'template' 
        , users).appendTo( 
        '#templateRows' 
        );

这样就可以将markup中定义的模板应用于templateRows对象。

jQuery .tmpl()的标签，表达式，属性：

${}:从前面的例子来看，这个标签的作用很明显了，相当于是占位符，但是它还有另一种写法{{= field}}如:

 
   
        < 
        script 
        id 
        = 
        "myTemplate" 
        type 
        = 
        "text/x-jquery-tmpl" 
        > 
       
 
             
        < 
        tr 
        >< 
        td 
        >{{= ID}}</ 
        td 
        >< 
        td 
        >{{= Name}}</ 
        td 
        ></ 
        tr 
        > 
       
 
        </ 
        script 
        > 
       
 
 

必须要注意的是，"="号后必须跟一个空格，不然是没有效果的。

另外，${}中还可以放表达式，这个牛x吧，如:

 
   
        < 
        table 
        cellspacing 
        = 
        "0" 
        cellpadding 
        = 
        "3" 
        border 
        = 
        "1" 
        > 
       
 
             
        < 
        tbody 
        id 
        = 
        "expressionRows" 
        > 
       
 
             
        </ 
        tbody 
        > 
       
 
        </ 
        table 
        > 
       
 
 

 
   
        <script type= 
        "text/javascript" 
        > 
       
 
             
        $( 
        function 
        () { 
       
 
                 
        var 
        userLangs = [{ ID:  
        'think8848' 
        , Name: 
        'Joseph Chan' 
        , Langs: [ 
        'Chinese' 
        , 
        'English' 
        ] }, { ID: 
        'aCloud' 
        , Name: 
        'Mary Cheung' 
        , Langs: [ 
        'Chinese' 
        , 
        'French' 
        ]}]; 
       
 
                 
        $( 
        '#expression' 
        ).tmpl(userLangs).appendTo( 
        '#expressionRows' 
        ); 
       
 
             
        }); 
       
 
        </script> 
       
 
 

效果：

jQuery .tmpl()有两个比较有用的属性:$item、$data:

$item代表当前的模板；$data代表当前的数据。

 
   
        < 
        table 
        cellspacing 
        = 
        "0" 
        cellpadding 
        = 
        "3" 
        border 
        = 
        "1" 
        > 
       
 
             
        < 
        tbody 
        id 
        = 
        "propertyRows" 
        > 
       
 
             
        </ 
        tbody 
        > 
       
 
        </ 
        table 
        > 
       
 
 

 
        <script id= 
        "property" 
        type= 
        "text/x-jquery-tmpl" 
        > 
       
        <tr><td>${ID}</td><td>${$data.Name}</td><td>${$item.getLangs( 
        '; ' 
        )}</td></tr> </script> 
       
        <script type= 
        "text/javascript" 
        > 
       
        $( 
        function 
        () { 
       
        var 
        userLangs = [{ ID:  
        'think8848' 
        , Name: 
        'Joseph Chan' 
        , Langs: [ 
        'Chinese' 
        , 
        'English' 
        ] }, { ID: 
        'aCloud' 
        , Name: 
        'Mary Cheung' 
        , Langs: [ 
        'Chinese' 
        , 
        'French' 
        ]}]; 
       
        $( 
        '#property' 
        ).tmpl(userLangs, { 
       
        getLangs: 
        function  
        (separator) { 
       
        return 
        this 
        .data.Langs.join(separator); 
       
        } 
       
        }) 
       
        .appendTo( 
        '#propertyRows' 
        ); 
       
        }); 
       
        </script>

效果:

{{each}}这个标签一看就知道是做循环用的了，用法如下：

 
   
        <script id= 
        "each" 
        type= 
        "text/x-jquery-tmpl" 
        > 
       
 
               
        <li>ID: ${ID}; Name: ${Name};<br />Langs:<ul>{{each Langs}}<li>${$index + 1}: <label>${$value}. </label></li>{{/each}}<ul></li> 
       
 
        </script> 
       
 
        <script type= 
        "text/javascript" 
        > 
       
 
             
        $( 
        function 
        () { 
       
 
                 
        var 
        userLangs = [{ ID:  
        'think8848' 
        , Name: 
        'Joseph Chan' 
        , Langs: [ 
        'Chinese' 
        , 
        'English' 
        ] }, { ID: 
        'aCloud' 
        , Name: 
        'Mary Cheung' 
        , Langs: [ 
        'Chinese' 
        , 
        'French' 
        ]}]; 
       
 
                 
        $( 
        '#each' 
        ).tmpl(userLangs).appendTo( 
        '#eachList' 
        ); 
       
 
             
        }); 
       
 
 

效果:

{{each}}还有另一种写法:

 
        <script id= 
        "each2" 
        type= 
        "text/x-jquery-tmpl" 
        > 
       
        <li>ID: ${ID}; Name: ${Name};<br />Langs:<ul><strong>{{each(i,lang) Langs}}<li>${i + 1}: <label>${lang}. </label></li>{{/each}}</strong></ul></li> 
       
        </script>

作用和前一种是一样的。

{{if}}和{{else}}，这两个标签应该一看就知道作用了，直接上示例:

 
   
        <script id= 
        "ifelse" 
        type= 
        "text/x-jquery-tmpl" 
        > 
       
 
               
        <tr><td>${ID}</td><td>${Name}</td><td>{{ 
        if 
        Langs.length > 1}}${Langs.join( 
        '; ' 
        )}{{ 
        else 
        }}${Langs}{{/ 
        if 
        }}</td></tr> 
       
 
        </script> 
       
 
 

如果Langs数组元素超过1个，则用'; '连接起来，否则就直接显示Langs，效果:

{{html}}，直接将对象属性值作为HTML代码替换占位符：

 
        <script id= 
        "html" 
        type= 
        "text/x-jquery-tmpl" 
        > 
       
        <tr><td>${ID}</td><td>${Name}</td><td>{{html Ctrl}}</td></tr> 
       
        </script> 
       
        <script type= 
        "text/javascript" 
        > 
       
        $( 
        function 
        () { 
       
        var 
        ctrls = [{ ID:  
        'think8848' 
        , Name: 
        'Joseph Chan' 
        , Ctrl: 
        '<input type="button" value="Demo" />' 
        }, { ID:  
        'aCloud' 
        , Name: 
        'Mary Cheung' 
        , Ctrl: 
        '<input type="text" value="Demo" />' 
        }]; 
       
        $( 
        '#html' 
        ).tmpl(ctrls).appendTo( 
        '#htmlRows' 
        ); 
       
        }); 
       
        </script>

效果:

{{tmpl}}，前面已经提过该标签了，这里再给一个使用参数的例子:

 
        <script id= 
        "tmpl1" 
        type= 
        "text/x-jquery-tmpl" 
        > 
       
        <tr><td>${ID}</td><td>${Name}</td><td> {{tmpl($data) 
        '#tmpl2' 
        }}</td></tr>       
       
        </script> 
       
        <script id= 
        "tmpl2" 
        type= 
        "type/x-jquery-tmpl" 
        > 
       
        {{each Langs}}${$value}  {{/each}}   
       
        </script> 
       
        <script type= 
        "text/javascript" 
        > 
       
        $( 
        function 
        () { 
       
        var 
        userLangs = [{ ID:  
        'think8848' 
        , Name: 
        'Joseph Chan' 
        , Langs: [ 
        'Chinese' 
        , 
        'English' 
        ] }, { ID: 
        'aCloud' 
        , Name: 
        'Mary Cheung' 
        , Langs: [ 
        'Chinese' 
        , 
        'French' 
        ]}]; 
       
        $( 
        '#tmpl1' 
        ).tmpl(userLangs).appendTo( 
        '#tmplRows' 
        ); 
       
        }); 
       
        </script>

效果:

{{wrap}},包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器，示例:

 
        <script id= 
        "myTmpl" 
        type= 
        "text/x-jquery-tmpl" 
        > 
       
        The following wraps and reorders some HTML content: 
       
        {{wrap  
        "#tableWrapper" 
        }} 
       
        <h3>One</h3> 
       
        <div> 
       
        First <b>content</b> 
       
        </div> 
       
        <h3>Two</h3> 
       
        <div> 
       
        And <em>more</em> <b>content</b>... 
       
        </div> 
       
        {{/wrap}} 
       
        </script> 
       
        <script id= 
        "tableWrapper" 
        type= 
        "text/x-jquery-tmpl" 
        > 
       
        <table cellspacing= 
        "0" 
        cellpadding= 
        "3" 
        border= 
        "1" 
        ><tbody> 
       
        <tr> 
       
        {{each $item.html( 
        "h3" 
        , 
        true 
        )}} 
       
        <td> 
       
        ${$value} 
       
        </td> 
       
        {{/each}} 
       
        </tr> 
       
        <tr> 
       
        {{each $item.html( 
        "div" 
        )}} 
       
        <td> 
       
        {{html $value}} 
       
        </td> 
       
        {{/each}} 
       
        </tr> 
       
        </tbody></table> 
       
        </script> 
       
        <script type= 
        "text/javascript" 
        > 
       
        $( 
        function 
        () { 
       
        $( 
        '#myTmpl' 
        ).tmpl().appendTo( 
        '#wrapDemo' 
        ); 
       
        }); 
       
        </script>

效果:

$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item，示例:

 
        $( 
        'tbody' 
        ).delegate( 
        'tr' 
        , 
        'click' 
        , 
        function  
        () { 
       
        var 
        item = $.tmplItem( 
        this 
        ); 
       
        alert(item.data.Name); 
       
        });

效果:

源代码下载

https://github.com/jquery/jquery-tmpl

paullinjie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQUERY树型插件ZTREE和插件tmpl()

JQUERY树型插件ZTREE小例子一个做.NET WEB开发的朋友介绍了ZTREE，它是基于jQuery库开发的树型控件。于是去官方下了一个开发包，看了看DEMO，觉得效果很不错，自己也做了个小例子，也许不太成形，效果倒是展现出来了，把使用方法记录下来，和大家分享分享。1、新建了一个HTML在标签内导入需要的JS和CSS文件。[html] view plainco
复制链接

扫一扫