多功能jQuery树插件zTree实现权限列表简单实例
网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要介绍了多功能jQuery树插件zTree实现权限列表简单实例,优异的性能、灵活的配置、多种功能的组合,是树插件zTree最大的优势,感兴趣的小伙伴们可以参考一下
zTree 是一个依靠jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
页面主要引入一下几个文件:
<link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" /> <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
html页面:
<div class="edit_content"> <div class="qxlb"> <div class="add_title"> <span>权限列表</span> </div> <div class="qxlb_content"> <ul id="tree" class="ztree"></ul> </div> </div> </div>
核心js:
<SCRIPT type="text/javascript"> var zTree; //创建树型结构 function createTree() { var setting = { check:{ enable:true }, view: { dblClickExpand: true, expandSpeed: "" }, //异步加载 async: { enable: true,//设置是否异步加载 url:"<%=path%>/role/getResourcesList.do", //设置异步获取节点的 URL 地址 otherParam: [ "roleId", '${updateRole.id}'] }, //这个data里面的pIdKey,idKey,name等等之类的都是对应后台查出的字段名字, 在sql中写好或者在拼接json的时候先拼接好,前太接收的时候只要对应一直就可以了 data: { simpleData: { enable: true, pIdKey: "PARENTID", idKey: "ID" }, key: { checked: "CHECKED", name:"NAME" } }, callback: { onAsyncSuess: zTreeOnAsyncSuess } }; //初始化 zTree = $.fn.zTree.init($("#tree"), setting); zTree.expandAll(true); } /* 异步加载无法展开tree 默认展开一级菜单 */ var firstAsyncSuessFlag = 0; function zTreeOnAsyncSuess(event, treeId, msg) { if (firstAsyncSuessFlag == 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); firstAsyncSuessFlag = 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(); } </SCRIPT>
其中数据通过后台递归查询实现,以json的形式传到前台,进行接收。更多的内容可以参考API,里面的例子很详细。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程