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

于 2013-10-05 21:11:03 发布
阅读量2.5k 收藏 3
点赞数 1
分类专栏： web
本文介绍了一款基于JQUERY的树型插件ZTREE，并通过实例展示了如何将其应用于.NET WEB开发中。文章详细讲解了ZTREE的基本配置、使用方法及异步加载数据的具体步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

JQUERY树型插件ZTREE小例子

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

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

[html] view plain copy print ?
  1. <script language="javascript" type="text/javascript" src="js/jquery-1.6.4.js"></script>  
  2. <script language="javascript" type="text/javascript" src="js/jquery.ztree.core-3.0.js"></script>  
  3. <link type="text/css" rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" />  
  4. <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 plain copy print ?
  1. <script type="text/javascript" language="javascript">  
  2. /**ztree的参数配置，setting主要是设置一些tree的属性，是本地数据源，还是远程，动画效果，是否含有复选框等等**/    
  3. var setting = {  
  4.  check: { /**复选框**/  
  5.   enable: false,  
  6.   chkboxType: {"Y":"", "N":""}  
  7.  },  
  8.  view: {                                    
  9.   //dblClickExpand: false,  
  10.   expandSpeed: 300 //设置树展开的动画速度，IE6下面没效果，  
  11.  },                            
  12.  data: {                                    
  13.   simpleData: {   //简单的数据源，一般开发中都是从数据库里读取，API有介绍，这里只是本地的                           
  14.    enable: true,  
  15.    idKey: "id",  //id和pid，这里不用多说了吧，树的目录级别  
  16.    pIdKey: "pId",  
  17.    rootPId: 0   //根节点  
  18.   }                            
  19.  },                           
  20.  callback: {     /**回调函数的设置，随便写了两个**/  
  21.   beforeClick: beforeClick,                                    
  22.   onCheck: onCheck                            
  23.  }  
  24. };  
  25. function beforeClick(treeId, treeNode) {  
  26.  alert("beforeClick");  
  27. }  
  28. function onCheck(e, treeId, treeNode) {  
  29.  alert("onCheck");  
  30. }       
  31.   
  32. var citynodes = [      /**自定义的数据源，ztree支持json,数组，xml等格式的**/  
  33.  {id:0, pId:-1, name:"中国"},  
  34.  {id:1, pId:0, name:"北京"},   
  35.  {id:2, pId:0, name:"天津"},  
  36.  {id:3, pId:0, name:"上海"},   
  37.  {id:6, pId:0, name:"重庆"},   
  38.  {id:4, pId:0, name:"河北省", open:false, nocheck:true},   
  39.  {id:41, pId:4, name:"石家庄"},   
  40.  {id:42, pId:4, name:"保定"},   
  41.  {id:43, pId:4, name:"邯郸"},   
  42.  {id:44, pId:4, name:"承德"},   
  43.  {id:5, pId:0, name:"广东省", open:false, nocheck:true},   
  44.  {id:51, pId:5, name:"广州"},   
  45.  {id:52, pId:5, name:"深圳"},   
  46.  {id:53, pId:5, name:"东莞"},   
  47.  {id:54, pId:5, name:"佛山"},   
  48.  {id:6, pId:0, name:"福建省", open:false, nocheck:true},   
  49.  {id:61, pId:6, name:"福州"},   
  50.  {id:62, pId:6, name:"厦门"},   
  51.  {id:63, pId:6, name:"泉州"},   
  52.  {id:64, pId:6, name:"三明"},  
  53.  {id:7, pId:0, name:"四川省", open:true, nocheck:true},  
  54.  {id:71, pId:7, name:"成都"},  
  55.  {id:72, pId:7, name:"绵阳"},  
  56.  {id:73, pId:7, name:"自贡"},  
  57.  {id:711, pId:71, name:"金牛区"},  
  58.  {id:712, pId:71, name:"锦江区"},  
  59.  {id:7111, pId:711, name:"九里堤"},  
  60.  {id:7112, pId:711, name:"火车北站"}  
  61. ];  
  62.   
  63. $(document).ready(function(){//初始化ztree对象     
  64.   var zTreeDemo = $.fn.zTree.init($("#cityTree"),setting, citynodes);  
  65. });  
  66. </script>    

3、body部分，就一个

[html] view plain copy print ?
  1. <ul id="cityTree" class="ztree"></ul>  

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

[javascript] view plain copy print ?
  1. var setting = {  
  2.  async: {    
  3.         enable: true,    
  4.         type:'post',  
  5.         url:"treedata.jsp"  
  6.         ///dataFilter: filter  
  7.     },     
  8.     data: {                                    
  9.   simpleData: {   //简单的数据源，一般开发中都是从数据库里读取，API有介绍，这里只是本地的                           
  10.    enable: true,  
  11.    idKey: "id",  //id和pid，这里不用多说了吧，树的目录级别  
  12.    pIdKey: "pId",  
  13.    rootPId: 0   //根节点  
  14.   }                            
  15.  },                      
  16.  callback: {       
  17.   onAsyncSuccess: zTreeOnAsyncSuccess  /**回调函数的设置，异步提交成功的回调函数**/  
  18.  }  
  19. };  
  20.   
  21. $(document).ready(function(){//初始化ztree对象      
  22.  $.fn.zTree.init($("#cityTree"), setting);   
  23. });  

小结：以上是个很简单的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 plain copy print ?
  1. publicclass Competence {
  2. privateint id;// 编号
  3. privateint pId;// 父节点
  4. privateint isParent;// 是否父节点
  5. private String name;// 节点名称
  6. privateint open;// 是否打开
[java] view plain copy print ?
  1. // 此处省略 get,set方法  
[java] view plain copy print ?
  1. ｝  
<span style="color:#ff0000;"><strong>（3）创建BaseDao.java联接数据库</strong></span>
[java] view plain copy print ?
  1. package com.demo.test;
  3. import java.sql.Connection;
  4. import java.sql.DriverManager;
  5. import java.sql.PreparedStatement;
  6. import java.sql.ResultSet;
  7. import java.sql.SQLException;
  8. import java.sql.Statement;
  10. /**
  11. * 连接数据源
  12. * @author 小奎
  13. */
  14. publicclass BaseDao {
  15. static Connection conn;// 创建联接
  16. PreparedStatement st; // 　预执行类
  17. ResultSet rs; // 结果集
  19. /**
  20. * 得到连接
  21. * @return connnection
  22. */
  23. publicstatic Connection getConnection() {
  24. try {
  25. // 加载驱动
  26. Class.forName("oracle.jdbc.driver.OracleDriver");
  27. try {
  28. // 创建联接
  29. conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl","scott","scott");
  30. System.out.println("---------------- 打开连接 -----------------");
  31. } catch (SQLException e) {
  32. System.out.println("---------------- 连接失败 -----------------");
  33. e.printStackTrace();
  34. }
  35. } catch (ClassNotFoundException e) {
  36. System.out.println("---------------- 驱动加载失败 -----------------");
  37. e.printStackTrace();
  38. }
  39. return conn;
  40. }
  42. /**
  43. * 关闭连接对象
  44. * @param rs
  45. * @param st
  46. * @param conn
  47. */
  48. publicstaticvoid closeConnection(ResultSet rs, Statement st, Connection conn) {
  49. try {
  50. if (rs !=null) {
  51. rs.close();
  52. }
  53. if (st !=null) {
  54. st.close();
  55. }
  56. if (conn !=null && !conn.isClosed()) {
  57. conn.close();
  58. }
  59. System.out.println("---------------- 关闭连接 -----------------");
  60. } catch (SQLException e) {
  61. System.out.println("---------------- 关闭连接失败 -----------------");
  62. e.printStackTrace();
  63. }
  64. }
  65. }
 /**
* 关闭连接对象
* @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 plain copy print ?
（4） 创建测试的类 Test.java
[java] view plain copy print ?
  1. package com.demo.test;
  3. import java.sql.Connection;
  4. import java.sql.SQLException;
  5. import java.util.ArrayList;
  6. import java.util.List;
  8. publicclass Testextends BaseDao {
  10. public List<Competence> getAllAuthorize() {
  11. List<Competence> authorizes = new ArrayList<Competence>();
  12. Connection conn = getConnection(); // 得到联接
  13. try {
  14. st = conn.prepareStatement("select * from authorize2 ");
  15. rs = st.executeQuery(); // 得到结果集
  16. while (rs.next()) {
  17. Competence authorize = new Competence();
  18. authorize.setId(rs.getInt("id"));
  19. authorize.setpId(rs.getInt("pid"));
  20. authorize.setOpen(rs.getInt("open"));
  21. authorize.setIsParent(rs.getInt("isParent"));
  22. authorize.setName(rs.getString("name"));
  23. // 添加到集合
  24. authorizes.add(authorize);
  25. }
  26. } catch (SQLException e) {
  27. System.out.println("---------------- 查询authorize失败 -----------------");
  28. e.printStackTrace();
  29. } finally {
  30. closeConnection(rs, st, conn);
  31. }
  32. return authorizes;
  33. }
  35. /**
  36. * 拼接成json类型
  37. * @return
  38. */
  39. public String getJSONData(){
  40. Test d = new Test();
  41. List<Competence> list=d.getAllAuthorize();
  42. StringBuffer json=new StringBuffer("[");
  43. String data="";
  44. for (int i =0; i < list.size(); i++) {
  45. json.append("{id:"+list.get(i).getId()+",");
  46. json.append("pId:"+list.get(i).getpId()+",");
  47. json.append("name:\""+list.get(i).getName()+"\",");
  48. if (list.get(i).getIsParent() !=0) {
  49. json.append("isParent:"+list.get(i).getIsParent()+",");
  50. }
  51. if (list.get(i).getOpen() !=0) {
  52. json.append("open:"+list.get(i).getOpen()+",");
  53. }
  54. data=json.substring(0,json.lastIndexOf(","))+"},";
  55. json=new StringBuffer(data);
  56. }
  57. data=json.substring(0, json.length()-1)+"]";
  58. System.out.println(data);
  59. return data;
  60. }
  61. publicstaticvoid main(String[] args) {
  62. Test demoTest=new Test();
  63. demoTest.getJSONData();
  64. }
  65. }
 

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

[html] view plain copy print ?
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4. <TITLE>zTree Demo</TITLE>
  5. <metahttp-equiv="content-type"content="text/html; charset=UTF-8">
  6. <linkrel="stylesheet"href="../css/demo.css"type="text/css">
  7. <!-- 必须文件 zTreeStyle.css、jquery.ztree.core-x.js、jquery-x.min.js -->
  8. <linkrel="stylesheet"href="../css/zTreeStyle/zTreeStyle.css"type="text/css">
  9. <scripttype="text/javascript"src="../js/jquery-1.4.4.min.js"></script>
  10. <scripttype="text/javascript"src="../js/jquery.ztree.core-3.5.js"></script>
  11. <scriptlanguage="JavaScript">
  12. var setting = {
  13. async : {
  14. enable : true, // 设置 zTree是否开启异步加载模式
  15. url : "asyncData/loadData2.jsp", // Ajax 获取数据的 URL 地址
  16. autoParam : [ "id" ] // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数zId=1
  17. },
  18. data:{ // 必须使用data
  19. simpleData : {
  20. enable : true,
  21. idKey : "id", // id编号命名 默认
  22. pIdKey : "pId", // 父id编号命名 默认
  23. rootPId : 0 // 用于修正根节点父节点数据，即 pIdKey 指定的属性值
  24. }
  25. },
  26. // 回调函数
  27. callback : {
  28. onClick : function(event, treeId, treeNode, clickFlag) {
  29. // 判断是否父节点
  30. if(!treeNode.isParent){
  31. alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
  32. }
  33. },
  34. //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数
  35. onAsyncError : zTreeOnAsyncError,
  36. onAsyncSuccess : function(event, treeId, treeNode, msg){
  38. }
  39. }
  40. };
  42. // 加载错误提示
  43. function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
  44. alert("加载错误：" + XMLHttpRequest);
  45. };
  47. // 过滤函数
  48. function filter(treeId, parentNode, childNodes) {
  49. if (!childNodes)
  50. return null;
  51. for ( var i =0,l =childNodes.length; i< l; i++) {
  52. childNodes[i].name =childNodes[i].name.replace(/\.n/g, '.');
  53. }
  54. return childNodes;
  55. }
  57. // 渲染
  58. $(document).ready(function() {
  59. $.fn.zTree.init($("#treeDemo"), setting);
  60. });
  61. </script>
  62. </HEAD>
  63. <BODY>
  64. <div>
  65. <ulid="treeDemo"class="ztree"></ul>
  66. </div>
  67. </BODY>
  68. </HTML>
 

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

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

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

[javascript] view plain copy print ?
  1. [{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代码
  1. <%@ page language="java" pageEncoding="UTF-8"%>   
  2. <%@taglib uri="/struts-tags" prefix="s"%>   
  3. <%@ include file="../common/header.jsp" %>   
  4.   
  5. <!DOCTYPE html>   
  6. <HTML>   
  7. <HEAD>   
  8.     <title>指派权限</title>   
  9.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  10.        
  11.     <link rel="stylesheet" type="text/css" href="${root}/css/dialogStyle.css"/>   
  12.     <link rel="stylesheet" href="${root}/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">   
  13.     <link rel="stylesheet" type="text/css" href="${root}/js/jquery/themes/icon.css" />   
  14.     <STYLE type="text/css">   
  15.         .btn {   
  16.             BACKGROUND: url(../images/bt_bg.gif);    
  17.             BORDER-RIGHT: #999999 1px solid;    
  18.             PADDING-RIGHT: 2px;    
  19.             BORDER-TOP: #CCCCCC 1px solid;    
  20.             PADDING-LEFT: 2px; FONT-SIZE: 12px;    
  21.             FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);    
  22.             BORDER-LEFT: #CCCCCC 1px solid;    
  23.             CURSOR: hand; COLOR: black;    
  24.             PADDING-TOP: 2px;    
  25.             BORDER-BOTTOM: #999999 1px solid;   
  26.         }   
  27.     </STYLE>   
  28.        
  29.     <!--    
  30.     为提高效率，建议将1.4.4换成1.6.4版   
  31.     <script type="text/javascript" src="${root}/js/zTree/js/jquery-1.4.4.min.js"></script>   
  32.      -->   
  33.     <script type="text/javascript" src="${root}/js/jquery/jquery-1.6.4.min.js"></script>   
  34.     <script type="text/javascript" src="${root}/js/jquery/jquery.easyui.min.js"></script>   
  35.     <script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.core-3.0.js"></script>   
  36.     <script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.excheck-3.0.js"></script>   
  37.     <script type="text/javascript" src="${root}/js/winutil.js"></script>   
  38.   
  39.     <!--   
  40.     <script type="text/javascript" src="${root}/js/js/jquery.ztree.exedit-3.0.js"></script>   
  41.     -->   
  42.     <SCRIPT type="text/javascript">   
  43.         <!--   
  44.         var setting = {   
  45.             async: {   
  46.                 enable: true,//异步处理   
  47.   
  48.                 //contentType: "application/json",//提交参数方式，这里 JSON 格式，默认form格式   
  49.                    
  50.                 url: '${root}/sys/listoper.action?roleId=${roleId}',//异步获取json格式数据的路径   
  51.   
  52.                 autoParam: ["id","name"]//异步加载时需要提交的参数，多个用逗号分隔   
  53.                                
  54.             },   
  55.             callback: {//回调函数，在这里可做一些回调处理   
  56.                 //beforeAsync: zTreeBeforeAsync   
  57.             },   
  58.             check: {//设置 zTree 的节点上是否显示 checkbox / radio ,默认为false   
  59.                 enable: true   
  60.             },   
  61.             data: {   
  62.                 simpleData: {   
  63.                     /**   
  64.                     如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId   
  65.                     并且让数据满足父子关系。*/                     
  66.                     enable: true,//true / false 分别表示 使用 / 不使用 简单数据模式   
  67.                     idKey: "id",   
  68.                     pIdKey: "pId",   
  69.                     rootPId: 0                             
  70.                 }   
  71.             }   
  72.         };   
  73.   
  74.         var zNodes =[];//树节点，json格式，异步加载可设置为null或[]    
  75.         var zTreeObj;//树对象   
  76.         
  77.         $(document).ready(function(){   
  78.                
  79.             zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);//实例化后直接返回树对象   
  80.   
  81.             //异步提交表单   
  82.             $('#permissionform').form({   
  83.                 url: '${root}/sys/PermissionManagerole.action',   
  84.                 onSubmit: function() {   
  85.                     //获取树对象中选中的节点   
  86.                     var nodes = zTreeObj.getCheckedNodes();   
  87.                     var s = '';//选中节点ids   
  88.                     //遍历选中的节点，为s赋值   
  89.                     for(var i=0; i<nodes.length; i++){   
  90.                         if (s != '') s += ',';   
  91.                         s += nodes[i].id;   
  92.                     }   
  93.                     document.all("roledto.permissionIds").value = s;   
  94.                 },   
  95.                 success: function(data) {   
  96.                     //操作成功，返回信息   
  97.                     var data = jQuery.parseJSON(data);   
  98.                     if(data.success == false){   
  99.                         alert(data.msg);   
  100.                     }   
  101.                     m_close();     
  102.                 }   
  103.             });   
  104.                
  105.         });   
  106.   
  107.         //-->   
  108.     </SCRIPT>   
  109. </HEAD>   
  110.   
  111. <BODY οnunlοad="m_close()" style="background-color: #f7f7f7;">    
  112.     <div style="border: 0px ;width: 100%;height:100%;background-color: #f7f7f7;">   
  113.        
  114.         <!-- 树加载后存放的容器 -->   
  115.         <ul id="permission_tree" class="ztree" style="border: 0px; background-color: #f7f7f7;"></ul>   
  116.            
  117.         <!-- 提交授权操作表单 -->    
  118.         <form id="permissionform" method="post">   
  119.             <table>   
  120.                 <tr>   
  121.                     <td><input type="hidden" name="roledto.permissionIds" /></td>   
  122.                     <td><input type="hidden" name="roledto.roleId" value="${roleId}"/></td>   
  123.                     <td><input type="hidden" name="orgid" value="${orgId}"/></td>   
  124.                 </tr>   
  125.                 <tr>   
  126.                     <td width="100%" align="right">   
  127.                         <input type="submit" style="width:60px;" class="btn" value="保存"/>&nbsp;   
  128.                         <input type="button"  style="width:60px;"  class="btn" value="取消" οnclick="m_close()"/>   
  129.                     </td>   
  130.                 </tr>   
  131.             </table>   
  132.         </form>   
  133.                                                
  134.     </div>   
  135.   
  136. </BODY>   
  137. </HTML>  
<span style="font-size:12px;"></span> 

三．后台Action

Java代码
  1. private String id;   
  2.        
  3.     private String roleId;   
  4.        
  5.     /**  
  6.      * 显示权限栏目树  
  7.      * 这里采用一次加载所有树节点的方式  
  8.      * 当然也可以换成逐级动态加载的方式  
  9.      * @return  
  10.      * @throws IOException  
  11.      */  
  12.     @SuppressWarnings("unchecked")   
  13.     public String list() throws IOException{   
  14.            
  15.         /**  
  16.          * 再次查询时直接返回，这里采用所有节点一次加载的方式  
  17.          * @param id 点击树的节点时传递到后台的属性id  
  18.          */  
  19.         if(ValidateUtil.validateString(id)){   
  20.             return SUCCESS;   
  21.         }   
  22.         //根据角色找到对应的操作权限id   
  23.         String operationids = this.getOperationIdsByRoleId(roleId);   
  24.         //查询所有的权限分类，如系统管理、订单管理、采购管理等等，作为树的一级节点   
  25.         List<OperationClass> list =operationClassServiceImpl.getAllOperationClass();   
  26.         //存放树节点信息   
  27.         List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();   
  28.         //当前角色对应的操作   
  29.         List<RoleOperation> rolist = this.roleServiceImpl.getRoleOperationByRoleId(roleId);   
  30.            
  31.         for(OperationClass node: list){   //第一级遍历，遍历所有的权限分类  
  32.                
  33.             Map<String,Object> item = new HashMap<String,Object>();   //最外层，父节点           
  34.             item.put("id", node.getOperationClassId());//id属性  ，数据传递  
  35.             item.put("name", node.getClassName()); //name属性，显示节点名称  
  36.             item.put("isParent", true);//设置为父节点，这样所有最外层节点都是统一的图标，看起来会舒服些  
  37.             //item.put("iconSkin", "diy02");//设置节点的图标皮肤， diy02在zTreeStyle.css中进行设置  
  38.                
  39.             /**  
  40.              * 如果当前节点（权限分类）有对应的操作（权限），添加操作权限作为该节点的子节点 
  41.              */  
  42.             if (node.getOperations()!=null&&node.getOperations().size()>0){      
  43.                   
  44.                 Iterator<Operation> it = node.getOperations().iterator();   
  45.                 //存放第一层子节点信息   
  46.                 List<Map<String,Object>> subitems = new ArrayList<Map<String,Object>>();   
  47.                    
  48.                 while(it.hasNext()){//对操作进行遍历  
  49.                        
  50.                     Map<String,Object> subitem = new HashMap<String,Object>();//第二层  
  51.                     Operation oper = (Operation) it.next();   
  52.                     subitem.put("id", oper.getOperationId()+":oper");//id属性  ，数据传递  
  53.                     subitem.put("name", oper.getOperationName()); //name属性，显示节点名称  
  54.                        
  55.                     /**  
  56.                      * 如果操作中有多个选项，添加选项作为第二层的子节点  
  57.                      */  
  58.                     if(oper!=null&&oper.getOptions()!=null){   
  59.                         String uoption = "";//有操作权限的操作选项  
  60.                         for(RoleOperation ro : rolist){   
  61.                             if(ro.getOperation().getOperationId().   
  62.                                 equals(oper.getOperationId())){//如果当前角色有对应的操作  
  63.                                 uoption = ro.getOptions();   
  64.                             }   
  65.                         }   
  66.                         String[] suboper = oper.getOptions().split(",");   
  67.                         List<Map<String,Object>> items3 = new ArrayList<Map<String,Object>>(); //第三层  
  68.                         for(int i=0;i<suboper.length;i++){   
  69.                             Map<String,Object> item3 = new HashMap<String,Object>();   
  70.                             item3.put("id", "opt:"+oper.getOperationId()+":"+suboper[i]);//id属性  ，数据传递  
  71.                             item3.put("name", suboper[i]); //name属性，显示节点名称  
  72.   
  73.                             if(uoption!=null&&!"".equals(uoption)){//如果操作中有操作选项  
  74.                                 if(uoption.contains(suboper[i]+",")){//如果当前角色有此操作选项  
  75.                                     item3.put("checked", true);//将此选项选中  
  76.                                 }   
  77.                             }   
  78.                             items3.add(item3);//添加到树的第三层  
  79.                         }     
  80.                         subitem.put("children", items3);//添加第二层子节点  
  81.                            
  82.                     }else{//如果操作没有选项  
  83.                         if(operationids.contains(oper.getOperationId())){//当前角色有此操作  
  84.                             subitem.put("checked", true);//将此操作选中  
  85.                         }   
  86.                     }   
  87.                     subitems.add(subitem);//添加到树的第二层  
  88.                 }   
  89.                 item.put("children", subitems);//添加第一层子节点  
  90.                    
  91.             }     
  92.             items.add(item); //添加到树的第一层     
  93.                
  94.         }   
  95.         JSONArray json = JSONArray.fromObject(items);//转成json格式  
  96.         jsonString = json.toString();//json格式字符串   
  97.            
  98.         return SUCCESS;   
  99.     }  

 

 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}}这个标签一看就知道是做循环用的了，用法如下：

< ul id = "eachList" >
</ ul >
<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}},包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器，示例:

< div id = "wrapDemo" >
</ div >
<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

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值