Mustache模板引擎使用实例1-表格树
2017-08-10 15:17
741 查看
使用效果图
使用Mustache模板引擎进行动态渲染,并使用表格树控件
使用实例代码
1.jsp代码<!DOCTYPE html> <html lang="zh-CN"> <head> <title>地区管理</title> <!-- 表格树控件 --> <link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" /> <script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script> <!-- Mustache --> <script src="${ctxStatic}/common/mustache.min.js" type="text/javascript"></script> <!-- 业务js --> <script src="${ctx}/views/admin/logistics/logisticsAreaList.js" type="text/javascript"></script> </head> <body> <table id="treeTable" class="table table-striped table-bordered table-condensed"> <thead><tr><th>区域名称</th><th>区域编码</th><th>区域类型</th><th>备注</th><shiro:hasPermission name="sys:area:edit"><th>操作</th></shiro:hasPermission></tr></thead> <tbody id="treeTableList"></tbody> </table> <script type="text/template" id="treeTableTpl"> <tr id="{{row.id}}" pId="{{pid}}"> <td><a href="${ctxa}/sys/area/form.do?id={{row.id}}">{{row.name}}</a></td> <td>{{row.code}}</td> <td>{{dict.type}}</td> <td>{{row.remarks}}</td> <shiro:hasPermission name="sys:area:edit"><td> <a href="${ctxa}/sys/area/form.do?id={{row.id}}">修改</a> <a href="${ctxa}/sys/area/delete.do?id={{row.id}}" onclick="return confirmx('要删除该区域及所有子区域项吗?', this.href)">删除</a> <a href="${ctxa}/sys/area/form.do?parent.id={{row.id}}">添加下级区域</a> </td></shiro:hasPermission> </tr> </script> </body> </html>2.logisticsAreaList.js
$(document).ready(function() { var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,""); var data = ${fns:toJson(list)}, rootId = "0"; addRow("#treeTableList", tpl, da 4000 ta, rootId, true); $("#treeTable").treeTable({expandLevel : 5}); }); function addRow(list, tpl, data, pid, root){ for (var i=0; i<data.length; i++){ var row = data[i]; if ((${fns:jsGetVal('row.parentId')}) == pid){ $(list).append(Mustache.render(tpl, { dict: { type: getDictLabel(${fns:toJson(fns:getDictList('sys_area_type'))}, row.type) }, pid: (root?0:pid), row: row })); addRow(list, tpl, data, row.id); } } }
相关文章推荐
- CodeIgniter模板引擎使用实例
- CodeIgniter模板引擎使用实例
- 探究Javascript模板引擎mustache.js使用方法
- 使用Lua编写Web端模板引擎的实例代码分享
- 在javascriptl中使用表格模板引擎template.js简化开发
- Mustache.js模板引擎使用
- JAVA velocity模板引擎使用实例
- require.js及模板引擎的使用实例
- JAVA velocity模板引擎使用实例
- 探究Javascript模板引擎mustache.js使用方法
- iOS中使用模板引擎渲染HTML界面
- JS模板引擎Ejs的简单使用介绍
- VTemplate模板引擎的使用 - MasterPage篇
- Smarty是一个使用PHP写出来的模板引擎
- iOS:使用模板引擎渲染HTML界面
- apache模板引擎结合spring框架的简单使用(org.apache.velocity)
- 从模板引擎到模板引擎-使用aspx页面作为模板引擎的一种实现
- Node.js开发入门(六)——使用jade模板引擎
- 一个前端攻城狮的全栈之路第四弹:jade模板引擎的简单介绍和使用
- Java8新JavaScript引擎nashorn使用实例