miniUI treeGrid 的数据加载——对上一次发的帖子的修改和改进

treeGrid效果图
在这里插入图片描述
1. 从上次发的帖子中知道其核心就是到底放什么结构的数据进去,并且知道其结构类型都是List<Map<String,Object>>类型,但是有两种结构方式的数据:在这里引用上次发的数据展示
这里有两种数据结构我们分别把它们命名:
第一种,父节点中没有子节点的数据结构 data 如下:命名noChildrenListA:

var data=
[{
    "UID": "1",
    "Name": "项目范围规划",
    "Duration": 8,
    "Start": "2007-01-01T00:00:00",
    "Finish": "2007-01-10T00:00:00",
    "ParentTaskUID": -1
},
{
    "UID": "2",
    "Name": "确定项目范围",
    "Duration": 1,
    "Start": "2007-01-01T00:00:00",
    "Finish": "2007-01-01T23:23:59",
    "ParentTaskUID": "1"
},
......
]

第二种 把子节点放入 父节点key值"children"的value中 的数据结构 dataChildren 如下:
命名ChildrenListB:

var dataChildren =
[{
    "UID": "1",
    "Name": "项目范围规划",
    "Duration": 8,
    "Start": "2007-01-01T00:00:00",
    "Finish": "2007-01-10T00:00:00",
    "ParentTaskUID": -1,
    "children":[
			        {
			            "UID": "2",
			            "Name": "确定项目范围",
			            "Duration": 1,
			            "Start": "2007-01-01T00:00:00",
			            "Finish": "2007-01-01T23:23:59",
			            "ParentTaskUID": "1"
			        },
			        ......
       			]
},
......

]

2. 好了知道其有两种结构方式的 noChildrenListA,childrenListB之后,这里说说影响其加载的最最重要的三个属性
idField :当前节点的值字段
parentField:节点的父节点字段
resultAsTree:官方给的解释是“url数据是否列表”,我这里的理解是“其加载的数据结构方式是否是childrenListB
下面是官方的api文档中的解释:
在这里插入图片描述
从里面可以看得很清楚,若是有nodesField属性即数据结构中有children作为key的Map),也就是类似数据结构childrenListB,那么你采取的resultAsTree属性应该置为true
同理,若你返回其前端的结构数据类似noChildrenListA(无nodesFiled属性,这里注意:其默认的nodesFiled的Map的key为children,也就是说你没有指明nodesFiled,但是有children,它会把其当成children当成nodesFiled),那么你的resultAsTree属性值应该是false

3. 好了,从2知道resultAsTree属性值与数据结构方式之间的对应之后,剩下的就是与resultAsTree属性值相对应的加载数据的方法
首先,我们来看官方文档给的方法:
在这里插入图片描述
从上面就可以很清楚的看到里面的loadData()加载树形数据适合resultAsTree = “true”
这里经过我的实践和官方文档的整理,我得到了如下的对应关系:
a. resultAsTree = “true”
对应方法:loadData() 、setData()
b. resultAsTree = "false"
对应方法:loadList() ,还有添加属性url=“url”

属性url=“url” 官方文档就有:
在这里插入图片描述

好了,今天的miniUI treeGrid 就总结到这里吧,哪里写的不好,希望多多评论,骂我也行 hahahha

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值