ztree的一些操作，不废话，上代码

最新推荐文章于 2018-09-20 16:43:44 发布

xiaosongwahaha

最新推荐文章于 2018-09-20 16:43:44 发布

阅读量302

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiaosongwahaha/article/details/78866347

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

ztree的操作简单使用，比bootstrap中的树更简单明了，故分享

1、index.ftl菜单界面：

2、操作按钮：加载树，查看树，更改树，删除树按钮：

<div id="tableList">
<button style="width:150px" class="btn btn-success" οnclick="urlAdd()">添加角色</button>

<table class="table table-bordered table-striped table-hover" id="rgtable1" style="color:#444444">
<thead>
<tr>
<th>角色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<#list urlBeanList as urlBean>
<tr class="odd">
<td><#if urlBean.urlType?exists>${urlBean.urlType}<#else>无</#if></td>
<td>
<button class="btn btn-success"
οnclick="urlLookUp('${urlBean.urlType}')"><span><span>查看</span></span>
</button>
<button class="btn btn-success"
οnclick="urlUpdate('${urlBean.urlType}')"><span><span>修改</span></span>
</button>
<button class="btn btn-danger" οnclick="urlDelete('${urlBean.urlType}')">
<span><span>删除</span></span></button>
</td>
</tr>
</#list>
</tbody>
</table>

<div class="pageNu" align="right">
总共 ${pages?c} 页|第 ${currentPage?c} 页
<a style='cursor:pointer;' οnclick=lastPage()>上一页</a>
<a style='cursor:pointer;' οnclick=nextPage()>下一页</a>
转至<input type="text" name="pageNum" id="pageNum" value="1" size="5"/>
<button class="btn btn-success" οnclick="goPageByNum()"><span><span>Go</span></span></button>

<input type="text" id="currentPage" style="display:none;" value="${currentPage?c}"/>
<input type="text" id="pages" style="display:none;" value="${pages?c}"/>
</div>

</div>


<div id="addDialog" style="display:none;">
<table style="text-align: center;margin-top:20px;">
<tr>
<th>  角色名称：</th>
<td><input class="form-control" name="urlType" id="urlType" placeholder="例如：角色一"
style="width:250px"/></td>
</tr>
<tr>
<th>  角色权限关联：</th>
<td>
<ul id="treeDemo" class="ztree"></ul>
</td>
</tr>

</table>
</div>

3、加载树：

function initZtree(zNodes){

var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setCheck();
}

/*权限列表*/
function urlAdd() {
var zNodes = initZNodes();
initZtree(zNodes);
}

4、查看树，不可更改，所有的树的选项都为灰色不可选择：

｝

//加载已经对应角色的树,查看树用的
function loadZtree(idList,isLook){
var zNodes = initZNodes();
var len =zNodes.length;
var parentContentId = [];
for(var i=0;i<len;i++){//勾选子菜单
var node = zNodes[i];
if(idList.contains(node.id)){
node.checked=true;
parentContentId.push(node.pId.toString());
}
if(isLook == "true"){
node.chkDisabled=true;
}
}
for(var i=0;i<len;i++){//根据勾选的子菜单，勾选父菜单
var node = zNodes[i];
if(parentContentId.contains(node.id.toString())){
node.checked=true;
}
}
initZtree(zNodes);
}

Array.prototype.contains = function (obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return true;
}
}
return false;
}