在使用zTree过程中,突然发现他的idkey跟pid必须指定一个单纯的主外键,而不能使用对象解析来绘制树(如:parentModule.id),于是查看了源码,经过改装之后支持了对象关联的遍历,特此做下记录,希望对遇到同样问题的朋友有所帮助。
注意:此种做法针对于ztree3.5版本的。
首先打开ztree的核心源码。jquery.ztree.core-3.5.js找到594行起,修改成如下,然后setting中的data的pidkey写parentModule.id即可
for (i=0, l=sNodes.length; i<l; i++) {
if(parentKey.indexOf('.')!=-1){
var parent = sNodes[i];
parent = parseData(parent,parentKey);
if (tmpMap[parent] && sNodes[i][key] != parent) {
if (!tmpMap[parent][childKey])
tmpMap[parent][childKey] = [];
tmpMap[parent][childKey].push(sNodes[i]);
} else {
r.push(sNodes[i]);
}
}else{
if (tmpMap[sNodes[i][parentKey]] && sNodes[i][key] != sNodes[i][parentKey]) {
if (!tmpMap[sNodes[i][parentKey]][childKey])
tmpMap[sNodes[i][parentKey]][childKey] = [];
tmpMap[sNodes[i][parentKey]][childKey].push(sNodes[i]);
} else {
r.push(sNodes[i]);
}
}
}
分享到:
相关推荐
ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网...
ztree3.5中文API文档
- `data`:用于设置节点数据的相关属性,如`key`、`name`、`icon`等。 - `view`:控制树的视图显示,如字体大小、线条样式等。 - `callback`:设置各种事件回调函数。 - `async`:配置异步加载相关参数。 - `check`...
ztree树的中文帮助文档,全面详解,对于小白特别有帮助,需要的欢迎下载,有问题可以随时@张小骆、QQ:136525553
1. **节点无法正常展开/关闭**:检查`data.simpleData.enable`是否开启,以及`idKey`和`pIdKey`是否正确。 2. **异步加载失败**:确保URL正确,且服务器返回的数据格式符合zTree要求。 3. **事件不响应**:确保事件...
4. **数据模型**:zTree的数据模型基于JSON对象,每个节点都包含一些基本属性,如`name`表示节点文本,`id`为唯一标识,`pId`指父节点ID,`checked`控制复选框状态。此外,还可以自定义额外的属性以满足特定需求。 ...
zTree的核心是通过JSON数据格式来构建树节点,每个节点包含id、name、pId(父节点id)等属性,可以根据需求扩展其他自定义属性。树形结构由多个这样的节点组成,形成层级关系。 二、功能特性 1. 多种展示样式:...
1. 初始化:zTree的初始化需要设置配置参数,如树的容器ID、数据源、显示样式等。例如: ```javascript $(function() { var setting = {}; var zNodes = [ {/*节点数据*/} ]; $.fn.zTree.init($("#treeDemo"), ...
zTree是一款广泛应用于Web开发中的JavaScript树形插件,它以灵活、易用和功能强大而受到开发者喜爱。本资源包含zTree的官方Demo及API文档,这些资料对于理解和掌握zTree的使用方法至关重要。 首先,我们要理解zTree...
脚本中通常会用到ztree提供的配置参数,如`setting`对象,用于设置树的各种属性和行为,以及`data`对象,用于定义数据源和节点的关联关系。 2. **ztree下载**:ztree的官方下载通常包括JavaScript核心文件(如`...
zTree的数据结构主要由JSON对象表示,每个节点包含id、pId(父节点id)、name、isParent(是否为父节点)等基本属性,还可以自定义其他属性,以扩展更多功能。 四、zTree配置项解析 zTree的配置项是通过JavaScript...
以上代码中,`check`对象配置了复选框相关属性,`data`对象设置了数据源的解析方式。`radioType`设置为`all`,意味着所有节点都可以被选中,如果是`level`,则只有同一层级的节点可以互相选择。 最后,ZTree的CSS...
ztreeApi中文文档,帮助使用ztree的同学可快速入手ztree
首先,zTree的核心功能在于其强大的数据处理和节点操作能力,通过JSON数据格式,我们可以方便地定义每个树节点的属性,如ID、名称、父节点ID、是否展开、是否可选等。对于权限管理,这些属性可以映射到用户角色、...
ztree 3.5 中文API帮助文档
题目中提到的"Ztree中英文api"可能意味着ZTree提供了多语言支持,开发者可以通过设置`lang`对象来切换不同的语言环境。 以上只是ZTree API的一部分,实际使用中还有更多高级特性,如拖拽排序、节点拖放、右键菜单...
idKey: "id", pIdKey: "pId", rootPId: 0 } }, callback: { // 回调事件 onClick: function (event, treeId, treeNode) { // 节点被点击时的回调 // 你的处理代码 } } }; var zNodes = [ // 节点数据 { ...
1. **设置**:`setting` 对象定义了 ztree 的各种配置选项。 - `view`: 控制树的外观。 - `data`: 定义数据的格式和加载方式。 - `callback`: 定义与用户交互的回调函数。 2. **节点数据**:`nodes` 数组包含了...
idKey: "id", // 节点ID字段 pIdKey: "pId", // 父节点ID字段 rootPId: 0 // 根节点ID } } }; var zNodes = [ { id:1, pId:0, name:"父节点1" }, { id:2, pId:1, name:"子节点1" }, { id:3, pId:1, name:...
- **设置配置项**:配置项可以设定zTree的行为,例如是否启用异步加载、是否允许多选等。 - **监听事件**:通过绑定事件处理函数,可以响应用户的操作,例如节点点击事件`onClick`、节点展开事件`onExpand`等。 **3...