在JsTree中排序時拖放不起作用

Question

我正在使用JsTree庫使用以下JSON對象生成樹視圖。

var data = [{"id":1,"parent":"#","text":"Items for Sale","icon":"fa fa-folder","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":1},"a_attr":[]},{"id":2,"parent":"#","text":"Service","icon":"fa fa-folder","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":2},"a_attr":[]},{"id":3,"parent":"#","text":"Vacancies","icon":"fa fa-folder","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":3},"a_attr":[]},{"id":4,"parent":"#","text":"Rent Property or Vehicle","icon":"fa fa-folder","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":4},"a_attr":[]},{"id":5,"parent":8,"text":"Electronics","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":2},"a_attr":[]},{"id":6,"parent":8,"text":"Cars and Vehicles","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":1},"a_attr":[]},{"id":7,"parent":1,"text":"Property","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":1},"a_attr":[]},{"id":8,"parent":1,"text":"Home and Gardens","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":2},"a_attr":[]},{"id":9,"parent":1,"text":"Fassion Health and Beauty","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":3},"a_attr":[]},{"id":10,"parent":1,"text":"Hobbies Sports and Kids","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":4},"a_attr":[]},{"id":14,"parent":2,"text":"Trade Services","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":1},"a_attr":[]},{"id":15,"parent":2,"text":"Domestic Service","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":2},"a_attr":[]},{"id":16,"parent":2,"text":"Events and Entertainment","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":3},"a_attr":[]}];

我正在嘗試使用“ order-num”值對樹視圖節點進行排序，然后通過拖放手動更改排序順序。 必須僅在拖動節點的第一個父UL中允許拖放。 但是問題是排序時，拖放不起作用。 這是我的JsTree代碼。

$('#categories-wrapper').jstree({
        'core': {
            'data': data,
            "check_callback": true
        },
        "plugins": ["dnd", "sort"],
        'sort': function (a, b) {
            a1 = this.get_node(a);
            b1 = this.get_node(b);

            return (a1.li_attr['order-num'] > b1.li_attr['order-num']) ? 1 : -1;
        }
});

Answer 1

由於此解決方案https://groups.google.com/forum/#!topic/jstree/nn5GaA6WhXE對我不起作用，因此我找到了另一個解決方案。 這不是完美的，但對我有用。

$('.jstree').on('ready.jstree', (e, data) => {
   data.instance.sort = () => {};
});

訣竅是在初始渲染后禁用排序。 這就是代碼的作用。 渲染樹后，不再需要排序。 因此，只需對空函數進行sort 。

確保將此代碼放在$('.jstree').jstree() 。