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

今天在项目中遇到问题,要实现 EasyUI   treegrid 实现点击父节点加载子节点

第一反应是去百度一下,谷歌一下,发现网上的回答不是懒加载就是在onBeforeExpand调用append方法

我决定使用第二种方法,定义treegrid的onBeforeExpand方法,在里面调用appen方法。

然而当我兴冲冲的运行的时候,出问题了,

Firefox出现too much recursion异常提示

在网上看了一下这个问题的出现原因,大家都说是,非法使用了js关键字,可是我看了几遍代码都没看到关键字。

因此打开 firefox 查看请求记录,发现我每次点击展开节点的时候,firefox会发送两次请求

一个是我自己发起的 

请求1:  localhost:8080/system/dept/list.do?system_id=0&pid=1  

另一个是

请求2:   localhost:8080/system/dept/list.do?system_id=0&pid=1&id=1

可是我没有发起第二个请求啊,我就开始检查代码,去掉了自己发起的请求1,请求2还存在,而且id的值随着我点击的节点不同而变化,而且是点击的节点的idFileld,然后我默默去掉了treegrid 的url 里面的pid参数,在后台把id转为pid(在Dept类中添加属性id,在controller中把pid赋值为id)

OK! 到了这里我发现easyui会在点击的时候自动发起请求加载子节点,这个请求的特点是在默认url上加上 'idField'='***'

这样就ok啦,根本不用手动调用append。

转载于:https://my.oschina.net/u/1376845/blog/388049

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui treegrid 提供了树节点延迟加载的功能,可以将树节点的数据分批加载,只有当用户展开该节点时,才会加载该节点的子节点。下面是使用树节点延迟加载的示例代码: 1. 首先,在 easyui treegrid 的 data 属性中,需要为每个节点添加一个 "state" 属性,该属性的值为 "closed",表示该节点的子节点加载。例如: ``` var data = [ { "id": 1, "text": "Node 1", "state": "closed" }, { "id": 2, "text": "Node 2", "state": "closed" } ]; ``` 2. 然后,在 easyui treegrid 的 onBeforeExpand 事件中,判断该节点是否已经加载子节点,如果未加载,则通过 AJAX 请求获取该节点的子节点数据,并将数据添加到该节点下。例如: ``` $('#treegrid').treegrid({ url: 'get_data.php', idField: 'id', treeField: 'text', onBeforeExpand: function(row) { if (row.children == undefined) { $.ajax({ url: 'get_children.php?id=' + row.id, dataType: 'json', success: function(data) { $('#treegrid').treegrid('append', { parent: row.id, data: data }); row.children = data; } }); } }, columns: [...] }); ``` 在这个示例代码中,通过 AJAX 请求获取该节点的子节点数据,并通过 treegrid 的 "append" 方法将数据添加到该节点下。同时,为了避免多次请求同一个节点的子节点数据,需要将已经加载子节点数据保存在该节点的 "children" 属性中。 通过以上代码,你就可以实现 easyui treegrid 的树节点延迟加载功能。当用户展开某个节点时,会自动请求该节点的子节点数据,并将数据添加到该节点下,从而实现了分批加载数据的效果,提高了 easyui treegrid 的性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值