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 ...
随机推荐
- 如何设置Fiddler来拦截Java代码发送的HTTP请求,进行各种问题排查
我们使用Java的RestTemplate或者Apache的HTTPClient编程的时候,经常遇到需要跟踪Java 代码发送的HTTP请求明细的情况.和javascript代码在浏览器里发送请求可以 ...
- CentOS7安装配置redis5.0.5
一.安装必需包gcc yum install gcc 二.下载redis,并解压 wget http://download.redis.io/releases/redis-5.0.5.tar.gz t ...
- blob格式导出文件
最近在做blob流导出相关功能,其中需要导出excel.csv.word.zip压缩文件之类的,在导出excel和word中需要知道对应的content-type属性,正好看到下面这篇文章,感觉挺好的 ...
- 韩老师CCNA学习笔记
1.MSCONFIG服务里面可以选择隐藏Windows服务,就能看出程序安装的服务.即使显示已停止,仍可能在运行 2.命令行输入netstat -anbo ,显示当前连接和端口,数字显示,以及程序的路 ...
- 20 October in ss
Contest A: sum 快速读. B: 鬼谷子的钱袋(coin) 贪心. 按照类似二进制的方式准备钱袋:1, 2, 4, 8, ... 以此装入的钱袋数目记为 \(N\). 如果最后剩余不足以凑 ...
- Linux:主设备号和次设备号
http://www.linuxidc.com/Linux/2011-03/33863.htm Linux的设备管理是和文件系统紧密结合的,各种设备都以文件的形式存放在/dev目录下,称为设备 ...
- oauth2学习
oauth2 生词: 授权码模式(authorization code) 简化模式(implicit) 密码模式(resource owner password credentials) 客户端模式( ...
- Python Django 编写一个简易的后台管理工具1-安装环境
安装python环境 MAC 一般都会自带 Python2.x版本 的环境,你也可以在链接 https://www.python.org/downloads/mac-osx/ 上下载最新版安装. 安装 ...
- 深入了解JAVA基础(面试)
I.常用类型与编码类问题: 1.Java中的基本类型有什么? byte.short.int.long.float.double.chart.boolean这八种,这 ...
- day106 支付功能与优惠券功能 contentype
https://blog.csdn.net/Ayhan_huang/article/details/78626957 一.ContenType from django.db import models ...