项目中遇到了这个问题,网上也没找到比较清晰的答案,索性提供一个方案吧。

原理:将整个树形插件的数据源进行排序,插件在构造UI时,自然也是按照顺序来排列的,目前这种思路适用于 zTree 和 jsTree 类库(当然jsTree本身也有自己的排序插件),其他类库大家自行尝试。

这里拿zTree类库举例:

未排序的效果图如下

下面这段是zTree初始化的代码,各科树形类库大同小异,总之都有一个数据源(例如此处的 treeData)

$.fn.zTree.init($(parentContainer), setting, treeData);

那么我们只需要在初始化之前,自己构造方法把 treeData 进行排序即可

// 先排序
treeData = treeData.sort(function (a, b) { // 以下是两种自定义排序规则,此处我们选择按楼层高度属性排序(由高到低) // 按节点名称字符串,进行排序
// let param1 = a.name;
// let param2 = b.name;
// return param1.localeCompare(param2, "zh"); // 按楼层高度属性,进行排序
let param1 = a.elevation;
let param2 = b.elevation;
return param2 - param1;
}); // 再初始化
$.fn.zTree.init($(parentContainer), setting, treeData);

经过排序后的效果图如下

zTree节点排序、jsTree节点排序的更多相关文章

  1. ztree使用系列四(ztree实现同级拖拽排序并将排序结果保存数据库)

    ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...

  2. 通过ajax 后台传递的 区域id 选中ztree的节点 并展开节点

    代码如下: < script type = "text/javascript" >    var flag = "<%=request.getParam ...

  3. Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案

    相关插件版本: jquery.ztree.exedit-3.4.js jquery.ztree.all-3.4.js jquery-1.8.0.js function onAsyncSuccess(e ...

  4. jstree 节点拖拽保存数据库

    需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码: $('**').jstree({ //plugins-各种jstree的插件引入,展示树的多样性 'plugins' ...

  5. zTree实现清空选中的第一个节点的子节点

    zTree实现清空选中的第一个节点的子节点 1.实现源代码 <!DOCTYPE html> <html> <head> <title>zTree实现基本 ...

  6. zTree实现删除树节点

    zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...

  7. zTree实现更新根节点中第i个节点的名称

    zTree实现更新根节点中第i个节点的名称 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树 ...

  8. zTree实现获取当前选中的第一个节点在同级节点中的序号

    zTree实现获取当前选中的第一个节点在同级节点中的序号 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTr ...

  9. zTree实现获取一级节点数据

    zTree实现获取一级节点数据 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</t ...

随机推荐

  1. 分组函数 partition by 的详解,与order by 区别

    partition  by关键字是分析性函数的一部分,它和聚合函数(如group by)不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录, partition  by ...

  2. 【HDOJ6598】Harmonious Army(最小割)

    题意:有n个人,每个人可以从A,B两种职业中选择一种 有m对两人组,如果两个人都是A能获得p的收益,一个A一个B能获得q的收益,都是B能获得r的收益,其中q=p/4+r/3,保证p%4=0,r%3=0 ...

  3. paper 155:face/head pose estimation

    参考来源:http://www.cnblogs.com/lanye/p/5312620.html 人脸姿态估计:pitch,yaw,roll三种角度,分别代表上下翻转,左右翻转,平面内旋转的角度.   ...

  4. blob格式导出文件

    最近在做blob流导出相关功能,其中需要导出excel.csv.word.zip压缩文件之类的,在导出excel和word中需要知道对应的content-type属性,正好看到下面这篇文章,感觉挺好的 ...

  5. [CSP-S模拟测试]:antipalindrome(数学)

    题目传送门(内部题58) 输入格式 第一行一个数$T$表示数据组数.接下来每行两个数$n$和$m$. 输出格式 $T$行,每行一个答案,对${10}^9+7$取模. 样例 样例输入: 25 66 5 ...

  6. MongoDB 3.6 开启慢查询

    参考:Profiling Levels:支持一下级别.0 默认的profiler level,profiler 关闭并且不收集数据.1 profiler 收集超过slowms的操作数据.2 profi ...

  7. token是什么?和session什么区别,怎么用

    对于初学者来说,对Token和Session的使用难免会限于困境,开发过程中知道有这个东西,但却不知道为什么要用他?更不知道其原理,今天我就带大家一起分析分析这东西. 一.我们先解释一下他的含义: 1 ...

  8. Windows Server 2008 R2 官方简体中文免费企业版/标准版/数据中心版

    Windows Server 2008 R2是一款微软发布的Windows服务器操作系统,和之前发布的Windows Server 2008相比功能更为完善运行更为稳定,提升了系统管理弹性.虚拟化.网 ...

  9. Ubuntu下配置了ssh,但是连接很慢

    ssh登录服务器时总是要停顿等待一下才能连接上,这是因为OpenSSH服务器有一个DNS查找选项UseDNS默认是打开的. UseDNS选项打开状态下,当客户端试图登录OpenSSH服务器时,服务器端 ...

  10. linux缺頁異常處理--內核空間[v3.10]

    缺頁異常被觸發通常有兩種情況—— 1.程序設計的不當導致訪問了非法的地址 2.訪問的地址是合法的,但是該地址還未分配物理頁框 下面解釋一下第二種情況,這是虛擬內存管理的一個特性.盡管每個進程獨立擁有3 ...