easyui datagrid treegrid的几种数据格式

最新推荐文章于 2020-09-05 10:03:32 发布
最新推荐文章于 2020-09-05 10:03:32 发布
阅读量5k 收藏 4
点赞数 1

一、easyui加载datagrid的json数据格式

      （1）基础的数据格式

           

  1. {"total":28,"rows":[
  2. {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
  3. {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
  4. {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
  5. {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
  6. {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
  7. {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
  8. {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
  9. {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
  10. {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
  11. {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
  12. ]}

      （2）带footer的数据格式

  1. {"total":28,"rows":[
  2. {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
  3. {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
  4. {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
  5. {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
  6. {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
  7. {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
  8. {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
  9. {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
  10. {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
  11. {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
  12. ],"footer":[
  13. {"unitcost":19.80,"listprice":60.40,"productid":"Average:"},
  14. {"unitcost":198.00,"listprice":604.00,"productid":"Total:"}
  15. ]}


二、easyui加载treegrid的json数据格式

        （1）基本的数据结构

  1. [{
  2. "id":1,
  3. "name":"C",
  4. "size":"",
  5. "date":"02/19/2010",
  6. "children":[{
  7. "id":2,
  8. "name":"Program Files",
  9. "size":"120 MB",
  10. "date":"03/20/2010",
  11. "children":[{
  12. "id":21,
  13. "name":"Java",
  14. "size":"",
  15. "date":"01/13/2010",
  16. "state":"closed",
  17. "children":[{
  18. "id":211,
  19. "name":"java.exe",
  20. "size":"142 KB",
  21. "date":"01/13/2010"
  22. },{
  23. "id":212,
  24. "name":"jawt.dll",
  25. "size":"5 KB",
  26. "date":"01/13/2010"
  27. }]
  28. },{
  29. "id":22,
  30. "name":"MySQL",
  31. "size":"",
  32. "date":"01/13/2010",
  33. "state":"closed",
  34. "children":[{
  35. "id":221,
  36. "name":"my.ini",
  37. "size":"10 KB",
  38. "date":"02/26/2009"
  39. },{
  40. "id":222,
  41. "name":"my-huge.ini",
  42. "size":"5 KB",
  43. "date":"02/26/2009"
  44. },{
  45. "id":223,
  46. "name":"my-large.ini",
  47. "size":"5 KB",
  48. "date":"02/26/2009"
  49. }]
  50. }]
  51. },{
  52. "id":3,
  53. "name":"eclipse",
  54. "size":"",
  55. "date":"01/20/2010",
  56. "children":[{
  57. "id":31,
  58. "name":"eclipse.exe",
  59. "size":"56 KB",
  60. "date":"05/19/2009"
  61. },{
  62. "id":32,
  63. "name":"eclipse.ini",
  64. "size":"1 KB",
  65. "date":"04/20/2010"
  66. },{
  67. "id":33,
  68. "name":"notice.html",
  69. "size":"7 KB",
  70. "date":"03/17/2005"
  71. }]
  72. }]
  73. }]

   （2）_parentId的数据格式， 字段_parentId必不可少，且名称唯一

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

  1. {"total":9,"rows":[
  2. {"id":1,"region":"Wyoming"},
  3. {"id":11,"region":"Albin","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
  4. {"id":12,"region":"Canon","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
  5. {"id":13,"region":"Egbert","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
  6. {"id":2,"region":"Washington"},
  7. {"id":21,"region":"Bellingham","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
  8. {"id":22,"region":"Chehalis","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
  9. {"id":23,"region":"Ellensburg","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
  10. {"id":24,"region":"Monroe","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2}
  11. ],"footer":[
  12. {"region":"Total","f1":14000,"f2":12600,"f3":13321,"f4":15281,"f5":14931,"f6":13461,"f7":14126,"f8":12866}
  13. ]}

三、总结

在easyui加载数据时，必须遵循上述的几种数据规则，否则数据不能正确显示，字段名称可以根据自己的情况定义，但是格式必须保持一致，在treegrid的加载时，遇到级联的情况需要主要_parentId字段名称。

我要进大厂
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TreeGrid分页树形表格
weixin_30311605的博客
08-16 1970
先展示效果图： 加载treegrid的json数据格式有两种： （1）基本的数据结构 [{ "id":1, "name":"C", "size":"", "date":"02/19/2010", "children":[{ "id":2, "name":"Program Files",...
easyui加载datagrid和treegrid的几种json数据格式
热门推荐
Linda的前端开发路
07-19 2万+
一、easyui加载datagrid的json数据格式       （1）基础的数据格式             {"total":28,"rows":[ {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"E
easyUI datagrid的数据格式
weixin_40408702的博客
09-05 382
easyui-treegrid 数据格式
kai666ling的博客
01-08 1782
1.远程加载                                                               data-options="rownumbers:true,                            striped:true,                            remoteSort:false,
easyui datagrid 数据组装格式
java小王子的博客
10-19 3329
这两天开发报表，用到了easyui datagrid 数据表，记录一下：    在页面中只需要：                                                     js中： function init(opid){          $('#magazineGrid').datagrid({         he
easyui datagrid json 格式
weixin_34249678的博客
11-22 124
{                                                          "total":239,                                                          "rows":[                                                        ...
jQuery Easyui datagrid/treegrid 清空数据
10-21
主要介绍了jQuery Easyui datagrid/treegrid 清空数据的相关资料
easyui-treegrid冻结右侧列插件.zip
06-19
总的来说，"easyui-treegrid冻结右侧列插件.zip" 提供了一种解决方案，使得 EasyUI TreeGrid 能够更好地适应复杂的数据展示需求，提高了用户在查看和分析数据时的效率。对于使用 EasyUI 的开发人员来说，这是一个...
easyUI datagrid rownumber自适应宽度扩展JS
08-12
easyUI datagrid 自动调整行号大小
easyui的Treegrid扩展
04-13
EasyUI的Treegrid扩展是一种对原生EasyUI TreeGrid组件的功能增强，主要目的是提供更加灵活的数据展示和操作方式。在传统的TreeGrid中，数据通常是以树状结构展示，每一行都可以展开或折叠，显示或隐藏子节点。然而...
数据结构之easyui-treegrid
04-15
NULL 博文链接：https://zhglhy.iteye.com/blog/1766581
EasyUI treegrid json格式生成方法
06-04
编写js方法，将一般的json格式数据转为easyui treegrid使用的json格式 ............
easyUI的treeGrid数据格式
chenbhhh的博客
03-30 5934
首先idField是要唯一，这个是肯定的刚开始看api，以为父子节点是treeField定义，后来怎么改这个字段的数据都不出来，后来才知道json数据源中“_parentId”才是决定父子节点的关键，意思就是说在子节点中加上“_parentId”字段，然后该字段对应的值是父节点的resourceId就行了，所以在时隔一年，重新用到这个东西，发现一个问题，最顶级的节点的"_parentId"需要设为...
easyui中treegrid的数据格式
pulan1225的博客
07-27 688
在treegrid中数据中必须要有_parentId字段。同时_parentId字段的值不能小于0，可以是null
easyui datagrid的json格式
weixin_30448685的博客
10-24 202
easyui datagrid的json格式： {"columns":[[{"field":"one","title":"10:00","width":50},{"field":"two","title":"10:05","width":50},{"field":"three","title":"10:10","width":50},{"field":"four","title":"10:15"...
easyUI中的treeGrid---加载数据的格式
weixin_33778778的博客
02-26 274
2019独角兽企业重金招聘Python工程师标准>>> ...
2014/3/14 easyUI中treeGrid json数据格式
骚年时光的专栏
03-14 1万+
在使用easyUI 的treeGrid的时候，很多时候我们从数据库取出来的数据treeGrid却不能读取显示成一个树：如下 { menuCode: "a00", menuName: "管理员首页", menuUrl: "/main/admin/index.action", menuPCode: "-1", isLeaf: "0", status: "1", icon: null, createU
关于easyui treegrid 的数据格式的修改 完成类似于id pid 的平行数据
刘岗强的专栏
06-05 3457
这几天要用到easyui 的treegrid 感觉到他的数据格式封装太成问题了，比较麻烦 捉摸了几天做了如下修改，希望能帮助大家 这是他默认的数据格式 [{ "id":1, "name":"C", "size":"", "date":"02/19/2010", "children":[{ "id":2, "name":"P
easyui-treegrid 加载数据格式
m0_37626203的博客
12-19 1764
前端框架用的是easyui-treegrid这个东西，毕竟不是做前台的，就只能带个框架了。 这个东西，都帮你搞定了，但是，需要测试一下怎么用，按照api上的试试，没有问题，但是，你自己做一下，估计就会出现问题了。不多说，这个还是第二次出现这个问题，第一次我以为（仅仅是我以为）我会记住这个问题，但是，现在再做的时候，又忘了。 treegrid 这个数据，属性不多说，就是，数据格式啊，下一级别的属
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值