zTree插件setting配置详解

骑猪看日落 2022-06-18 07:12 548阅读 0赞

一. zTree的 setting 配置详解

var setting = \{

treeId : "", //zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。  
//请勿进行初始化 或 修改，属于内部参数。  
treeObj : null, //zTree 容器的 jQuery 对象，主要功能：便于操作。  
//请勿进行初始化 或 修改，属于内部参数。  
  
  
async : \{ // 是否异步加载 相当于ajax  
autoParam : \[\], //可以设置提交时的参数名称，例如 server 只接受 zId : \["id=zId"\] ; 默认值空  
contentType : "application...",  
dataFilter : null,  
dataType : "text",  
enable : false, //设置 zTree 是否开启异步加载模式  
//默认值：false  
otherParam : \[\],//其他参数 ;直接用 JSON 格式制作键值对，例如：\{ key1:value1, key2:value2 \}  
type : "post", //请求方式  
url : ""  //路径  
\},  
callback : \{ //返回函数; 根据需求选择合适的监听事件 //以下事件默认权威null 事件例子参见第83行  
beforeAsync : null, //异步加载之前的事件回调函数，zTree 根据返回值确定是否允许进行异步加载  
  
beforeCheck : null, //勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选  
  
beforeClick : null, //单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作  
  
beforeCollapse : null, //父节点折叠之前的事件回调函数，并且根据返回值确定是否允许折叠操作  
  
beforeDblClick : null, // zTree 上鼠标双击之前的事件回调函数，并且根据返回值确定触发 onDblClick 事件回调函数  
  
beforeDrag : null, //节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作  
  
beforeDragOpen : null, //拖拽节点移动到折叠状态的父节点后，即将自动展开该父节点之前的事件回调函数，并且根据返回值确定是否允许自动展开操作  
  
beforeDrop : null, //节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作  
  
beforeEditName : null, //节点编辑按钮的 click 事件，并且根据返回值确定是否允许进入名称编辑状态  
  
beforeExpand : null, //父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作  
  
beforeMouseDown : null, // zTree 上鼠标按键按下之前的事件回调函数，并且根据返回值确定触发 onMouseDown 事件回调函数  
  
beforeMouseUp : null, //zTree 上鼠标按键松开之前的事件回调函数，并且根据返回值确定触发 onMouseUp 事件回调函数  
  
beforeRemove : null, //节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作  
  
beforeRename : null, //节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作  
  
beforeRightClick : null,// zTree 上鼠标右键点击之前的事件回调函数，并且根据返回值确定触发 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 后的事件回调函数  
  
onRemove : null, //删除节点之后的事件回调函数。  
  
onRename : null, //节点编辑名称结束之后的事件回调函数。  
  
onRightClick : null // zTree 上鼠标右键点击之后的事件回调函数  
\},   
例. 节点勾选或取消事件  
function zTreeOnCheck(event, treeId, treeNode) \{  
alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);  
\};  
var setting = \{  
callback: \{  
onCheck: zTreeOnCheck  
\}  
\};  
Function 参数说明  
参数 数据类型 说明  
event js event 对象 标准的 js event 对象  
treeId  String 对应 zTree 的 treeId，便于用户操控  
treeNode  JSON 被勾选 或 取消勾选的节点 JSON 数据对象  
  
  
setting参数配置讲解继续...   
check : \{ //设置zTree是否可以被勾选,及勾选的参数配置  
autoCheckTrigger : false, //设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数。\[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效\]  
  
  
chkboxType : \{"Y": "ps", "N": "ps"\}, //勾选 checkbox 对于父子节点的关联关系。\[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效\]  
  
  
chkStyle : "checkbox", //勾选框类型(checkbox 或 radio）\[setting.check.enable = true 时生效\]  
  
  
enable : false, //设置 zTree 的节点上是否显示 checkbox / radio  
//默认值: false  
  
  
nocheckInherit : false //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 。\[setting.check.enable = true 时生效\]  
  
  
chkDisabledInherit : false //当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true 。\[setting.check.enable = true 时生效\]  
  
  
radioType : "level" //radio 的分组范围。\[setting.check.enable = true 且 setting.check.chkStyle = "radio" 时生效\]  
\},  
data : \{ //非常重要  
keep : \{  //子节点和父节点属性设置 默认值都为false  
 leaf : false, //zTree 的节点叶子节点属性锁，是否始终保持 isParent = false  
  
  
 parent : false //zTree 的节点父节点属性锁，是否始终保持 isParent = true  
\},  
key : \{  //节点数据  
 checked : "checked", //zTree 节点数据中保存 check 状态的属性名称。  
  
  
 children : "children",//zTree 节点数据中保存子节点数据的属性名称。  
  
  
 name : "name", //zTree 节点数据保存节点名称的属性名称。  
  
  
 title : ""  //zTree 节点数据保存节点提示信息的属性名称。\[setting.view.showTitle = true 时生效\]  
  
  
 url : "url"  //设置 zTree 显示节点时，将 treeNode 的 xUrl 属性当做节点链接的目标 URL  
\},  
simpleData : \{  
 enable : false, //确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)  
  
  
 idKey : "id", //节点数据中保存唯一标识的属性名称。\[setting.data.simpleData.enable = true 时生效\]  
  
  
 pIdKey : "pId", //节点数据中保存其父节点唯一标识的属性名称。\[setting.data.simpleData.enable = true 时生效\]  
  
  
 rootPId : null //用于修正根节点父节点数据，即 pIdKey 指定的属性值。\[setting.data.simpleData.enable = true 时生效\]  
\}  
\},  
edit : \{ //可以编辑节点 : 增 删 改  
drag : \{  
autoExpandTrigger : true,//拖拽时父节点自动展开是否触发 onExpand 事件回调函数。\[setting.edit.enable = true 时生效\]  
  
  
isCopy : true, //拖拽时, 设置是否允许复制节点。\[setting.edit.enable = true 时生效\]  
  
  
isMove : true, //拖拽时, 设置是否允许移动节点。\[setting.edit.enable = true 时生效\]  
  
  
prev : true,  //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作。\[setting.edit.enable = true 时生效\]  
  
  
next : true,  //拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。\[setting.edit.enable = true 时生效\]  
  
  
inner : true,  //拖拽到目标节点时，设置是否允许成为目标节点的子节点。\[setting.edit.enable = true 时生效\]  
  
  
borderMax : 10, //拖拽节点成为根节点时的 Tree 内边界范围 (单位：px)。\[setting.edit.enable = true 时生效\]  
  
  
borderMin : -5, //拖拽节点成为根节点时的 Tree 外边界范围 (单位：px)。\[setting.edit.enable = true 时生效\]  
  
  
minMoveSize : 5, //判定是否拖拽操作的最小位移值 (单位：px)。\[setting.edit.enable = true 时生效\]  
  
  
maxShowNodeNum : 5, //拖拽多个兄弟节点时，浮动图层中显示的最大节点数。 多余的节点用...代替。\[setting.edit.enable = true 时生效\]  
  
  
autoOpenTime : 500 //拖拽时父节点自动展开的延时间隔。 (单位：ms)\[setting.edit.enable = true 时生效\]  
  
\},  
editNameSelectAll : false,  
enable : false, //设置 zTree 是否处于编辑状态, true / false 分别表示 可以 / 不可以 编辑  
  
removeTitle : "remove", //删除按钮的 Title 辅助信息。\[setting.edit.enable = true & setting.edit.showRemoveBtn = true 时生效\]  
  
renameTitle : "rename", //编辑名称按钮的 Title 辅助信息。\[setting.edit.enable = true & setting.edit.showRenameBtn = true 时生效\]  
  
showRemoveBtn : true, //设置是否显示删除按钮。\[setting.edit.enable = true 时生效\]  
  
showRenameBtn : true //设置是否显示编辑名称按钮。\[setting.edit.enable = true 时生效\]  
  
\},  
view : \{  
addDiyDom : null, //用于在节点上固定显示用户自定义控件  
  
addHoverDom : null, //用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮  
  
autoCancelSelected : true,//点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。  
  
dblClickExpand : true, //双击节点时，是否自动展开父节点的标识  
  
expandSpeed : "fast", //zTree 节点展开、折叠时的动画速度，设置方法同 JQuery 动画效果中 speed 参数。  
  
fontCss : \{\},  //个性化文字样式，只针对 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 内的文本。  
\}