前端
<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;
}