treetable 3.2.0

前端

<table id="example-basic" class="table table-bordered table-advance">
	<thead>
	<tr>
		<th>名称</th>
		<th class="hidden-xs">资源地址</th>
		<th>类型</th>
		<th>序号</th>
		<th>操作</th>
	</tr>
	</thead>
	<tbody>
	@for(item in list){
	<tr data-tt-id="${item.id!}" data-tt-branch='${item.isCNode!}'>
		<td>${item.name!}</td>
		<td>${item.url!}</td>
		<td>
			@if(item.type! == 1){
				功能
			@}else{
				权限
			@}
		</td>
		<td>${item.seq!}</td>
		<td style="width:220px;">
			<button type="button" class="btn btn-success edit" data-id="${item.id!}" style="width:50px;">编辑</button>
			@if(item.enabled! == 1){
				<button type="button" class="btn btn-info enabled" data-id="${item.id!}" data-enabled="${item.type!}"  style="width:50px;">禁用</button>
			@}else{
				<button type="button" class="btn btn-default enabled" data-id="${item.id!}" data-enabled="${item.type!}"  style="width:50">启用</button>
			@}
			<button type="button" class="btn btn-danger delete" data-id="${item.id!}" style="width:50px;">删除</button>
		</td>
	</tr>
	@}
	</tbody>
</table>

<link href="${ctxPath}/static/assets/treeTable/stylesheets/jquery.treetable.css"  rel="stylesheet"/>
<link href="${ctxPath}/static/assets/treeTable/stylesheets/jquery.treetable.theme.default.css"  rel="stylesheet"/>
<script src="${ctxPath}/static/assets/treeTable/javascripts/src/jquery.treetable.js"></script>
<script>
$("#example-basic").treetable({
	expandable:     true,
	onNodeExpand:   nodeExpand,
	onNodeCollapse: nodeCollapse
});

//$("#example-basic").treetable("reveal", '1');     默认打开第一个
$("#example-basic").treetable();


$("#example-basic tbody").on("mousedown", "tr", function() {
	$(".selected").not(this).removeClass("selected");
	$(this).toggleClass("selected");
});


function nodeExpand () {
	getNodeViaAjax(this.id);
}




function nodeCollapse () {
	// alert("Collapsed: " + this.id);
}


function getNodeViaAjax(parentNodeID) {
	var pid = "";
	if(parentNodeID.toString().indexOf(".") != -1){
		var pnID = parentNodeID.toString().split(".");
		pid = pnID[pnID.length-1];
	}else{
		pid = parentNodeID;
	}
	$.ajax({
		type: 'POST',
		url: '${ctxPath}/sys/res/getTreeGridView?pid='+pid,
		success: function(data) {
			var childNodes = data.data;
			if(childNodes) {
				var parentNode = $("#example-basic").treetable("node", parentNodeID);   //展开的列

				for (var i = 0; i < childNodes.length; i++) {
					var node = childNodes[i];
					var nodeToAdd = $("#example-basic").treetable("node",parentNodeID+"."+node.id);

					// check if node already exists. If not add row to parent node
					if(!nodeToAdd) {
						// create row to add
						var row ='<tr data-tt-id="' +
							parentNodeID+"."+node.id +
							'" data-tt-parent-id="' +
							parentNodeID + '" ';
						if(node.isCNode == true) {
							row += ' data-tt-branch="true" ';
						}

						row += ' >';

						// 增加列
						var type="";
						var enabled="";
						node.type == '1'?type = "功能 ":type = "权限"
						if(node.enabled == 1){
							enabled = '<button type="button" class="btn btn-info enabled" data-id="'+node.id+'" data-enabled="'+node.enabled+'" style="width:50px;">禁用</button>'
						}else{
							enabled = '<button type="button" class="btn btn-default enabled" data-id="'+node.id+'" data-enabled="'+node.enabled+'" style="width:50">启用</button>'
						}


						row += "<td>" + node.name + "</td><td>" + node.url + "</td>";
						row += "<td>" + type + "</td><td>" + node.seq + "</td>";
						row += "<td><button type='button' class='btn btn-success edit' data-id='"+node.id+"' style='width:50px;'>编辑</button>"+enabled+
								'<button type="button" class="btn btn-danger delete" data-id="'+node.id+'"  style="width:50px;">删除</button>'+
							   "</td>";


						// End row
						row +="</tr>";
						$("#example-basic").treetable("loadBranch", parentNode, row);
					}
				}
			}
		},
		error:function(error){
			$("#loadingImage").hide();
			alert('there was an error');
		},
		dataType: 'json'
	});
}
</script>

java后台代码

//第一次进来页面

public void index() {

	setAttr("list",SysRes.me.getDpid(0));
	render("list.html");
}

//点击列表返回数据

public void getTreeGridView(){
	this.renderJson("data",SysRes.me.getDpid(getParaToInt("pid")));
}

public List<Map<String,Object>> getDpid(int i){
	List<Map<String,Object>> str = new ArrayList<>();
	List<SysRes> res = null;
	if (i == 0){
		res = SysRes.me.find("select * from  sys_res where isnull(pid)");
	}else{
		res = SysRes.me.find("select * from  sys_res where pid = ?",i);
	}

	for (SysRes item:res){
		boolean isCNode = false;
		Map<String,Object> resMap=new HashMap<String,Object>();

		List<SysRes> models = SysRes.me.find("select * from  sys_res where pid = ?",item.getId());
		if (models.size() > 0){
		   isCNode =true;
		}else{
		   isCNode =false;
		}
		resMap.put("id",item.getInt("id"));        //id
		resMap.put("name",item.getStr("name"));    //角色名称
		resMap.put("url",item.getStr("url"));      //资源地址
		resMap.put("type",item.getInt("type"));    //类型
		resMap.put("enabled",item.getInt("enabled"));      //是否禁用 1启用  0禁用
		resMap.put("seq",item.getInt("seq"));      //序号
		resMap.put("isCNode",isCNode);      //是否有子节点cNode
		str.add(resMap);
	}
	return str;
}

表结构