jquery zTree的基本用法

<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css"> ??<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script> 

//======html<div> ?<ul id="treeContainer" class="ztree"></ul></div>

//================js脚本var zNodes = [];$(function(){ ??loadTree(); ????//初始化树 ??getTreeData(); ?//后台加载数据});function loadTree(){ ???$.fn.zTree.init($.(‘#treeContainer‘),{ ???????data:{ ???????????simpleData:{ ???????????????enable:true ???????????} ???????}, ???????view:{ ???????????nameIsHTML:true, ???????????showLine:true, ???????????dblClick:false ???????}, ???????callback:{ ???????????onClick : nodeEvents ??//点击节点执行的方法 ???????} ???},zNodes);}function getTreeData(){ ????$.ajax({ ?????????type:"post", ?????????url:"", ?????????async:true, ?????????data:{}, ?????????dataType:"TEXT", ?????????success:function(data) ?????????{ ?????????????var arr = data.split(‘\1‘); ???????????zNodes.push({ ???????????????id:arr[0], ?//本身id ???????????????pId:arr[1], //父级id ???????????????name:‘‘, ???//显示的名称 ???????????????data:‘‘, ??//这个data是传到下面nodeEvent()里面的 ???????????????open:true ??//默认节点打开 ???????????}); ?????????} ???????????????});}function nodeEvents(e,treeId,treeNode){ ???var data = treeNode.data; ???????var zTree = $.fn.zTree.getZTreeObj(‘treeContainer‘); ???zTree.expandNode(treeNode,true);}

 ?1 ????一. zTree的 setting 配置详解 ???2 ????????3 ????var setting = { ???4 ?????treeId : "",//zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。 ???5 ????//请勿进行初始化 或 修改，属于内部参数。 ????6 ?????treeObj : null,//zTree 容器的 jQuery 对象，主要功能：便于操作。 ???7 ????//请勿进行初始化 或 修改，属于内部参数。 ???8 ????????9 ???????10 ?????async : {// 是否异步加载 相当于ajax ??11 ????autoParam : [], //可以设置提交时的参数名称，例如 server 只接受 zId : ["id=zId"] ; 默认值空 ??12 ????contentType : "application...", ??13 ????dataFilter : null, ??14 ????dataType : "text", ??15 ????enable : false,//设置 zTree 是否开启异步加载模式 ??16 ????//默认值：false ??17 ????otherParam : [],//其他参数 ;直接用 JSON 格式制作键值对，例如：{ key1:value1, key2:value2 } ??18 ????type : "post", ?//请求方式 ??19 ????url : "" //路径 ??20 ?????}, ??21 ?????callback : {//返回函数; 根据需求选择合适的监听事件 ?//以下事件默认权威null 事件例子参见第83行 ??22 ????beforeAsync : null,//异步加载之前的事件回调函数，zTree 根据返回值确定是否允许进行异步加载 ??23 ???????24 ????beforeCheck : null,//勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选 ??25 ???????26 ????beforeClick : null,//单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作 ??27 ???????28 ????beforeCollapse : null,//父节点折叠之前的事件回调函数，并且根据返回值确定是否允许折叠操作 ??29 ???????30 ????beforeDblClick : null,// zTree 上鼠标双击之前的事件回调函数，并且根据返回值确定触发 onDblClick 事件回调函数 ??31 ???????32 ????beforeDrag : null,//节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作 ??33 ???????34 ????beforeDragOpen : null,//拖拽节点移动到折叠状态的父节点后，即将自动展开该父节点之前的事件回调函数，并且根据返回值确定是否允许自动展开操作 ??35 ???????36 ????beforeDrop : null,//节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作 ??37 ???????38 ????beforeEditName : null,//节点编辑按钮的 click 事件，并且根据返回值确定是否允许进入名称编辑状态 ??39 ???????40 ????beforeExpand : null,//父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作 ??41 ???????42 ????beforeMouseDown : null,// zTree 上鼠标按键按下之前的事件回调函数，并且根据返回值确定触发 onMouseDown 事件回调函数 ??43 ???????44 ????beforeMouseUp : null,//zTree 上鼠标按键松开之前的事件回调函数，并且根据返回值确定触发 onMouseUp 事件回调函数 ??45 ???????46 ????beforeRemove : null,//节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作 ??47 ???????48 ????beforeRename : null,//节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作 ??49 ???????50 ????beforeRightClick : null,// zTree 上鼠标右键点击之前的事件回调函数，并且根据返回值确定触发 onRightClick 事件回调函数 ??51 ???????52 ????onAsyncError : null,//异步加载出现异常错误的事件回调函数 ??53 ???????54 ????onAsyncSuccess : null,//异步加载正常结束的事件回调函数 ??55 ???????56 ????onCheck : null,// checkbox / radio 被勾选 或 取消勾选的事件回调函数 ??57 ???????58 ????onClick : null,//节点被点击的事件回调函数 ??59 ???????60 ????onCollapse : null,//节点被折叠的事件回调函数 ??61 ???????62 ????onDblClick : null,// zTree 上鼠标双击之后的事件回调函数 ??63 ???????64 ????onDrag : null,//节点被拖拽的事件回调函数 ??65 ???????66 ????onDragMove : null,//节点被拖拽过程中移动的事件回调函数 ??67 ???????68 ????onDrop : null,//节点拖拽操作结束的事件回调函数 ??69 ???????70 ????onExpand : null,//节点被展开的事件回调函数 ??71 ???????72 ????onMouseDown : null,// zTree 上鼠标按键按下后的事件回调函数 ??73 ???????74 ????onMouseUp : null,// zTree 上鼠标按键松开后的事件回调函数 ??75 ???????76 ????onNodeCreated : null,//节点生成 DOM 后的事件回调函数 ??77 ???????78 ????onRemove : null,//删除节点之后的事件回调函数。 ??79 ???????80 ????onRename : null,//节点编辑名称结束之后的事件回调函数。 ??81 ???????82 ????onRightClick : null// zTree 上鼠标右键点击之后的事件回调函数 ??83 ?????}, ??84 ????????例. 节点勾选或取消事件 ???85 ????function zTreeOnCheck(event, treeId, treeNode) { ??86 ????alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked); ??87 ????}; ??88 ????var setting = { ??89 ????callback: { ??90 ????onCheck: zTreeOnCheck ??91 ????} ??92 ????}; ??93 ????????Function 参数说明 ??94 ????参数数据类型说明 ??95 ????eventjs event 对象标准的 js event 对象 ??96 ????treeId String对应 zTree 的 treeId，便于用户操控 ??97 ????treeNode JSON被勾选 或 取消勾选的节点 JSON 数据对象 ??98 ???????99 ??????100 ????setting参数配置讲解继续... ?101 ?????check : {//设置zTree是否可以被勾选,及勾选的参数配置 ?102 ????autoCheckTrigger : false,//设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效] ?103 ??????104 ??????105 ????chkboxType : {"Y": "ps", "N": "ps"},//勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效] ?106 ??????107 ??????108 ????chkStyle : "checkbox",//勾选框类型(checkbox 或 radio）[setting.check.enable = true 时生效] ?109 ??????110 ??????111 ????enable : false,//设置 zTree 的节点上是否显示 checkbox / radio ?112 ????//默认值: false ?113 ??????114 ??????115 ????nocheckInherit : false//当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 。[setting.check.enable = true 时生效] ?116 ??????117 ??????118 ????chkDisabledInherit : false//当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true 。[setting.check.enable = true 时生效] ?119 ??????120 ??????121 ????radioType : "level"//radio 的分组范围。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 时生效] ?122 ?????}, ?123 ?????data : {//非常重要 ?124 ????keep : { //子节点和父节点属性设置 默认值都为false ?125 ??????leaf : false,//zTree 的节点叶子节点属性锁，是否始终保持 isParent = false ?126 ??????127 ??????128 ??????parent : false//zTree 的节点父节点属性锁，是否始终保持 isParent = true ?129 ????}, ?130 ????key : { //节点数据 ?131 ??????checked : "checked",//zTree 节点数据中保存 check 状态的属性名称。 ?132 ??????133 ??????134 ??????children : "children",//zTree 节点数据中保存子节点数据的属性名称。 ?135 ??????136 ??????137 ??????name : "name",//zTree 节点数据保存节点名称的属性名称。 ?138 ??????139 ??????140 ??????title : "" //zTree 节点数据保存节点提示信息的属性名称。[setting.view.showTitle = true 时生效] ?141 ??????142 ??????143 ??????url : "url" //设置 zTree 显示节点时，将 treeNode 的 xUrl 属性当做节点链接的目标 URL ?144 ????}, ?145 ????simpleData : { ?146 ??????enable : false,//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array) ?147 ??????148 ??????149 ??????idKey : "id",//节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效] ?150 ??????151 ??????152 ??????pIdKey : "pId",//节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效] ?153 ??????154 ??????155 ??????rootPId : null//用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效] ?156 ????} ?157 ?????}, ?158 ?????edit : {//可以编辑节点 : 增 删 改 ?159 ????drag : { ?160 ????autoExpandTrigger : true,//拖拽时父节点自动展开是否触发 onExpand 事件回调函数。[setting.edit.enable = true 时生效] ?161 ??????162 ??????163 ????isCopy : true,//拖拽时, 设置是否允许复制节点。[setting.edit.enable = true 时生效] ?164 ??????165 ??????166 ????isMove : true,//拖拽时, 设置是否允许移动节点。[setting.edit.enable = true 时生效] ?167 ??????168 ??????169 ????prev : true, //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作。[setting.edit.enable = true 时生效] ?170 ??????171 ??????172 ????next : true, //拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。[setting.edit.enable = true 时生效] ?173 ??????174 ??????175 ????inner : true, //拖拽到目标节点时，设置是否允许成为目标节点的子节点。[setting.edit.enable = true 时生效] ?176 ??????177 ??????178 ????borderMax : 10,//拖拽节点成为根节点时的 Tree 内边界范围 (单位：px)。[setting.edit.enable = true 时生效] ?179 ??????180 ??????181 ????borderMin : -5,//拖拽节点成为根节点时的 Tree 外边界范围 (单位：px)。[setting.edit.enable = true 时生效] ?182 ??????183 ??????184 ????minMoveSize : 5,//判定是否拖拽操作的最小位移值 (单位：px)。[setting.edit.enable = true 时生效] ?185 ??????186 ??????187 ????maxShowNodeNum : 5,//拖拽多个兄弟节点时，浮动图层中显示的最大节点数。 多余的节点用...代替。[setting.edit.enable = true 时生效] ?188 ??????189 ??????190 ????autoOpenTime : 500//拖拽时父节点自动展开的延时间隔。 (单位：ms)[setting.edit.enable = true 时生效] ?191 ??????192 ????}, ?193 ????editNameSelectAll : false, ?194 ????enable : false,//设置 zTree 是否处于编辑状态,true / false 分别表示 可以 / 不可以 编辑 ?195 ??????196 ????removeTitle : "remove",//删除按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 时生效] ?197 ??????198 ????renameTitle : "rename",//编辑名称按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 时生效] ?199 ??????200 ????showRemoveBtn : true,//设置是否显示删除按钮。[setting.edit.enable = true 时生效] ?201 ??????202 ????showRenameBtn : true//设置是否显示编辑名称按钮。[setting.edit.enable = true 时生效] ?203 ??????204 ????}, ?205 ?????view : { ?206 ????addDiyDom : null,//用于在节点上固定显示用户自定义控件 ?207 ??????208 ????addHoverDom : null,//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮 ?209 ??????210 ????autoCancelSelected : true,//点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。 ?211 ??????212 ????dblClickExpand : true,//双击节点时，是否自动展开父节点的标识 ?213 ??????214 ????expandSpeed : "fast",//zTree 节点展开、折叠时的动画速度，设置方法同 JQuery 动画效果中 speed 参数。 ?215 ??????216 ????fontCss : {}, //个性化文字样式，只针对 zTree 在节点上显示的<A>对象。 ?217 ??????218 ????nameIsHTML : false,//设置 name 属性是否支持 HTML 脚本 ?219 ??????220 ????removeHoverDom : null,//用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮 ?221 ??????222 ????selectedMulti : true,//设置是否允许同时选中多个节点。 ?223 ??????224 ????showIcon : true,//设置 zTree 是否显示节点的图标。 ?225 ??????226 ????showLine : true,//设置 zTree 是否显示节点之间的连线。 ?227 ??????228 ????showTitle : true,//设置 zTree 是否显示节点的 title 提示信息(即节点 DOM 的 title 属性)。 ?229 ??????230 ????txtSelectedEnable : false//设置 zTree 是否允许可以选择 zTree DOM 内的文本。 ?231 ?????} ?232 ????} ?