[TOC] [基于bootstrap的jQuery多级列表树插件\_jQuery之家-自由分享jQuery、html5、css3的插件库 (htmleaf.com)](http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html) [基于bootstrup的jQuery多级列表树插件效果演示\_jQuery之家-自由分享jQuery、html5、css3的插件库 (htmleaf.com)](http://www.htmleaf.com/Demo/201502141380.html) [jonmiles/bootstrap-treeview: Tree View for Twitter Bootstrap - (github.com)](https://github.com/jonmiles/bootstrap-treeview) ## **ztree** [API 文档 \[zTree -- jQuery 树插件\] (treejs.cn)](https://treejs.cn/v3/api.php) **html** ``` <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul> ``` >[danger]注意 容器的class必须要设置为ztree **js** ``` var setting = { check: { enable: true }, data: { simpleData: { enable: true } } }; var zNodes= [ {id:1, pId:0, name: "父节点1"}, {id:11, pId:1, name: "子节点1"}, {id:12, pId:1, name: "子节点2"} ]; //实例化并返回ztree对象 $.fn.zTree.init($("#treeDemo"), setting, zNodes); //其他地方随时获取ztree对象,必须在初始化 zTree 以后才可以使用此方法。 var treeObj = $.fn.zTree.getZTreeObj("tree"); //销毁指定ztree $.fn.zTree.destroy("treeDemo"); //销毁全部ztree $.fn.zTree.destroy(); //插件入口 $.fn.zTree._z ``` ### **配置一览详情参看**[**zTree -- jQuery 树插件API**](https://treejs.cn/v3/api.php) ``` $.fn.zTree.init($("#cateDir"), setting, treeNode); ``` ``` setting 配置详解 var setting = { treeId : "",//zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值,请勿进行初始化 或 修改，属于内部参数 treeObj : null,//zTree 容器的 jQuery 对象，主要功能：便于操作,请勿进行初始化 或 修改，属于内部参数。 async : { enable : false,//异步加载，true后生效且下面的参数才有效 autoParam : [],//异步加载时需要自动提交父节点属性的参数。[setting.async.enable = true 时生效] contentType : "application...",//Ajax 提交参数的数据类型。[setting.async.enable = true 时生效] dataFilter : null,//用于对 Ajax 返回数据进行预处理的函数 dataType : "text",//Ajax 获取的数据类型 otherParam : [],//Ajax 请求提交的静态参数键值对 type : "post",//Ajax 的 http 请求模式 headers : {},//参考 jQuery ajax 中的 headers 参数 xhrFields : {},//参考 jQuery ajax 中的 xhrFields 参数 url : ""//Ajax 获取数据的 URL 地址 }, callback : { beforeAsync : null,//用于捕获异步加载之前的事件回调函数。返回值是 true / false，zTree 根据返回值确定是否允许进行异步加载 beforeCheck : null,//用于捕获 勾选 或 取消勾选 之前的事件回调函数。返回值是 true / false，并且根据返回值确定是否允许 勾选 或 取消勾选 beforeClick : null,//用于捕获单击节点之前的事件回调函数。返回值是 true / false，并且根据返回值确定是否允许单击操作 beforeCollapse : null,//用于捕获父节点折叠之前的事件回调函数。返回值是 true / false，并且根据返回值确定是否允许折叠操作 beforeDblClick : null,//用于捕获 zTree 上鼠标双击之前的事件回调函数。返回值是 true / false，并且根据返回值确定触发 onDblClick 事件回调函数 beforeDrag : null,//用于捕获节点被拖拽之前的事件回调函数。返回值是 true / false，并且根据返回值确定是否允许开启拖拽操作 beforeDragOpen : null,//用于捕获拖拽节点移动到折叠状态的父节点后。返回值是 true / false，即将自动展开该父节点之前的事件回调函数，并且根据返回值确定是否允许自动展开操作 beforeDrop : null,//用于捕获节点拖拽操作结束之前的事件回调函数。返回值是 true / false,并且根据返回值确定是否允许此拖拽操作 beforeEditName : null,//用于捕获节点编辑按钮的 click 事件。返回值是 true / false,并且根据返回值确定是否允许进入名称编辑状态 beforeExpand : null,//用于捕获父节点展开之前的事件回调函数。返回值是 true / false，并且根据返回值确定是否允许展开操作 beforeMouseDown : null,//用于捕获 zTree 上鼠标按键按下之前的事件回调函数。返回值是 true / false，并且根据返回值确定触发 onMouseDown 事件回调函数 beforeMouseUp : null,//用于捕获 zTree 上鼠标按键松开之前的事件回调函数。返回值是 true / false，并且根据返回值确定触发 onMouseUp 事件回调函数 beforeRemove : null,//用于捕获节点被删除之前的事件回调函数。返回值是 true / false，并且根据返回值确定是否允许删除操作，回调参数treeId, treeNode beforeRename : null,//用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数。返回值是 true / false，并且根据返回值确定是否允许更改名称的操作，回调参数treeId, treeNode,newName beforeRightClick : null,//用于捕获 zTree 上鼠标右键点击之前的事件回调函数。返回值是 true / false，并且根据返回值确定触发 onRightClick 事件回调函数 onAsyncError : null,//用于捕获异步加载出现异常错误的事件回调函数 onAsyncSuccess : null,//用于捕获异步加载正常结束的事件回调函数 onCheck : null,//用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数 onClick : null,//用于捕获节点被点击的事件回调函数 onCollapse : null,//用于捕获节点被折叠的事件回调函数 onDblClick : null,//用于捕获 zTree 上鼠标双击之后的事件回调函数 onDrag : null,//用于捕获节点被拖拽的事件回调函数 onDragMove : null,//用于捕获节点被拖拽过程中移动的事件回调函数 onDrop : null,//用于捕获节点拖拽操作结束的事件回调函数 onExpand : null,//用于捕获节点被展开的事件回调函数 onMouseDown : null,//用于捕获 zTree 上鼠标按键按下后的事件回调函数 onMouseUp : null,//用于捕获 zTree 上鼠标按键松开后的事件回调函数 onNodeCreated : null,//用于捕获节点生成 DOM 后的事件回调函数 回调参数event, treeId, treeNode onRemove : null,//用于捕获删除节点之后的事件回调函数。 onRename : null,//用于捕获节点编辑名称结束之后的事件回调函数。 onRightClick : null//用于捕获 zTree 上鼠标右键点击之后的事件回调函数 }, check : { enable : false,//设置 zTree 的节点上是否显示 checkbox / radio ,影响下面的参数 autoCheckTrigger : false,//设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数 chkboxType : {"Y": "ps", "N": "ps"},//勾选 checkbox 时对于父子节点的关联关系 chkStyle : "checkbox",//勾选框类型(checkbox 或 radio） nocheckInherit : false,//当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true chkDisabledInherit : false,//当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true radioType : "level"//radio 的分组范围 }, data : { keep : { leaf : false,//zTree 的节点叶子节点属性锁。如果设置为 true，则所有 isParent = false 的节点，都无法添加子节点 parent : false//zTree 的节点父节点属性锁，如果设置为 true，则所有 isParent = true 的节点，即使该节点的子节点被全部删除或移走，依旧保持父节点状态。 }, key : { checked : "checked",//zTree 节点数据中保存 check 状态的属性名称 children : "children",//zTree 节点数据中保存子节点数据的属性名称。 isParent : "isParent",//zTree 节点数据保存节点是否为父节点的属性名称。 isHidden : "isHidden",//Tree 节点数据保存节点是否隐藏的属性名称。 name : "name",//zTree 节点数据保存节点名称的属性名称。 title : "",//zTree 节点数据保存节点提示信息的属性名称 url : "url"//zTree 节点数据保存节点链接的目标 URL 的属性名称 }, simpleData : { enable : false,//是否采用简单数据模式 (Array) idKey : "id",//节点数据中保存唯一标识的属性名称 pIdKey : "pId",//节点数据中保存其父节点唯一标识的属性名称 rootPId : null//用于修正根节点父节点数据，即 pIdKey 指定的属性值 }, render : { name : null,//用于使用自定义的方法动态渲染节点名称， 利用 setting.key.name 获取该修改后节点名称 title : null//用于使用自定义的方法动态渲染节点标题,利用 setting.key.title 获取该修改后节点标题 } }, //编辑模块 需要加载exedit 扩展 且 setting.edit.enable = true 时生效 edit : { drag : { autoExpandTrigger : true,//拖拽时父节点自动展开是否触发 onExpand 事件回调函数 isCopy : true,//拖拽时, 设置是否允许复制节点 isMove : true,//拖拽时, 设置是否允许移动节点 prev : true,//拖拽到目标节点时，设置是否允许移动到目标节点前面的操作 next : true,//拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。 inner : true,//拖拽到目标节点时，设置是否允许成为目标节点的子节点 borderMax : 10,//拖拽节点成为根节点时的 Tree 内边界范围 (单位：px)。 borderMin : -5,//拖拽节点成为根节点时的 Tree 外边界范围 (单位：px)。 minMoveSize : 5,//判定是否拖拽操作的最小位移值 (单位：px)。 maxShowNodeNum : 5,//拖拽多个兄弟节点时，浮动图层中显示的最大节点数。 多余的节点用...代替 autoOpenTime : 500//拖拽时父节点自动展开的延时间隔 }, editNameSelectAll : false,//节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态 enable : false,//设置 zTree 是否处于编辑状态 removeTitle : "remove",//删除按钮的 Title 辅助信息 renameTitle : "rename",//编辑名称按钮的 Title 辅助信息 showRemoveBtn : true,//设置是否显示删除按钮 showRenameBtn : true//设置是否显示编辑名称按钮 }, view : { addDiyDom : null,//用于在节点上固定显示用户自定义控件 addHoverDom : null,//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮 autoCancelSelected : true,//点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。 dblClickExpand : true,//双击节点时，是否自动展开父节点的标识 expandSpeed : "fast",//zTree 节点展开、折叠时的动画速度，设置方法同 JQuery 动画效果中 speed 参数 fontCss : {},//个性化文字样式，只针对 zTree 在节点上显示的<A>对象 nodeClasses : {},//使用 className 设置文字样式，只针对 zTree 在节点上显示的<A>对象 nameIsHTML : false,//设置 name 属性是否支持 HTML 脚本 removeHoverDom : null,//用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮 selectedMulti : true,//设置是否允许同时选中多个节点 showIcon : true,//设置 zTree 是否显示节点的图标 showLine : true,//设置 zTree 是否显示节点之间的连线 showTitle : true,//设置 zTree 是否显示节点的 title 提示信息(即节点 DOM 的 title 属性) txtSelectedEnable : false//设置 zTree 是否允许可以选择 zTree DOM 内的文本 } } ``` ### **ZTreeObj实例对象**：`var treeObj = $.fn.zTree.getZTreeObj("tree");`动态修改或者获取实例的参数 ``` var treeObj = $.fn.zTree.getZTreeObj("#cateDir"); ``` ~~~ //对于 id = "tree" 的 zTree 增加 1 个根节点 var treeObj = $.fn.zTree.getZTreeObj("tree"); var newNode = {name:"newNode1"}; newNode = treeObj.addNodes(null, newNode); //对于 id = "tree" 的 zTree 增加 3 个根节点 var treeObj = $.fn.zTree.getZTreeObj("tree"); var newNodes = [{name:"newNode1"}, {name:"newNode2"}, {name:"newNode3"}]; newNodes = treeObj.addNodes(null, newNodes); ~~~ ``` zTreeObj : { setting zTree 对象使用的 setting 配置数据，详细请参考 “setting 配置详解”中的各个属性详细说明 addNodes (parentNode, index, newNodes, isSilent) 添加节点。 cancelEditName (newName) 取消节点的编辑名称状态，可以恢复原名称，也可以强行赋给新的名称。 cancelSelectedNode (node) 取消节点的选中状态。 checkAllNodes (checked) 勾选 或 取消勾选 全部节点 checkNode (node, checked, checkTypeFlag, callbackFlag) 勾选 或 取消勾选 单个节点 copyNode (targetNode, node, moveType, isSilent) 复制节点。 destroy () 销毁当前zTreeObj实例 editName (node) 设置某节点进入编辑名称状态 expandAll (expandFlag) 展开 / 折叠 全部节点 expandNode (node, expandFlag, sonSign, focus, callbackFlag) 展开 / 折叠 指定的节点 getChangeCheckedNodes () 获取输入框勾选状态被改变的节点集合（与原始数据 checkedOld 对比） getCheckedNodes (checked) 获取输入框被勾选 或 未勾选的节点集合 getNodeByParam (key, value, parentNode) 根据节点数据的属性搜索，获取条件完全匹配的节点数据 JSON 对象 getNodeByTId (tId) 根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象 getNodeIndex (node) 获取某节点在同级节点中的序号（从0开始） getNodes () 获取 zTree 的全部节点数据 getNodesByFilter (filter, isSingle, parentNode, invokeParam) 根据自定义规则搜索节点数据 JSON 对象集合 或 单个节点数据 getNodesByParam (key, value, parentNode) 根据节点数据的属性搜索，获取条件完全匹配的节点数据 JSON 对象集合 getNodesByParamFuzzy (key, value, parentNode) 根据节点数据的属性搜索，获取条件模糊匹配的节点数据 JSON 对象集合 getSelectedNodes () 获取 zTree 当前被选中的节点数据集合 hideNode (node) 隐藏某个节点。 hideNodes (nodes) 隐藏一批节点。 moveNode (targetNode, node, moveType, isSilent) 移动节点。 reAsyncChildNodes (parentNode, reloadType, isSilent, callback) 强行异步加载父节点的子节点。 reAsyncChildNodesPromise(parentNode, reloadType, isSilent)强行异步加载父节点的子节点（ES6 Promise 版） refresh () 刷新 zTree 。 removeChildNodes (parentNode) 清空某父节点的子节点。 removeNode (node, callbackFlag) 删除节点。 selectNode (node, addFlag, isSilent) 选中指定节点 setChkDisabled (node, disabled, inheritParent, inheritChildren) 禁用 或 解禁 某个节点的 checkbox / radio setEditable (editable) 设置 zTree 进入 / 取消 编辑状态。 showNode (node) 显示某个被隐藏的节点。 showNodes (nodes) 显示一批已经被隐藏的节点。 transformToArray (nodes) 将 zTree 使用的标准 JSON 嵌套格式的数据转换为简单 Array 格式。(免去用户自行编写递归遍历全部节点的麻烦) transformTozTreeNodes (simpleNodes) 将简单 Array 格式数据转换为 zTree 使用的标准 JSON 嵌套数据格式。 updateNode (node, checkTypeFlag) 更新某节点数据，主要用于该节点显示属性的更新。 } ``` ### **treeNode：zTreeObj的节点数据** ``` $.fn.zTree.init($("#cateDir"), setting, treeNode); ``` ``` treeNode : { checked 节点的 checkBox / radio 的 勾选状态 children 节点的子节点数据集合。 chkDisabled 设置节点的 checkbox / radio 是否禁用 click 最简单的 click 事件操作。相当于 onclick="..." 的内容。 如果操作较复杂，请使用 onClick 事件回调函数 getCheckStatus () 获取节点 checkbox / radio 半勾选状态 getIndex () 获取 treeNode 节点在同级节点中的位置。 getNextNode () 获取与 treeNode 节点相邻的后一个节点 getParentNode () 获取 treeNode 节点的父节点 getPath () 获取 treeNode 节点的所有父节点（包括自己） getPreNode () 获取与 treeNode 节点相邻的前一个节点 halfCheck 强制节点的 checkBox / radio 的 半勾选状态 icon 节点自定义图标的 URL 路径 iconClose 父节点自定义折叠时图标的 URL 路径 iconOpen 父节点自定义展开时图标的 URL 路径 iconSkin 节点自定义图标的 className isHidden 判断 treeNode 节点是否被隐藏。 isParent 记录 treeNode 节点是否为父节点。 name 节点名称。 nocheck 设置节点是否隐藏 checkbox / radio open 记录 treeNode 节点的 展开 / 折叠 状态 target 设置点击节点后在何处打开 url url 节点链接的目标 URL *DIY* [check_Child_State] 用于设置节点的子节点的 checkBox / radio 的半选状态 [check_Focus] 用于设置节点的 checkBox / radio 的 focus 状态 [checkedOld] 节点的 checkBox / radio 在初始化时的 勾选状态 [editNameFlag] 用于记录节点是否处于编辑名称状态 [isAjaxing] 记录 treeNode 节点是否正在进行异步加载。 [isFirstNode] 记录 treeNode 节点是否为同级节点中的第一个节点 [isHover] 记录节点 的 hover 状态，主要用于 setting.view.addHoverDom / removeHoverDom [isLastNode] 记录 treeNode 节点是否为同级节点中的最后一个节点。 [level] 记录节点的层级 [parentTId] treeNode 节点的父节点唯一标识 tId。 [tId] treeNode 节点的唯一标识 tId。 [zAsync] 记录 treeNode 节点是否已经进行过异步加载，避免父节点反复异步加载数据。 } ```