zTree节点排序、jsTree节点排序
项目中遇到了这个问题,网上也没找到比较清晰的答案,索性提供一个方案吧。
原理:将整个树形插件的数据源进行排序,插件在构造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节点排序的更多相关文章
- ztree使用系列四(ztree实现同级拖拽排序并将排序结果保存数据库)
ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...
- 通过ajax 后台传递的 区域id 选中ztree的节点 并展开节点
代码如下: < script type = "text/javascript" > var flag = "<%=request.getParam ...
- Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案
相关插件版本: jquery.ztree.exedit-3.4.js jquery.ztree.all-3.4.js jquery-1.8.0.js function onAsyncSuccess(e ...
- jstree 节点拖拽保存数据库
需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码: $('**').jstree({ //plugins-各种jstree的插件引入,展示树的多样性 'plugins' ...
- zTree实现清空选中的第一个节点的子节点
zTree实现清空选中的第一个节点的子节点 1.实现源代码 <!DOCTYPE html> <html> <head> <title>zTree实现基本 ...
- zTree实现删除树节点
zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...
- zTree实现更新根节点中第i个节点的名称
zTree实现更新根节点中第i个节点的名称 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树 ...
- zTree实现获取当前选中的第一个节点在同级节点中的序号
zTree实现获取当前选中的第一个节点在同级节点中的序号 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTr ...
- zTree实现获取一级节点数据
zTree实现获取一级节点数据 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</t ...
随机推荐
- css----overflow(布局)
CSS overflow 属性用于控制内容溢出元素框时显示的方式. CSS Overflow CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条. overflow属性 ...
- 51nod 1040:最大公约数之和(数论)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1040 给出一个n,求1-n这n个数,同n的最大公约数的和. ...
- CF1111C Creative Snap 线段树
用线段树模拟一下就好了~ code: #include <cstdio> #include <algorithm> #define lson ls[x] #define rso ...
- ASIO
{ 编译ASIO库时,出现编译警告, "Please define _WIN32_WINNT or _WIN32_WINDOWS appropriately. For example:\n& ...
- sqlserver2008锁表语句详解(锁定数据库一个表)
锁定数据库的一个表 复制代码代码如下: SELECT * FROM table WITH (HOLDLOCK) 注意: 锁定数据库的一个表的区别 复制代码代码如下: SELECT * FROM tab ...
- signer information does not match signer information of other classes in the same package
报错日志: java.lang.SecurityException: class "org.bouncycastle.asn1.ASN1ObjectIdentifier"'s si ...
- SSM + MySQL批量删除操作
最近项目中有个购物车功能需要能够选中商品,然后批量删除的操作,也可以单个删除,其实代码很简单就能实现. 这里需要注意的就是你前端是怎么传值的,我这里采用的数组的形式,用 ‘,’隔开. 然后控制层代码如 ...
- /proc/interrupts /proc/stat 查看中断信息
/proc/interrupts列出当前所以系统注册的中断,记录中断号,中断发生次数,中断设备名称 如下图:从左至右:中断号 中断次数 中断设备名称 从上图可知中断号为19的arch_timer ...
- 抽象类 抽象方法 abstract
abstract: * abstract修饰类: 抽象类 * > 此类不能被实例化 * > 抽象类中一定要有构造器, 便于子类对象实例时调用(涉及子类对象实例化过程) * > 开发中 ...
- Process Monitor监控进程操作注册表如何实现?
http://zhidao.baidu.com/link?url=Kqav4qkQSprC5FnpHPOGJvhqvY9fJ9-Vdx9g_SWh4w5VOusdRJo4Vl7qIdrG4LwRJvr ...