JsTree：如何对顶部有文件夹的 jstree 节点进行排序答案

【问题标题】：JsTree: How to sort jstree nodes with folders at the topJsTree：如何对顶部有文件夹的 jstree 节点进行排序
【发布时间】：2017-04-24 23:57:16
【问题描述】：

我使用插件 Jstree 来绘制文件夹和文件树。

我想获取顶部的文件夹列表，然后是文件列表（文件夹和文件列表必须按字母顺序排序）。

还有我的树的初始化函数：

$('#jstree_demo_div').jstree({ 
    'core' : {
        'data' : [

            {"id":"index_0","text":"test_folder","parent":"#","icon":""},
            {"id":"index_1","text":"vide","parent":"index_0","icon":""},
            {"id":"index_2","text":"05nesf-sdfdgd.mp4","parent":"index_1","icon":"fa fa-film"},
            {"id":"index_3","text":"naissance-d-une-fleur-ouwzp9me-41.mp4","parent":"index_0","icon":"fa fa-film"},
            {"id":"index_4","text":"za05nesfsdfsdg.mp4","parent":"index_0","icon":"fa fa-film"},
            {"id":"index_5","text":"ddd","parent":"#","icon":""},
            {"id":"index_6","text":"05nes-ibw6q9me-41.mp4","parent":"index_5","icon":"fa fa-film"},
            {"id":"index_7","text":"tom-jerry-soundscape-ttar8gme-41.mp4","parent":"#","icon":"fa fa-film"},
            {"id":"index_8","text":"aaes-qmc8q-9me-41.mp4","parent":"#","icon":"fa fa-film"},
            {"id":"index_9","text":"bb05nes.mp4","parent":"#","icon":"fa fa-film"}
        ]
    },
    'plugins' : ['sort','types'],
    'sort' : function(a, b) {
        //What is the function of sorting
    },
});

我的初始化结果：

我需要使用什么排序功能？

【问题讨论】：

标签： jquery sorting jstree directory alphabetical

【解决方案1】：

您可以按图标排序，然后按文本排序：

'sort' : function(a, b) {
        a1 = this.get_node(a);
        b1 = this.get_node(b);
        if (a1.icon == b1.icon){
            return (a1.text > b1.text) ? 1 : -1;
        } else {
            return (a1.icon > b1.icon) ? 1 : -1;
        }

这是jsfiddle

【讨论】：

惊人的功能就像一个魅力！如果我希望文件夹位于底部，我应该如何调整？
知道了，改成这个a1.icon < b1.icon。再次感谢！ ^
@Alexandre 子文件夹会被这些排序函数忽略。你有修复子文件夹排序的方法吗？

【解决方案2】：

Alexandre 的扩展答案 - 如果您希望文件夹位于顶部（默认图标），其余节点按字母顺序排列：

 sort: (a, b) => {
   a1 = $('#jstree_demo_div').jstree(true).get_node(a); // default change the selector
   b1 = $('#jstree_demo_div').jstree(true).get_node(b);
                
   if (a1.icon === true || b1.icon === true) { // if either of the nodes is a folder (no icon)
     if (a1.icon === true && b1.icon !== true) { // a is folder, b is leaf, we push folder up
        return 1;
     }
                     
     if (a1.icon !== true && b1.icon === true) { // a is leaf, b is folder, we push folder up
       return 1;
     }
                     
     return (a1.text > b1.text) ? 1 : -1; // a is folder, b is folder -> alphabetically
   }
   else {
     return (a1.text > b1.text) ? 1 : -1; // a is leaf, b is leaf -> alphabetically
   }
 }

jstree 在没有提供图标时使用true 作为图标的默认值。通过这种排序设置，您的叶子可以有不同的图标，并且仍然可以正确排序（文件夹按字母顺序，然后叶子按字母顺序）。

【讨论】：