参考文章:
http://www.jeasyuicn.com/demo/treeloadfilter.html
一、扩展原因
ztree使用了一种扁平化的数据加载方式,就是id(自身id),pid(父id)的方式,参考http://www.ztree.me/v3/demo.php#_102,于是扩展easyui tree 也使用这种亲民的方式;
二、基本方法
1,载入扩展文件
2,在JS中实例化TREE
三、具体方法(easyui1.4.1下测试可用)
1,载入扩展JS
//作者孙宇
//自定义loadFilter的实现
$.fn.tree.defaults.loadFilter = function (data, parent) {
var opt = $(this).data().tree.options;
var idFiled,
textFiled,
parentField;
if (opt.parentField) {
idFiled = opt.idFiled || 'id';
textFiled = opt.textFiled || 'text';
parentField = opt.parentField;
var i,
l,
treeData = [],
tmpMap = [];
for (i = 0, l = data.length; i < l; i++) {
tmpMap[data[i][idFiled]] = data[i];
}
for (i = 0, l = data.length; i < l; i++) {
if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
if (!tmpMap[data[i][parentField]]['children'])
tmpMap[data[i][parentField]]['children'] = [];
data[i]['text'] = data[i][textFiled];
tmpMap[data[i][parentField]]['children'].push(data[i]);
} else {
data[i]['text'] = data[i][textFiled];
treeData.push(data[i]);
}
}
return treeData;
}
return data;
};
2,实例化
//实例化。这里增加了三个属性,可以指定idFiled,textFiled和parentField。所以这里的simpleData可以不严格转换成tree的数据格式。
$(function(){
$('#tt3').tree({
checkbox: true,
url: 'tree_data_simp.json',
parentField:"pid",
textFiled:"name",
idFiled:"key"
});
});
json文件:
[
{
"key": 1,
"name": "Folder1",
"iconCls": "icon-ok"
},
{
"key": 2,
"pid": 1,
"name": "File1",
"checked": true
},
{
"key": 3,
"pid": 1,
"name": "Folder2",
"state": "open"
},
{
"key": 4,
"pid": 3,
"name": "File3",
"attributes": {
"p1": "value1",
"p2": "value2"
},
"checked": true,
"iconCls": "icon-reload"
},
{
"key": 8,
"pid": 3,
"name": "Async Folder"
},
{
"key": 9,
"name": "language",
"state": "closed"
},
{
"key": "j1",
"pid": 9,
"name": "Java"
},
{
"key": "j2",
"pid": 9,
"name": "C#"
}
]
分享到:
相关推荐
具体来说,我们将修改EasyUI Tree的`loadFilter`方法,使其能够自动处理扁平化的数据结构,并将其转换成适合EasyUI Tree使用的格式。 #### 五、实现原理 下面是对EasyUI Tree进行扁平化扩展的核心逻辑: 1. **定义...
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器,easyUI1.4与ztree3.5结合开发,ztree帮助文档对初用者很有帮助......
例如,可以使用EasyUI的`<div>`标签定义一个区域,然后在这个区域内插入zTree渲染的树形结构。这样,用户可以在框架化的界面中方便地浏览和操作树形数据。 在实际应用中,`index.html`文件通常是项目的入口点,它会...
自己最近两天刚做的mvc项目linq to model first,包括分页,动态加载菜单栏,登录,记住密码,权限分配(差一步,等后续),非常适合刚入mvc的人借鉴,后续有更新,请下载者留下邮箱,后续会发到你的邮箱,或有什么...
EasyUI1.4.4 + zTree3.5.19 完美结合框架布局:tree+tab,zTree的使用(简单数据格式,标准数据格式),我重新组织整理了:EasyUI1.4.4的使用示例,zTree的使用示例。
"最新EasyUI扁平化"标题暗示我们关注的是EasyUI的一个更新版本,可能着重于现代扁平化设计趋势,这在当前UI设计中非常流行。扁平化设计强调简洁、清晰和直观的用户界面,去除多余的装饰元素,提高用户体验。 在描述...
在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...
EasyUI Tree 使用方式详解 EasyUI Tree 是一款功能強大且灵活的树状选择控件,它可以实现多种选择方式,例如多选、checkbox 勾选、新增或删除节点、拖曳移动节点等。以下是 EasyUI Tree 的使用方式详解。 一、套件...
本篇文章将详细介绍如何将EasyUI与zTree结合使用,以及这两个库的基本功能。 EasyUI是一款基于jQuery的轻量级前端框架,它提供了一系列预定义的CSS样式和JavaScript组件,如窗口、表格、菜单、对话框等,帮助开发者...
6. **开发实践**:在实际使用这个模板时,开发者需要注意数据接口的对接,将后端服务器提供的JSON数据与EasyUI的表格、ZTree的节点数据进行绑定,同时处理用户的交互事件,如点击、拖拽等,以实现完整的业务逻辑。...
使用JavaScript代码初始化Tree,通常在文档加载完成后执行。例如: ```javascript $(function(){ $('#tree').tree({ url: 'tree_data.json', // 数据来源,可以是URL或JSON格式的数组 lines: true, // 是否...
本篇文章将深入探讨如何实现jQuery EasyUI Tree的动态加载,并根据提供的标题和描述,分享一些可能的实现方法。 动态加载是一种优化技术,可以提高用户体验,避免一次性加载大量数据导致页面响应变慢。对于Tree组件...
在Web开发中,jQuery EasyUI、ZTree和折线图是三种常见的组件,它们分别用于构建用户界面、实现树形结构展示和数据可视化。本篇文章将深入探讨这些技术及其在实际项目中的应用。 首先,jQuery EasyUI是一个基于...
在上面的示例代码中,我们使用EasyUI Tree树组件来加载树形结构数据,formatter函数被用于格式化节点的文本信息。 EasyUI Tree树组件的无限循环问题可以通过将末节点State状态设为open来解决。同时,需要注意正确的...
EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。在 EasyUI 中,"Tree" 是一个重要的组件,常用于展示层级结构的数据,如组织架构、文件目录等。本例子是关于如何...
它会引用 EasyUI 的 CSS 和 JavaScript 文件,定义 Tree 的 DOM 结构,并通过 JavaScript 调用 EasyUI API 来初始化和操作 Tree。通常,HTML 文件会包含一个 `<div>` 元素作为 Tree 的容器,并使用 `class="easyui-...
2. **数据绑定**:EasyUI Tree的数据通常来自于服务器或本地JSON数据,改进版依然保持了这种灵活性。开发者需要将数据源的每一项包含一个标识(如id)、文本(显示内容)以及是否被选中的状态(如checked)。通过`...
本文将详细介绍如何使用jQuery结合EasyUI库中的Tree组件实现对JSON数据的异步加载以生成树状结构,并对实现细节进行深入讲解。这个技术点在现代Web开发中非常常见,特别是在需要处理具有层级关系的数据时,如菜单、...
例如,可以使用`$.fn.tree.loadData`方法将JSON数据加载到特定的节点。JSON数据应包含`id`、`text`(显示的文本)和可选的`children`数组来表示子节点。 3. **节点操作** - 展开/折叠:使用`tree.expand(node)`和`...