zTree的配置采用Json格式,按照配置的类型分为view(可视界面相关配置)、data(数据相关配置)、check(复选框相关配置)、callback(各类事件的回调函数配置)、async(zTree异步加载配置)
var setting = {
view: {
selectedMulti: true, //设置是否能够同时选中多个节点
showIcon: true, //设置是否显示节点图标
showLine: true, //设置是否显示节点与节点之间的连线
showTitle: true, //设置是否显示节点的title提示信息
txtSelectedEnable: true, //是否选择 zTree Dom 内的文本
},
data: {
simpleData: {
enable: false, //设置是否启用简单数据格式(zTree支持标准数据格式跟简单数据格式,上面例子中是标准数据格式)
idKey: "id", //设置启用简单数据格式时id对应的属性名称
pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
}
},
check:{
enable: true //设置是否显示checkbox复选框
},
callback: {
onClick: onClick, //定义节点单击事件回调函数
onRightClick: OnRightClick, //定义节点右键单击事件回调函数
beforeRename: beforeRename, //定义节点重新编辑成功前回调函数,一般用于节点编辑时判断输入的节点名称是否合法
onDblClick: onDblClick, //定义节点双击事件回调函数
onCheck: onCheck, //定义节点复选框选中或取消选中事件的回调函数
onExpand: onExpandNode, //用于捕获节点被展开的事件回调函数
onAsyncSuccess: onAsyncSuccess, //用于捕获异步加载正常结束的事件回调函数
},
async: {
enable: true, //设置启用异步加载
type: "get", //异步加载类型:post和get
contentType: "application/json", //定义ajax提交参数的参数类型,一般为json格式
url: "/Design/Get", //定义数据请求路径
autoParam: ["id=id", "name=name"] //定义提交时参数的名称,=号前面标识节点属性,后面标识提交时json数据中参数的名称
}
};
treeNode: {
name, //节点显示的文本
checked, //节点是否勾选,ztree配置启用复选框时有效
open, //节点是否展开
icon, //节点的图标
iconOpen, //节点展开式的图标
iconClose, //节点折叠时的图标
id, //节点的标识属性,对应的是启用简单数据格式时idKey对应的属性名,并不一定是id,如果setting中定义的idKey:"zId",那么此处就是zId
pId, //节点parentId属性,命名规则同id
children, //得到该节点所有孩子节点,直接下级,若要得到所有下属层级节点,需要自己写递归得到
isParent, //判断该节点是否是父节点,一般应用中通常需要判断只有叶子节点才能进行相关操作,或者删除时判断下面是有子节点时经常用到。
getPath() //得到该节点的路径,即所有父节点,包括自己,此方法返回的是一个数组,通常用于创建类似面包屑导航的东西A-->B-->C
}
需要注意的是,zTree的事件回调部分,基本上每一个事件都对应一个beforeXXX事件,比如onClick事件对应有一个beforeOnClick事件,主要用于控制相关事件是否允许执行,如果before事件返回false,则取消执行对应相关事件。
浙公网安备 33010602011771号