多功能jQuery樹插件zTree實(shí)現(xiàn)權(quán)限列表簡單實(shí)例
zTree 是一個(gè)依靠jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。
頁面主要引入一下幾個(gè)文件:
<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>權(quán)限列表</span> </div> <div class="qxlb_content"> <ul id="tree" class="ztree"></ul> </div> </div> </div>
核心js:
<SCRIPT type="text/javascript"> var zTree; //創(chuàng)建樹型結(jié)構(gòu) function createTree() { var setting = { check:{ enable:true }, view: { dblClickExpand: true, expandSpeed: "" }, //異步加載 async: { enable: true,//設(shè)置是否異步加載 url:"<%=path%>/role/getResourcesList.do", //設(shè)置異步獲取節(jié)點(diǎn)的 URL 地址 otherParam: [ "roleId", '${updateRole.id}'] }, //這個(gè)data里面的pIdKey,idKey,name等等之類的都是對應(yīng)后臺查出的字段名字, 在sql中寫好或者在拼接json的時(shí)候先拼接好,前太接收的時(shí)候只要對應(yīng)一直就可以了 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 默認(rèn)展開一級菜單 */ var firstAsyncSuccessFlag = 0; function zTreeOnAsyncSuccess(event, treeId, msg) { if (firstAsyncSuccessFlag == 0) { try { //調(diào)用默認(rèn)展開第一個(gè)結(jié)點(diǎn) 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(){ //頁面加載完成創(chuàng)建樹 createTree(); }); function submitRole(){ //獲取選中的節(jié)點(diǎn),傳到后臺 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>
其中數(shù)據(jù)通過后臺遞歸查詢實(shí)現(xiàn),以json的形式傳到前臺,進(jìn)行接收。更多的內(nèi)容可以參考API,里面的例子很詳細(xì)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery根據(jù)td給相同tr下其他td賦值的實(shí)現(xiàn)方法
下面就為大家?guī)硪黄猨query根據(jù)td給相同tr下其他td賦值的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10Jquery實(shí)現(xiàn)鼠標(biāo)移上彈出提示框、移出消失思路及代碼
具體思路為:.首先要定位實(shí)現(xiàn)這種效果的元素 ,本次通過class;如果是動(dòng)態(tài)顯示不同的提示內(nèi)容,需設(shè)置title;通過JQ給定位到元素加上 mouseover 和mouseout 事件2013-05-05jQuery在線選座位插件seat-charts特效代碼分享
這篇文章主要介紹了jQuery在線選座位插件seat-charts特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08使用js+jquery實(shí)現(xiàn)無限極聯(lián)動(dòng)
本篇文章是對可擴(kuò)展的無限極聯(lián)動(dòng)下拉選項(xiàng)的實(shí)例進(jìn)行了分析介紹,需要的朋友參考下2013-05-05解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯(cuò)誤的方法
這篇文章主要為大家詳細(xì)介紹了解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯(cuò)誤的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12JQuery實(shí)現(xiàn)左右滾動(dòng)菜單特效
這篇文章主要介紹了jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼,涉及jquery鼠標(biāo)事件相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09