JS模板引擎-Mustache模板引擎使用实例1-表格树

最新推荐文章于 2024-08-09 07:59:22 发布

cl11992

最新推荐文章于 2024-08-09 07:59:22 发布

阅读量1k

点赞数 1

分类专栏：模板引擎文章标签：模板引擎实例控件 Mustache

本文链接：https://blog.csdn.net/cl11992/article/details/77052471

版权

模板引擎专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用效果图

使用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, data, 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);
			}
		}
	}