`

easyui tree 模仿ztree 使用扁平化加载json

阅读更多
参考文章: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扁平化扩展,不用再为children嵌套结构烦恼

    具体来说,我们将修改EasyUI Tree的`loadFilter`方法,使其能够自动处理扁平化的数据结构,并将其转换成适合EasyUI Tree使用的格式。 #### 五、实现原理 下面是对EasyUI Tree进行扁平化扩展的核心逻辑: 1. **定义...

    easyUI1.4与ztree3.5结合+ztree中文帮助文档

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器,easyUI1.4与ztree3.5结合开发,ztree帮助文档对初用者很有帮助......

    EasyUI1.4+zTree3.5.16完美结合框架布局

    例如,可以使用EasyUI的`&lt;div&gt;`标签定义一个区域,然后在这个区域内插入zTree渲染的树形结构。这样,用户可以在框架化的界面中方便地浏览和操作树形数据。 在实际应用中,`index.html`文件通常是项目的入口点,它会...

    mvc+EF+easyui+ztree

    自己最近两天刚做的mvc项目linq to model first,包括分页,动态加载菜单栏,登录,记住密码,权限分配(差一步,等后续),非常适合刚入mvc的人借鉴,后续有更新,请下载者留下邮箱,后续会发到你的邮箱,或有什么...

    EasyUI1.4.4 + zTree3.5.19 完美结合框架布局tree+tab

    EasyUI1.4.4 + zTree3.5.19 完美结合框架布局:tree+tab,zTree的使用(简单数据格式,标准数据格式),我重新组织整理了:EasyUI1.4.4的使用示例,zTree的使用示例。

    最新EasyUI扁平化

    "最新EasyUI扁平化"标题暗示我们关注的是EasyUI的一个更新版本,可能着重于现代扁平化设计趋势,这在当前UI设计中非常流行。扁平化设计强调简洁、清晰和直观的用户界面,去除多余的装饰元素,提高用户体验。 在描述...

    jquery easyui tree 树形列表节点异步加载

    在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...

    easyui tree使用方式

    EasyUI Tree 使用方式详解 EasyUI Tree 是一款功能強大且灵活的树状选择控件,它可以实现多种选择方式,例如多选、checkbox 勾选、新增或删除节点、拖曳移动节点等。以下是 EasyUI Tree 的使用方式详解。 一、套件...

    easyUI和zTree的结合使用

    本篇文章将详细介绍如何将EasyUI与zTree结合使用,以及这两个库的基本功能。 EasyUI是一款基于jQuery的轻量级前端框架,它提供了一系列预定义的CSS样式和JavaScript组件,如窗口、表格、菜单、对话框等,帮助开发者...

    easyui+ztree后台管理系统模板

    6. **开发实践**:在实际使用这个模板时,开发者需要注意数据接口的对接,将后端服务器提供的JSON数据与EasyUI的表格、ZTree的节点数据进行绑定,同时处理用户的交互事件,如点击、拖拽等,以实现完整的业务逻辑。...

    jquery-easyui-tree学习

    使用JavaScript代码初始化Tree,通常在文档加载完成后执行。例如: ```javascript $(function(){ $('#tree').tree({ url: 'tree_data.json', // 数据来源,可以是URL或JSON格式的数组 lines: true, // 是否...

    JqueryEasyUI Tree 动态加载,稍作修改就可以用了

    本篇文章将深入探讨如何实现jQuery EasyUI Tree的动态加载,并根据提供的标题和描述,分享一些可能的实现方法。 动态加载是一种优化技术,可以提高用户体验,避免一次性加载大量数据导致页面响应变慢。对于Tree组件...

    jquery easyui + Ztree +折线图

    在Web开发中,jQuery EasyUI、ZTree和折线图是三种常见的组件,它们分别用于构建用户界面、实现树形结构展示和数据可视化。本篇文章将深入探讨这些技术及其在实际项目中的应用。 首先,jQuery EasyUI是一个基于...

    EasyUI Tree树组件无限循环的解决方法

    在上面的示例代码中,我们使用EasyUI Tree树组件来加载树形结构数据,formatter函数被用于格式化节点的文本信息。 EasyUI Tree树组件的无限循环问题可以通过将末节点State状态设为open来解决。同时,需要注意正确的...

    easyui tree

    EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。在 EasyUI 中,"Tree" 是一个重要的组件,常用于展示层级结构的数据,如组织架构、文件目录等。本例子是关于如何...

    Easyui tree 测试demo

    它会引用 EasyUI 的 CSS 和 JavaScript 文件,定义 Tree 的 DOM 结构,并通过 JavaScript 调用 EasyUI API 来初始化和操作 Tree。通常,HTML 文件会包含一个 `&lt;div&gt;` 元素作为 Tree 的容器,并使用 `class="easyui-...

    easyui tree 改进版

    2. **数据绑定**:EasyUI Tree的数据通常来自于服务器或本地JSON数据,改进版依然保持了这种灵活性。开发者需要将数据源的每一项包含一个标识(如id)、文本(显示内容)以及是否被选中的状态(如checked)。通过`...

    jquery使用EasyUI Tree异步加载JSON数据(生成树)

    本文将详细介绍如何使用jQuery结合EasyUI库中的Tree组件实现对JSON数据的异步加载以生成树状结构,并对实现细节进行深入讲解。这个技术点在现代Web开发中非常常见,特别是在需要处理具有层级关系的数据时,如菜单、...

    easyui tree 例子

    例如,可以使用`$.fn.tree.loadData`方法将JSON数据加载到特定的节点。JSON数据应包含`id`、`text`(显示的文本)和可选的`children`数组来表示子节点。 3. **节点操作** - 展开/折叠:使用`tree.expand(node)`和`...

Global site tag (gtag.js) - Google Analytics