多功能jQuery树插件zTree实现权限列表简单实例

前端之家收集整理的这篇文章主要介绍了多功能jQuery树插件zTree实现权限列表简单实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

zTree 是一个依靠jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

页面主要引入一下几个文件

html页面:

权限列表

核心js:

/role/getResourcesList.do",//设置异步获取节点的 URL 地址 otherParam: [ "roleId",'${updateRole.id}']
},//这个data里面的pIdKey,idKey,name等等之类的都是对应<a href="https://www.jb51.cc/tag/houtai/" target="_blank" class="keywords">后台</a>查出的字段名字,
 在<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>中写好或者在拼接json的时候先拼接好,前太接收的时候只要对应一直就可以了
data: {
  simpleData: {
    enable: true,pIdKey: "PARENTID",idKey: "ID"
  },key: {
      checked: "CHECKED",name:"NAME"
    }
},callback: {
 onAsyncSuccess: zTreeOnAsyncSuccess 

}
};
//初始化
zTree = $.fn.zTree.init($("#tree"),setting);
zTree.expandAll(true);
}
/ 异步加载无法展开tree 默认展开一级菜单 /
var firstAsyncSuccessFlag = 0;
function zTreeOnAsyncSuccess(event,treeId,msg) {
if (firstAsyncSuccessFlag == 0) {
try {
//调用默认展开第一个结点
var selectedNode = zTree.getSelectedNodes();
var nodes = zTree.getNodes();
zTree.expandNode(nodes[0],true);
var childNodes = zTree.transformToArray(nodes[0]);
zTree.expandNode(childNodes[1],true);
zTree.selectNode(childNodes[1]);
var childNodes1 = zTree.transformToArray(childNodes[1]);
zTree.checkNode(childNodes1[1],true,true);
firstAsyncSuccessFlag = 1;
} catch (err) {

  } 

}
}

$(function(){
//页面加载完成创建树
createTree();
});

function submitRole(){
//获取选中的节点,传到后台
var nodes = zTree.getCheckedNodes();
var ids = [];
for(var i=0,l=nodes.length;i<l;i++){
ids[ids.length] = nodes[i].ID;
}
//var _resourcesIds=ids.join(",");
document.getElementById("hidden_resourceList").value=ids.join(",");

//$("#resourcesRoleListForm").submit();
}

其中数据通过后台递归查询实现,以json的形式传到前台,进行接收。更多的内容可以参考API,里面的例子很详细。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/47323.html

猜你在找的jQuery相关文章