关于在使用ztree中同级排序的疑问

在最近开发项目中,使用ztree.js这个插件。但是在使用中碰到了一个问题:

ztree在同级中的排序是乱的,及并不是按照0-9 a-z 的顺序进行排序,但是我对比了一下与同事写的代码,在定义的setting中没有区别,也未进行数据重构,但是他写的效果排序是正确的,我的排序是乱的,(也对比了后台的返回,后台返回的数据也未进行排序)。百度了好久,没找到原因。最后在ztree初始化之前对后台返回的数据进行了一个处理,解决了问题。

解决方案:

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

$.fn.zTree.init($("#tree-moudle"), setting, treeData);

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

treeData= treeData.sort(function (a, b) {
	return a.name.localeCompare(b.name, 'zh-CN', { numeric: true }); 
	//实现数字字符串混合排序
})

这里使用了 JavaScript Array 对象中的 sort() 方法 和 localeCompare()方法

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。
注意:当数字是按字母顺序排列时"40"将排在"5"前面。使用数字排序,你必须通过一个函数作为参数来调用。函数指定数字是按照升序还是降序排列。。
注意: 这种方法会改变原始数组!

数字排序(数字和升序):
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
//fruits输出结果:
//1,5,10,25,40,100
数字排序(数字和降序):
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
//fruits输出结果:
//100,40,25,10,5,1
字母和升序:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
//fruits 输出结果:
//Apple,Banana,Mango,Orange
字母和降序:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
//fruits输出结果:
//Orange,Mango,Banana,Apple

localeCompare()方法
定义:用本地特定的顺序来比较两个字符串。
语法:stringObject.localeCompare(target)
参数:target——要以本地特定的顺序与 stringObject 进行比较的字符串。
返回值:说明比较结果的数字。
(1)如果 stringObject 小于 target,则 localeCompare() 返回小于 0 的数。
(2)如果 stringObject 大于 target,则该方法返回大于 0 的数。
(3)如果两个字符串相等,或根据本地排序规则没有区别,该方法返回 0。
说明:把 < 和 > 运算符应用到字符串时,它们只用字符的 Unicode 编码比较字符串,而不考虑当地的排序规则。以这种方法生成的顺序不一定是正确的。localeCompare() 方法提供的比较字符串的方法,考虑了默认的本地排序规则。ECMAscript 标准并没有规定如何进行本地特定的比较操作,它只规定该函数采用底层操作系统提供的排序规则。

使用的本地规则有汉字和英语的,中用的是英语,则是根据字母排序的。如果有用到汉字则是根据汉字拼音来排序。
a.localCompare(b) – 升序
b.localCompare(a) – 降序

关于localeCompare方法的详细使用方式,可以前往下面的地址查阅
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值