JS模板引擎-laytpl模板引擎使用实例2-表格树

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

使用效果图

使用laytpl模板引擎进行动态渲染，并使用表格树控件

使用实例代码

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>
<!-- layertpl -->
<script src="${ctxStatic}/laytpl-v1.1/laytpl/laytpl.js" type="text/javascript"></script>
<!-- 业务js -->
<script src="${ctx}/views/admin/logistics/logisticsAreaList.js" type="text/javascript"></script>
</head>
<body>
	<section class="panel">
		<div class="panel-body">		 				 
			<!-- Table开始 -->
			<table id="treeTable" class="table table-hover table-condensed table-bordered">
				<thead> 
					<tr>
					<th>地区名称</th>
					<th>地区ID</th>
					<th>所属大区</th>
					<th>上级地区</th>
					<th>操作管理</th>
				</tr>
				</thead> 
			<tbody id="treeTableList"></tbody>
			</table>
			<script type="text/template" id="treeTableTpl">
				<tr id="{{d.row.id}}" pId="{{d.pid}}">
					<td width="20%" style="text-align:left">{{d.row.name}}</td> 
					<td>{{d.row.id}}</td> 
					<td>{{d.dict.largeArea || ''}}</td> 
					<td>{{d.row.parentId}}</td>
					<td>
						<shiro:hasPermission name="sys:area:edit">
						<a type="button" class="btn btn-info btn-sm" href="${ctxa}/sys/area/form.do?id={{d.row.id}}">
							<i class="fa fa-edit"></i> 编辑
						</a>
						<a type="button" class="btn btn-info btn-sm" href="${ctxa}/sys/area/form.do?parent.id={{d.row.id}}">
							<i class="fa fa-level-down"></i> 添加下级地区
						</a>
						</shiro:hasPermission>
						<shiro:hasPermission name="sys:area:drop">
						<button type="button" href="${ctxa}/sys/area/delete.do?id={{d.row.id}}" class="btn btn-danger btn-sm deleteSure">
							<i class="fa fa-trash-o"></i> 删除
						</button>
						</shiro:hasPermission>
					</td> 
				</tr>
			</script>
			<!-- table结束 -->
		</div>
	</section>
	<script type="text/javascript">
		var jsonData = ${fns:toJson(list)};//list数据
		var largeArea=${fns:toJson(fns:getDictList('large_area'))};//字典list数据
	</script>
</body>
</html>

2.logisticsAreaList.js

//jsonData是从库中查出来的数据，可使用<%--${fns:toJson(list)}--%>工具来转换
$(document).ready(function() {
	//列表中删除按钮的弹框
	$("#treeTable").delegate(".deleteSure","click",function(){
		var href=$(this).attr("href");
		fdp.confirm('确定要删除么？',href); 
	});
});

$(document).ready(function() {	
	//表格树
	var tpl = $("#treeTableTpl").html();//模板
	var data = jsonData;//jsonData是从库中查出来的数据
	var ids = [];
	var rootIds = [];//一级分类的ID集合
	for (var i=0; i<data.length; i++){
		ids.push(data[i].id);
	}
	ids = ',' + ids.join(',') + ',';
	for (var i=0; i<data.length; i++){
		if (ids.indexOf(','+data[i].parentId+',') == -1){
			if ((','+rootIds.join(',')+',').indexOf(','+data[i].parentId+',') == -1){
				rootIds.push(data[i].parentId);
			}
		}
	}
	
	var htmlArr=new Array();//存储生成的html
	for (var i=0; i<rootIds.length; i++){
		addRow(htmlArr, tpl, data, rootIds[i], true);
	}
	$("#treeTableList").append(htmlArr.join());
	$("#treeTable").treeTable({expandLevel : 5});//展开层级
});
function addRow(htmlArr, tpl, data, pid, root){
	for (var i=0; i<data.length; i++){
		var row = data[i];
		var la=row.largeArea;
		var ll=(!row?'':!row.parentId?'':row.parentId) == pid;
		if ((!row?'':!row.parentId?'':row.parentId) == pid){
			var dd={
					dict: {largeArea:fdp.getDictLabel(largeArea,parseInt(row.largeArea))}, 
					pid: (root?0:pid), 
					row: row,
				}
				laytpl(tpl).render(dd, function(html){
					htmlArr.push(html);
				});
				addRow(htmlArr, tpl, data, row.id);
		}
	}
}