JQUERY树型插件ZTREE小例子
一个做.NET WEB开发的朋友介绍了ZTREE，它是基于JQUERY库开发的树型控件。于是去官方下了一个开发包，看了看DEMO，觉得效果很不错，自己也做了个小例子，也许不太成形，效果倒是展现出来了，把使用方法记录下来，和大家分享分享。
1、新建了一个HTML在<head>标签内导入需要的JS和CSS文件。
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>部分就直接贴代码了
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
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. zTreeDemo
65. });
66. </script>
3、body部分，就一个
1. <ul id="cityTree" class="ztree"></ul>
4、当异步获取数据库的数据时，我们需要修改setting设置，也是返回的数组形式的数据：
1. var
2. async: {
3. true,
4. 'post',
5. "treedata.jsp"
6. ///dataFilter: filter
7. },
8. data: {
9. //简单的数据源，一般开发中都是从数据库里读取，API有介绍，这里只是本地的
10. true,
11. "id", //id和pid，这里不用多说了吧，树的目录级别
12. "pId",
13. //根节点
14. }
15. },
16. callback: {
17. /**回调函数的设置，异步提交成功的回调函数**/
18. }
19. };
20.
21. $(document).ready(function(){//初始化ztree对象
22. "#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
1. publicclass
2. privateint id;// 编号
3. privateint pId;// 父节点
4. privateint isParent;// 是否父节点
5. private String name;// 节点名称
6. privateint open;// 是否打开
1. // 此处省略 get,set方法
- ｝
<span style="color:#ff0000;"><strong>（3）创建BaseDao.java联接数据库</strong></span>
1. package
2.
3. import
4. import
5. import
6. import
7. import
8. import
9.
10. /**
11. * 连接数据源
12. * @author 小奎
13. */
14. publicclass
15. static Connection conn;// 创建联接
16. PreparedStatement st; // 预执行类
17. ResultSet rs; // 结果集
18.
19. /**
20. * 得到连接
21. * @return connnection
22. */
23. publicstatic
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
32. System.out.println("---------------- 连接失败 -----------------");
33. e.printStackTrace();
34. }
35. } catch
36. System.out.println("---------------- 驱动加载失败 -----------------");
37. e.printStackTrace();
38. }
39. return
40. }
41.
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
57. conn.close();
58. }
59. System.out.println("---------------- 关闭连接 -----------------");
60. } catch
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();
}
}
}
（4） 创建测试的类 Test.java
1. package
2.
3. import
4. import
5. import
6. import
7.
8. publicclass Testextends
9.
10. public
11. List<Competence> authorizes = new
12. Connection conn = getConnection(); // 得到联接
13. try
14. st = conn.prepareStatement("select * from authorize2 ");
15. rs = st.executeQuery(); // 得到结果集
16. while
17. Competence authorize = new
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
27. System.out.println("---------------- 查询authorize失败 -----------------");
28. e.printStackTrace();
29. } finally
30. closeConnection(rs, st, conn);
31. }
32. return
33. }
34.
35. /**
36. * 拼接成json类型
37. * @return
38. */
39. public
40. Test d = new
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
56. }
57. data=json.substring(0, json.length()-1)+"]";
58. System.out.println(data);
59. return
60. }
61. publicstaticvoid
62. Test demoTest=new
63. demoTest.getJSONData();
64. }
65. }
（4） 创建加载zTree 树的html或jsp页面 asyncLoad.html
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){
37.
38. }
39. }
40. };
41.
42. // 加载错误提示
43. function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
44. alert("加载错误：" + XMLHttpRequest);
45. };
46.
47. // 过滤函数
48. function filter(treeId, parentNode, childNodes) {
49. if (!childNodes)
50. return null;
51. for ( var i =0,l =childNodes.length; i<
52. childNodes[i].name =childNodes[i].name.replace(/\.n/g, '.');
53. }
54. return childNodes;
55. }
56.
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
1. <%@ pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
2. <%@ pageimport="com.demo.test.*" %>
3.
4. <%
5. String id =request.getParameter("id"); // 父节点编号
6. System.out.print("得到的节点id："+id);
7. Test demo=new
8. String json=demo.getJSONData();
9. out.print(json);
10. %>
注：json数据最终会被拼接成array的形式，如下结果：雷同即可显示
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. "content-type" content="text/html; charset=UTF-8">
10.
11. "stylesheet" type="text/css" href="${root}/css/dialogStyle.css"/>
12. "stylesheet" href="${root}/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
13. "stylesheet" type="text/css" href="${root}/js/jquery/themes/icon.css"
14. "text/css">
15. .btn {
16. BACKGROUND: url(../images/bt_bg.gif);
17. 999999
18. PADDING-RIGHT: 2px;
19. BORDER-TOP: #CCCCCC 1px solid;
20. PADDING-LEFT: 2px; FONT-SIZE: 12px;
21. 0, StartColorStr=#ffffff, EndColorStr=#cecfde);
22. BORDER-LEFT: #CCCCCC 1px solid;
23. CURSOR: hand; COLOR: black;
24. PADDING-TOP: 2px;
25. 999999
26. }
27. </STYLE>
28.
29. <!--
30. 1.4.4换成1.6.4版
31. "text/javascript" src="${root}/js/zTree/js/jquery-1.4.4.min.js"></script>
32. -->
33. "text/javascript" src="${root}/js/jquery/jquery-1.6.4.min.js"></script>
34. "text/javascript" src="${root}/js/jquery/jquery.easyui.min.js"></script>
35. "text/javascript" src="${root}/js/zTree/js/jquery.ztree.core-3.0.js"></script>
36. "text/javascript" src="${root}/js/zTree/js/jquery.ztree.excheck-3.0.js"></script>
37. "text/javascript" src="${root}/js/winutil.js"></script>
38.
39. <!--
40. "text/javascript" src="${root}/js/js/jquery.ztree.exedit-3.0.js"></script>
41. -->
42. "text/javascript">
43. <!--
44. var setting = {
45. async: {
46. enable: true,//异步处理
47.
48. "application/json",//提交参数方式，这里 JSON 格式，默认form格式
49.
50. '${root}/sys/listoper.action?roleId=${roleId}',//异步获取json格式数据的路径
51.
52. "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. "id",
68. "pId",
69. 0
70. }
71. }
72. };
73.
74. var zNodes =[];//树节点，json格式，异步加载可设置为null或[]
75. var zTreeObj;//树对象
76.
77. $(document).ready(function(){
78.
79. "#permission_tree"), setting, zNodes);//实例化后直接返回树对象
80.
81. //异步提交表单
82. '#permissionform').form({
83. '${root}/sys/PermissionManagerole.action',
84. onSubmit: function() {
85. //获取树对象中选中的节点
86. var nodes = zTreeObj.getCheckedNodes();
87. '';//选中节点ids
88. //遍历选中的节点，为s赋值
89. 0; i<nodes.length; i++){
90. '') s += ',';
91. s += nodes[i].id;
92. }
93. "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. "border: 0px ;width: 100%;height:100%;background-color: #f7f7f7;">
113.
114. <!-- 树加载后存放的容器 -->
115. "permission_tree" class="ztree" style="border: 0px; background-color: #f7f7f7;"></ul>
116.
117. <!-- 提交授权操作表单 -->
118. "permissionform" method="post">
119. <table>
120. <tr>
121. "hidden" name="roledto.permissionIds"
122. "hidden" name="roledto.roleId" value="${roleId}"/></td>
123. "hidden" name="orgid" value="${orgId}"/></td>
124. </tr>
125. <tr>
126. "100%" align="right">
127. "submit" style="width:60px;" class="btn" value="保存"/>
128. "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代码
- 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>(); //最外层，父节点
- "id", node.getOperationClassId());//id属性 ，数据传递
- "name", node.getClassName()); //name属性，显示节点名称
- "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();
- "id", oper.getOperationId()+":oper");//id属性 ，数据传递
- "name", oper.getOperationName()); //name属性，显示节点名称
- /**
- * 如果操作中有多个选项，添加选项作为第二层的子节点
- */
- if(oper!=null&&oper.getOptions()!=null){
- "";//有操作权限的操作选项
- for(RoleOperation ro : rolist){
- if(ro.getOperation().getOperationId().
- //如果当前角色有对应的操作
- uoption = ro.getOptions();
- }
- }
- ",");
- 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>();
- "id", "opt:"+oper.getOperationId()+":"+suboper[i]);//id属性 ，数据传递
- "name", suboper[i]); //name属性，显示节点名称
- if(uoption!=null&&!"".equals(uoption)){//如果操作中有操作选项
- if(uoption.contains(suboper[i]+",")){//如果当前角色有此操作选项
- "checked", true);//将此选项选中
- }
- }
- //添加到树的第三层
- }
- "children", items3);//添加第二层子节点
- }else{//如果操作没有选项
- if(operationids.contains(oper.getOperationId())){//当前角色有此操作
- "checked", true);//将此操作选中
- }
- }
- //添加到树的第二层
- }
- "children", subitems);//添加第一层子节点
- }
- //添加到树的第一层
- }
- //转成json格式
- //json格式字符串
- return SUCCESS;
- }
jQuery .tmpl(), .template()学习
有趣的jQuery插件.tmpl()，其文档在这里。
官方解释对该插件的说明：将匹配的第一个元素作为模板，render指定的数据，签名如下:
|
其中参数data的用途很明显：用于render的数据，可以是任意js类型，包括数组和对象。options一般情况下都是选项了，官方指出，此处的options是一个用户自定义的键值对的map，继承自tmplItem数据结构，适用于模板render动作期间。
在这里可以下载到最新的tmpl插件，值的一提的是，官方同时也说明了，tmpl目前是beta版，使用需谨慎..
好吧，先来一个最直观的例子：
|
例子虽然很小也很简单，但我觉得这个已经很有用了。
当然，.tmpl()还可以使用来自远端的数据，比如说服务:
|
这是一个MVC的Action，我把它当做是一个提供数据的服务，然后js代码如下:
|
效果:
定义模板时，推荐的方式为定义使用
|
做为模板的包装器，但定义方式并不只有这一种，你可以使用
|
的方式来定义，但是官方文档中说，这种方法可能会产生浏览器无法解析的HTML，因此不推荐使用，不过我试了下，倒没有出什么意外：
|
|
效果:
编译缓存模板，在jQuery .tmpl()中，还可以将模板事先编译并缓存起来，然后在合适的时侯再使用，这对于一些数据嵌套是很有用的，如:
|
|
效果:
$.template()方法，将一段Html编译为模板，示例:
|
这样就可以将markup中定义的模板应用于templateRows对象。
jQuery .tmpl()的标签，表达式，属性：
${}:从前面的例子来看，这个标签的作用很明显了，相当于是占位符，但是它还有另一种写法{{= field}}如:
|
必须要注意的是，"="号后必须跟一个空格，不然是没有效果的。
另外，${}中还可以放表达式，这个牛x吧，如:
|
|
效果：
jQuery .tmpl()有两个比较有用的属性:$item、$data:
$item代表当前的模板；$data代表当前的数据。
|
|
效果:
{{each}}这个标签一看就知道是做循环用的了，用法如下：
|
|
效果:
{{each}}还有另一种写法:
|
作用和前一种是一样的。
{{if}}和{{else}}，这两个标签应该一看就知道作用了，直接上示例:
|
如果Langs数组元素超过1个，则用'; '连接起来，否则就直接显示Langs，效果:
{{html}}，直接将对象属性值作为HTML代码替换占位符：
|
效果:
{{tmpl}}，前面已经提过该标签了，这里再给一个使用参数的例子:
|
效果:
{{wrap}},包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器，示例:
|
|
效果:
$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item，示例:
|
效果:
源代码下载
https://github.com/jquery/jquery-tmpl
