关于处理Easyui-treegrid如何在刷新后保持原折叠状态解决办法

最新推荐文章于 2019-12-11 10:07:53 发布

KeyDevil

最新推荐文章于 2019-12-11 10:07:53 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： Easyui Easyui-treegrid 前端

本文链接：https://blog.youkuaiyun.com/KeyDevil/article/details/84108498

本文介绍如何在EasyUI TreeGrid组件中，通过记录已展开节点ID并结合reload方法，实现节点展开状态的持久化。具体实现包括定义数组记录节点ID，在onBeforeExpand和onBeforeCollapse事件中更新数组，以及在onLoadSuccess事件中循环展开记录的节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Easyui中的treegrid有一个reload方法,但执行该方法后,会初始化这个树结构。那么之前已经展开的树节点将会被打乱。

想达到的效果:

我展开A节点,并在A节点下增加了一个B子节点,增加成功并页面刷新后，保持A节点已被展开的状态。

思路:

treegrid中有个expand方法，需要传入一个节点ID，效果是展开该节点。如果我们能记录已经被展开的节点，然后在treegrid被reload之后，先将所有节点折叠，然后再对每一个已记录的节点展开。就可以达到上述效果。

首先需要定义一个数组用于装载记录已展开的节点ID,然后在onBeforeExpand事件时写入被点击的节点ID存入该数组。

之后在onBeforeCollapse事件中写入该数组删除被点击的节点。

最后在treegrid的onLoadSuccess事件中写入循环展开已被记录的节点即可。

代码部分:

<script type="text/javascript"> 
var recordNodes = new Array();//定义一个数组容器记录已被展开的节点ID
    $(function () {
        $('#tree').treegrid({
            url: 'myurl.php',
            idField: 'id',
            treeField: 'name',
            onLoadSuccess: function () {
                //将记录已展开节点ID的数组容器转存到另一个数组容器中
                var list = [];
                for (var j = 0; j < rec

最低0.47元/天解锁文章