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()之前。

在JsTree

1 个答案: