zTree是一款依靠Jquery实现的多功能的“数插件”，优异的性能、灵活的配置、多种功能的组合是它最大的优点。
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载；
采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀；
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器；
支持 JSON 数据；
支持静态 和 Ajax 异步加载节点数据；
支持任意更换皮肤 / 自定义图标（依靠css）；
支持极其灵活的 checkbox 或 radio 选择功能；
提供多种事件响应回调；
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟；
在一个页面内可同时生成多个 Tree 实例；
简单的参数配置实现 灵活多变的功能。
1.导入zTree JS文件
（Jquery文件必須導入）
<link rel="stylesheet" href="....s/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="..../ztree/js/jquery.ztree.all.min.js"></script>
2.简单树构建
创建一个jsp页面：
<body>
<div id="tree" class="ztree"></div>
</body>
（注意：class必須為ztree）
創建js文件：
var $zTree;
var Nodes = {name:"根節點",open:true,isParent:true,children:{name:"子節點"}}；
var setting ={}；
$zTree = $.fn.zTree.init($("#tree"),setting ,Nodes);
或者
$.fn.zTree.init($("#tree"),setting ,Nodes);
$zTree = $.fn.zTree.getZTreeObj("tree");
到此一顆簡單的樹創建完成。
3.setting配置详解
var setting = {
/**
*以下两个参数不必初始化或修改，属于内部参数。
*treeId：zTree的唯一标识，初始化后，等于用户定义的zTree容器的id属性值。
*treeObj：zTree的Jquery对象
*/
treeId："",
treeObj:null,
async：{
//异步加载时需要自动提交父节点属性的参数。[setting.async.enable = true 时生效]
autoParam:[],
//Ajax 提交参数的数据类型。[setting.async.enable = true //时生效]默认值："application/x-www-form-urlencoded"
contentType:"application...",
//用于对 Ajax 返回数据进行预处理的函数。[setting.async.enable = true 时生效]
dataFilter:null,
//Ajax 获取的数据类型。[setting.async.enable = true 时生效]
dataType:"text",
//设置 zTree 是否开启异步加载模式
enable:false,
//Ajax 请求提交的静态参数键值对。[setting.async.enable = true 时生效]
otherParam:[],
//Ajax 的 http 请求模式。[setting.async.enable = true 时生效]
type:"post",
//[setting.async.enable = true 时生效]
headers:{},
//[setting.async.enable = true 时生效]
xhrFields:{},
//Ajax 获取数据的 URL 地址。[setting.async.enable = true 时生效]
url:""
},
check:{
//设置自动关联勾选时是否触发beforeCheck、onCheck事件回调函数。
autoCheckTrigger:true,
//勾选CheckBox对于父子节点的关联关系，p:影响父级节点;s:影响子级节点
chkboxType:{"Y":"ps","N":"ps"},
//勾选框类型checkbox或radio
chkStyle:"checkbox",
//设置zTree节点上是否显示checkbox/radio
enable:true,
//当父结点设置nocheck=true时，设置子节点是否自动继承nocheck=true
oncheckInherit:false,
//当父结点设置chkDisabled=true时，设置子节点是否自动继承chkDisabled=true.
chkDisabledInherit:false,
//radio分组范围
radioType:"level"
},
data:{
keep:{
//zTree 的节点叶子节点属性锁，是否始终保持 isParent = false
leaf:false,
//zTree 的节点父节点属性锁，是否始终保持 isParent = true
parent:false,
}
key:{
//zTree 节点数据中保存 check 状态的属性名称
checked:"checked",
//zTree 节点数据中保存子节点数据的属性名称。
children:"children",
//zTree 节点数据保存节点是否为父节点的属性名称
isParent:"isParent",
//zTree 节点数据保存节点是否隐藏的属性名称。
isHidden:"isHidden",
//zTree 节点数据保存节点提示信息的属性名称。[setting.view.showTitle = true 时生效]
//如果设置为 "" ，则自动与 setting.data.key.name 保持一致，避免用户反复设置
title:"",
//zTree 节点数据保存节点名称的属性名称。
name:"name",
//zTree 节点数据保存节点链接的目标 URL 的属性名称。
//特殊用途：当后台数据只能生成 url //属性，又不想实现点击节点跳转的功能时，可以直接修改此属性为其他不存在的属性名称
url:"url"
}
simpleData:{
//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes //数据是否采用简单数据模式 (Array)不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON //嵌套格式
enable:false,
//节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
idKey:"id",
//节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
pIdKey:"pId",
//用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true //时生效]
rootPId:null,
}
},
edit:{
drag:{
//拖拽时父节点自动展开是否触发 onExpand 事件回调函数。[setting.edit.enable = true 时生效]
autoExpandTrigger:true,
/**
*拖拽时, 设置是否允许复制节点。[setting.edit.enable = true 时生效]
*isCopy = true; isMove = true 时，拖拽节点按下 Ctrl 或 Cmd 键表示 copy; 否则为 move
*isCopy = true; isMove = false 时，所有拖拽操作都是 copy
*isCopy = false; isMove = true 时，所有拖拽操作都是 move
*isCopy = false; isMove = false 时，禁止拖拽操作
*/
isCopy:false,
//拖拽时, 设置是否允许移动节点。[setting.edit.enable = true 时生效]
isMove:true,
/**
*pre：拖拽到目标节点时，设置是否允许移动到目标节点前面的操作。[setting.edit.enable = true 时生效]
*next:拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。[setting.edit.enable = true 时生效]
*inner:拖拽到目标节点时，设置是否允许成为目标节点的子节点。[setting.edit.enable = true 时生效]
*拖拽目标是 根 的时候，不触发 prev 和 next，只会触发 inner
*此功能主要作用是对拖拽进行适当限制（辅助箭头），需要结合 prev、next 一起使用，才能实现完整功能。
*/
pre:true,
next:true,
inner:true,
//拖拽节点成为根节点时的 Tree 内边界范围 (单位：px)。[setting.edit.enable = true 时生效]
borderMax:10,
//拖拽节点成为根节点时的 Tree 外边界范围 (单位：px)。[setting.edit.enable = true 时生效]
borderMin:5,
判定是否拖拽操作的最小位移值 (单位：px)。[setting.edit.enable = true 时生效]
mionMoveSize:5,
//拖拽多个兄弟节点时，浮动图层中显示的最大节点数。 多余的节点用...代替。[setting.edit.enable = true 时生效]
maxShowNodeNum:5,
//拖拽时父节点自动展开的延时间隔。 (单位：ms)[setting.edit.enable = true 时生效]
autoOpenTime:500
},
//节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态。 [setting.edit.enable = true 时生效]
editNameSelectAll:true,
//设置 zTree 是否处于编辑状态
enable:true,
//删除按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 时生效]
removeTitle:"删除节点",
//编辑名称按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 时生效]
renameTitle:"重命名",
/*
*设置是否显示删除按钮。[setting.edit.enable = true 时生效]
当点击某节点的删除按钮时：
首先触发 setting.callback.beforeRemove 回调函数，用户可判定是否进行删除操作。
如果未设置 beforeRemove 或 beforeRemove 返回 true，则删除节点并触发 setting.callback.onRemove 回调函数。
/*
showRemoveBtn:true,
//设置是否显示编辑名称按钮
showRenameBtn:true,
},
view:{
//用于在节点上固定显示用户自定义控件
addDiyDom：null，
//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
addHoverDom：null，
//点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。
autoCancelSelected：true,
//双击节点时，是否自动展开父节点的标识
dblClickExpand:true,
//zTree 节点展开、折叠时的动画速度，设置方法同 JQuery 动画效果中 speed 参数。
expandSpeed:true，
//个性化文字样式，只针对 zTree 在节点上显示的<A>对象。
fontCss：{}，
//设置 name 属性是否支持 HTML 脚本
nameIsHTML：false,
//用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
removeHoverDom:false,
//设置是否允许同时选中多个节点。
selectedMulti:true,
showTitle:true,
showIcon:true，
showTitle:true,
//设置 zTree 是否允许可以选择 zTree DOM 内的文本
txtSelectEnable:false,
},
/**
*回调函数，on-为实际触发执行的操作，before-为触发之前的询问。
/*
callback:{
onClick:treeonclick,
beforeCheck:treebeforecheck,
onCheck:treeoncheck,
beforeAsync:treebeforeAsync,
beforeClick:treebeforeClick,
beforeCollapse:treebeforeCollapse,
beforeDblClick:treebeforeDbclick,
beforeDrag:treebeforeDrag,
beforeDragOpen:treebeforeDragOpen,
beforeDrop:treebeforeDrop,
beforeEditName:treebeforeEditName,
beforeExpand:treebeforeExpand,
beforeMouseDown:treebeforeMouseDown,
beforeMouseUp:treebeforeMouseUp,
beforeRemove:treebeforeRemove,
beforeRename:treebeforeRename,
beforeRightClick:treebeforeRightClick,
onAsynError:treeonAsyncError,
onAsyncSuccess:treeonAsyncSuccess,
onCollapse:treeonCollapse,
onDblClick:treeonDbClick,
onDrag:treeonDrag,
onDragMove:treeonDragMove,
onDrop:treeonDrop,
onExpand:treeonExpand,
onMouseDown:treeonMouseDown,
onMouseUp:treeonMouseUp,
onNodeCreated:treeonNodeCreated,
onRemove:treeonRemove,
onRename:treeonRename,
onRightClick:treeonRightClick,
}
};
后续会有treeNode和treeObj的总结，如有错误请纠正。
686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
