Jstree增加刷新回调方法

本文探讨在使用jstree时如何在刷新树状数据后回调并选中新创建的节点。作者提出三种解决方案:1)依赖后端返回新节点ID;2)创建节点后刷新数据并设置回调;3)不刷新数据,直接在前端创建新节点。作者选择修改jstree添加刷新回调,并详细说明了实现过程,特别指出数据是通过ajax获取的。

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

这是最近遇到的问题,在使用jstree创建节点后,需要刷新树状数据并选中创建的结点。翻阅了jstree的api,发现他的refresh方法中并没有回调这个概念。这种情况下就只有和后端开发接口的人员协商解决了。
方案1:在加载数据的接口中返回最新创建的结点ID,但显然比较难做到
方案2:创建结点后刷新数据,并返回创建结点的id,由前端人员设置选中它。
方案3:不刷新数据,在已知位置用后端返回的结点数据前前端创建一个新结点。并选中它。

感觉这三种方案都能达到目的,第一种方案前端几乎不用改动,全靠后端接口判断。第二种方案在jstree中新增加一个刷新后附带回调方法,这种方案修改了jstree,其实我也觉得不是很好,主要还是由于我的回调掌握的不是很好,练习练习 囧

首先修改jstree文件,这里我使用的jstree版本为:jsTree 3.2.1

/**
 * 首先找到以下代码
 * refresh : function (skip_loading, forget_state)
 * 我采取的方法是复制这段代码,新增加一个refresh_clb方法
 * refresh_clb: function (cbk,skip_loading,forget_state)
 * 看参数就能够知道,只是在前面加了一个cbk参数,阅读刷新方法,可以发现它在获取数据后做了一个load方法,我在load的最后加了一句
 * cbk && cbk();
 */

        refresh_clb: function (cbk,skip_loading,forget_state){
            this._data.core.state = forget_state === true ? {} : this.get_state();
            if(forget_state && $.isFunction(forget_state)) { this._data.core.state = forget_state.call(this, this._data.core.state); }
            this._cnt = 0;
            this._model.data = {};
            this._model.data[$.jstree.root] = {
                id : $.jstree.root,
                parent : null,
                parents : [],
                children : [],
                children_d : [],
                state : { loaded : false }
            };
            this._data.core.selected = [];
            this._data.core.last_clicked = null;
            this._data.core.focused = null;

            var c = this.get_container_ul()[0].className;
            if(!skip_loading) {
                this.element.html("<"+"ul class='"+c+"' role='group'><"+"li class='jstree-initial-node jstree-loading jstree-leaf jstree-last' role='treeitem' id='j"+this._id+"_loading'><i class='jstree-icon jstree-ocl'></i><"+"a class='jstree-anchor' href='#'><i class='jstree-icon jstree-themeicon-hidden'></i>" + this.get_string("Loading ...") + "</a></li></ul>");
                this.element.attr('aria-activedescendant','j'+this._id+'_loading');
            }
            this.load_node($.jstree.root, function (o, s) {
                if(s) {
                    this.get_container_ul()[0].className = c;
                    if(this._firstChild(this.get_container_ul()[0])) {
                        this.element.attr('aria-activedescendant',this._firstChild(this.get_container_ul()[0]).id);
                    }
                    this.set_state($.extend(true, {}, this._data.core.state), function () {
                        /**
                         * triggered when a `refresh` call completes
                         * @event
                         * @name refresh.jstree
                         */
                        this.trigger('refresh');
                    });
                    cbk && cbk();
                }
                this._data.core.state = null;

            });
        }

接下来就是创建后刷新回调的方法了:
说明一下,我们的数据统一都是用ajax读取获得的,所以这段代码其实是写在success当中的:

success: function (data, textStatus, xhr) {
            if (data.Flag == true) {
                cleanFrom("add");
                var ref = $('#companyTree').jstree(true);
                var _data=data;
                let cbkFun=function(){
                    var node=ref.get_node(_data.Id);
                    ref.deselect_all();
                    ref.select_node(node);
                }
                ref.refresh_clb(cbkFun);
                messager(data.Message);

            }
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值