zTree 是一個依靠jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。
頁面主要引入一下幾個文件:
<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;//創(chuàng)建樹型結構function createTree() { var setting = { check:{ enable:true }, view: { dblClickExpand: true, expandSpeed: "" }, //異步加載 async: { enable: true,//設置是否異步加載 url:"<%=path%>/role/getResourcesList.do", //設置異步獲取節(jié)點的 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: { 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(){ //頁面加載完成創(chuàng)建樹 createTree(); });function submitRole(){ //獲取選中的節(jié)點,傳到后臺 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ù)通過后臺遞歸查詢實現(xiàn),以json的形式傳到前臺,進行接收。更多的內容可以參考API,里面的例子很詳細。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答