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

原理:将整个树形插件的数据源进行排序,插件在构造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. .NET面试题集锦②

    一.前言部分 文中的问题及答案多收集整理自网络,不保证100%准确,还望斟酌采纳. 1.实现产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复. ]; ArrayList my ...

  2. JAVA中STL使用

    Vector:和c++的vector使用方法类似. Vector<Integer> vec=new Vector<> (); ArrayList:Java.util.Array ...

  3. Linux sudo 详解

    简单的说,sudo 是一种权限管理机制,管理员可以授权于一些普通用户去执行一些 root 执行的操作,而不需要知道 root 的密码.严谨些说,sudo 允许一个已授权用户以超级用户或者其它用户的角色 ...

  4. Nginx允许跨域访问的配置问题

    网站项目动静分离,静态资源服务器A 业务服务器B  B中静态资源由A加载 出现如下问题: @font-face { font-family: 'iconfont'; src: url('../font ...

  5. XAMPP【phpmyadmin】外网访问被拒绝解决办法

    问题场景: 在阿里云搭建一个apache服务器,正常访问XAMPP目录下的页面. 服务器本地是可以正常访问的 但是远程 就不可以访问了: 出现这样的画面: 解决方法 1.按照提示找到httpd-xam ...

  6. [LeetCode] 181.超过经理收入的员工

    Employee表包含所有员工,他们的经理也属于员工.每个员工都有一个 Id,此外还有一列对应员工的经理的 Id. +----+-------+--------+-----------+ | Id | ...

  7. c# WInform 自定义导航布局

    问题形成原因:软件一般都是左侧树导航或上部菜单导航,做好一个软件后,有的客户可能想用一个页面做导航图像,而各个客户用的功能可能不同,所以导航布局需要自定义. 思路:1.把菜单列出来 2.双击菜单生成一 ...

  8. 2019-4-8 zookeeper学习笔记

    zookeeper学习 ZooKeeper集合中的节点 让我们分析在ZooKeeper集合中拥有不同数量的节点的效果. 如果我们有单个节点,则当该节点故障时,ZooKeeper集合将故障.它有助于“单 ...

  9. python基础--快速排序

    1.快速排序 快速排序是一种交换排序. 快速排序由C. A. R. Hoare在1962年提出. 它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分:分割点左边都是比它小的数,右边都是比它大 ...

  10. 在$CF$水题の记录

    CF1158C CF1163E update after CF1173 很好,我!expert!掉rating了!! 成为pupil指日可待== 下次要记得合理安排时间== ps.一道题都没写的\(a ...