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

原理:将整个树形插件的数据源进行排序,插件在构造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. CSS text-indent 属性

    text-indent 属性首行文本缩进,有点像padding-left的效果.

  2. Windows下安装的Jenkins修改默认端口号8080(修改配置文件的方式)

    1.首先在Windows下找到Jenkins安装目录.2.在安装目录下找到jenkins.xml文件 3.打开jenkins.xml文件,找到httpPort=8080 4.修改成你想要的端口号即可, ...

  3. 如何做好APP功能测试?

    一.如何做好app的测试工作? 22 个回答  斗魂大陆 凡是可能会出错的地方,一定会出错!--墨菲法则 腾讯有个平台可以实现适配兼容.服务器压力.性能测试.弱网络.耗电量测试等等,挺全面的.WeT ...

  4. php strcasecmp()函数 语法

    php strcasecmp()函数 语法 作用:比较两个字符串(不区分大小写)直线电机驱动器 语法:strcasecmp(string1,string2) 参数: 参数 描述 string1 必须, ...

  5. Delphi界面篇之ListView控件

    //增加项或列(字段) ListView1.Clear; ListView1.Columns.Clear; ListView1.Columns.Add; ListView1.Columns.Add; ...

  6. Ant Design(ui框架)

    官方文档:https://ant.design/docs/react/introduce-cn 说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架.里面的组件很完善, ...

  7. css如何让<a>标签,根据输入的内容长度调整宽度,宽度自适应,那位大仙帮帮忙

    css如何让<a>标签,根据输入的内容长度调整宽度,宽度自适应,那位大仙帮帮忙 5 样式 .ceshi{float:left; margin-left:13px; width:180px; ...

  8. centos挂载移动硬盘ntfs-3g

    yum install ntfs-3g sudo mount -t ntfs-3g /dev/sdc1 /mnt/mobiledisk https://tuxera.com/opensource/nt ...

  9. ucenter 整合同步登录的内部实现原理

    1.用户登录discuz,通过logging.php文件中的函数uc_user_login对post过来的数据进行验证,也就是对username和password进行验证. 2.如果验证成功,将调用位 ...

  10. Red Hat 6网络配置笔记

    1.重启网卡/etc/init.d/network restart server network restart2.运行结果报错 关闭NetworkManagerservice NetworkMana ...