EasyUI TreeGrid

数据格式1:

{
  "total": 7,
  "rows": [
    {
      "id": 1,
      "name": "All Tasks",
      "begin": "3/4/2010",
      "end": "3/20/2010",
      "progress": 60,
      "iconCls": "icon-ok"
    },
    {
      "id": 2,
      "name": "Designing",
      "begin": "3/4/2010",
      "end": "3/10/2010",
      "progress": 100,
      "_parentId": 1,
      "state": "closed"
    },
    {
      "id": 21,
      "name": "Database",
      "persons": 2,
      "begin": "3/4/2010",
      "end": "3/6/2010",
      "progress": 100,
      "_parentId": 2
    },
    {
      "id": 22,
      "name": "UML",
      "persons": 1,
      "begin": "3/7/2010",
      "end": "3/8/2010",
      "progress": 100,
      "_parentId": 2
    },
    {
      "id": 23,
      "name": "Export Document",
      "persons": 1,
      "begin": "3/9/2010",
      "end": "3/10/2010",
      "progress": 100,
      "_parentId": 2
    },
    {
      "id": 3,
      "name": "Coding",
      "persons": 2,
      "begin": "3/11/2010",
      "end": "3/18/2010",
      "progress": 80
    },
    {
      "id": 4,
      "name": "Testing",
      "persons": 1,
      "begin": "3/19/2010",
      "end": "3/20/2010",
      "progress": 20
    }
  ],
  "footer": [
    {
      "name": "Total Persons:",
      "persons": 7,
      "iconCls": "icon-sum"
    }
  ]
}

格式2:

[{
    "id":1,
    "name":"C",
    "size":"",
    "date":"02/19/2010",
    "children":[{
        "id":2,
        "name":"Program Files",
        "size":"120 MB",
        "date":"03/20/2010",
        "children":[{
            "id":21,
            "name":"Java",
            "size":"",
            "date":"01/13/2010",
            "state":"closed",
            "children":[{
                "id":211,
                "name":"java.exe",
                "size":"142 KB",
                "date":"01/13/2010"
            },{
                "id":212,
                "name":"jawt.dll",
                "size":"5 KB",
                "date":"01/13/2010"
            }]
        },{
            "id":22,
            "name":"MySQL",
            "size":"",
            "date":"01/13/2010",
            "state":"closed",
            "children":[{
                "id":221,
                "name":"my.ini",
                "size":"10 KB",
                "date":"02/26/2009"
            },{
                "id":222,
                "name":"my-huge.ini",
                "size":"5 KB",
                "date":"02/26/2009"
            },{
                "id":223,
                "name":"my-large.ini",
                "size":"5 KB",
                "date":"02/26/2009"
            }]
        }]
    },{
        "id":3,
        "name":"eclipse",
        "size":"",
        "date":"01/20/2010",
        "children":[{
            "id":31,
            "name":"eclipse.exe",
            "size":"56 KB",
            "date":"05/19/2009"
        },{
            "id":32,
            "name":"eclipse.ini",
            "size":"1 KB",
            "date":"04/20/2010"
        },{
            "id":33,
            "name":"notice.html",
            "size":"7 KB",
            "date":"03/17/2005"
        }]
    }]
}]

主要区别于正常datagrid 的就是多俩属性:

idField: ‘id‘,
treeField: ‘YearTitle‘,

时间: 2024-12-25 16:45:05

EasyUI TreeGrid的相关文章

基于EasyUI Treegrid的权限管理资源列表

1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到的主要是Datagrid组件,这次为了区分资源的父子关系,打造更好的用户体验,遂探索一下Treegrid组件. 2.jQueryEasyUI简介 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的U

knockoutjs + easyui.treegrid 可编辑的自定义绑定插件【转】

目前仅支持URL的CRUD.不需要的话可以却掉相关代码,把treegrid的data直接赋值给viewModel,然后用ko提交整个data 1.支持双击编辑 2.单击Cell,自动保存编辑. 3.4个功能按钮. 插件源码: ko.bindingHandlers.etreegrid = { editing: false, editIndex: 0, init: function (element, valueAccessor, allBindings, viewModel, bindingCon

Jquery easyui treegrid实现树形表格的行拖拽

前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自己太懒(对自己不是很熟悉的东西是不愿意第一去看的).结果选择良久,还是jquery easyui treegrid这个例子自己看起来比较熟悉.于是就专心研究了,从官方网站http://www.jeasyui.net/下载了demo,开始研读.先把jsp页面一些代码贴出 <link rel="s

EasyUI treegrid 实现点击父节点加载子节点

今天在项目中遇到问题,要实现 EasyUI   treegrid 实现点击父节点加载子节点 第一反应是去百度一下,谷歌一下,发现网上的回答不是懒加载就是在onBeforeExpand调用append方法 我决定使用第二种方法,定义treegrid的onBeforeExpand方法,在里面调用appen方法. 然而当我兴冲冲的运行的时候,出问题了, Firefox出现too much recursion异常提示 在网上看了一下这个问题的出现原因,大家都说是,非法使用了js关键字,可是我看了几遍代码

EasyUi TreeGrid封装

http://www.cnblogs.com/Leo_wl/p/4319470.html 礼物一:树型实体的抽象与封装 所谓树型实体,就是具有树型结构关系的实体,比如省.市.区.对于初学者,可能会创建三张表进行存储,有经验的开发者通过引入ParentId将设计简化为一张表,但是基于ParentId的设计也不够完美,主要问题是查找某个节点的所有上级或所有下级时,都需要进行递归,这是一个低效而复杂的操作. 更有经验的开发者会引入物化路径Path,物化路径是对节点关系的记录,一般格式为:当前节点Pat

c# XML解析成EasyUI TreeGrid格式

1.分析EasyUI TreeGrid的数据格式,demo的格式是这样的:http://www.jeasyui.net/demo/treegrid_data1.json 分析之后,得到基本的JSON格式: [ { "id": 1, "name": "name1", "value": "", "children": [ { "id": 2, "name&quo

easyui treegrid 使用技巧

一:easyui treegrid重新加载数据 1:self.grid.treegrid('loadData', []);//清空数据 self.grid.queryParams({});//重新加载 //self.grid.treegrid('reload');//treegrid重新加载一次 2:window.location.reload(); 二:easyui treegrid获取被选中的数据 var rows = null; rows = self.grid.treegrid('get

easyui treegrid实现显示checkbox并能获取到选定值的

闲聊: 小颖最近忙疯了,经常被加班,昨天都要下班了,又提了个需求,虽然写的代码不多只有几行,可是测试环境很难跑通,一会就ie崩溃了,所以弄得小颖最近老是头晕. 也不知道最近是怎么了,一向特别爱吃的小颖,最近很没有食欲,中午不好好吃饭,就吃一个苹果,再吃几口米然后就饱了,晚上回去也不是很饿,但是到下午就开始头晕,哎!不知道自己是怎么了,昨天下午我们家大颖给我吃零食,我说我没有胃口,旁边的同事都笑了,都说不相信,我那么爱吃的人,竟然会说没胃口不想吃······,可是我真的不想吃啊啊啊啊啊啊啊.好啦不

C#生成easyui tree-grid中的json字符串

最近项目用到EasyUI的treegrid控件实现树形Table,实现效果如下: treegrid需要的json字符串样式如下 [{ "id":1, "name":"C", "size":"", "date":"02/19/2010", "children":[{ "id":2, "name":"P

easyUI treeGrid 实现(一)---_parentId、beginEdit、cancelEdit、enableDnd....以及实现两个treeGrid拖拽

1.描述需求: 左边树结构:省份->地市->医院->科室   右边树:科室 主要功能:1)左边树列出各级之间的关联信息 : 2)实现根据省份和地市进行对左边树的查询 : 3)选中科室行,进行对标签和介绍的修改.保存: 4)右边数的节点拖拽到左边树的医院节点下,保存到数据库 2.所有功能实现花了近一个星期,因为之前对easyUI不了解,遇到好多问题:如下: 1)因为左边树显示的信息很多,之前数据库设计根本没有设想过要树的形式展示,_parentId出现了冲突的问题,最后无奈,在每个id加了