内容发布更新时间 : 2024/12/25 21:04:39星期一 下面是文章的全部内容请认真阅读。
zTree 是一个依靠jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
页面主要引入一下几个文件：
<link type=\
<script type=\ <script type=\src=\ html页面:
<div class=\
<div class=\
<div class=\
<span>权限列表</span> </div>
<div class=\
<ul id=\ </div> </div> </div> 核心js:
<SCRIPT type=\ var zTree;
//创建树型结构
function createTree() { var setting = { check:{
enable:true },
view: {
dblClickExpand: true, expandSpeed: \ },
//异步加载 async: {
enable: true,//设置是否异步加载
url:\设置异步获取节点的 URL 地址
otherParam: [ \ },
//这个data里面的pIdKey,idKey,name等等之类的都是对应后台查出的字段名字，
在sql中写好或者在拼接json的时候先拼接好，前太接收的时候只要对应一直就可以了
data: {
simpleData: {
enable: true,
pIdKey: \ idKey: \ },
key: {
checked: \ name:\ } },
callback: {
onAsyncSuccess: zTreeOnAsyncSuccess } };
//初始化
zTree = $.fn.zTree.init($(\ 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(\ //$(\ }
</SCRIPT>
其中数据通过后台递归查询实现，以json的形式传到前台，进行接收。更多的内容可以参考API，里面的例子很详细。
以上就是本文的全部内容，希望对大家的学习有所帮助