js数组、数组嵌套根据某个字段排序（eachart图标双击事件、vue双击）

1.根据某个字段排序

var arr = [{name:'张三',age:15},{name:'李四',age:18},{name:'王五',age:28}
];function compare(property){return function(a,b){var value1 = a[property];var value2 = b[property];return value1 - value2;  //降序只需要  return value2- value1}
}
console.log(arr.sort(compare('age')))

2.根据某两个字段排序

方法中只需要传两个字段

var arr = [{name:'张三',age:15,num:13},{name:'李四',age:15,num:16},{name:'王五',age:28,num:18},{name:'木子李',age:18,num:18}
];compare (property, p2) {return function (a, b) {var value1 = a[property];var value2 = b[property];if (value1 != value2) {return value1 - value2;} else {return a[p2] - b[p2];}}}console.log(arr.sort(compare('age','num')))

3.嵌套数组排序

需求：单击看选项详情，双击查看ABCD的排序

tips:在vue中是提供了双击事件 dblclick的，所以我们可以在同一元素上可以绑定单击和双击，在我之前的项目需求是：点击eachart饼图扇是展示详情，双击是按选项排序，实现核心代码：

         let TimeFn = null;_this.myChartzu.on('click', (params) => {clearTimeout(TimeFn);//执行延时TimeFn = setTimeout(() => {//do function在此处写单击事件要执行的代码let objCode = {dialogVisible: true,unitCode: params.seriesId,cureentQnTitleCode: _this.cureentQnTitleCode,queryMethods: 'byUnitCode',// qnCode:this.tableData.qnCode}if (this.unitTypeCode <= 7000) {_this.$emit('emitShowDialogTwo', objCode)} else {this.$message.info('已经到最底层了，不能再点了！')}}, 200);});//双击排序_this.myChartzu.on('dblclick', (params) => {clearTimeout(TimeFn);let currentName = params.namelet index = -1this.tableData[0].items.forEach((item, idx) => {if (currentName == item.content) {index = idx}})

针对vue中的dblclick事件单独做了个demo

html<ul class="ul"><li v-for="qn in arr" :key="qn.code"><h2>{{ qn.name }}</h2><divclass="items"v-for="item in qn.items":key="item.area"@click.stop="click(item)"@dblclick.stop="sortC(item)"><a href="#"> 选项：{{ item.area }} 得分：{{ item.order }} </a></div></li></ul>

data数据：arr: [{"code": "10001","name": '1.足球',"items": [{"area": "A","order": 8},{"area": "B","order": 9},{"area": "C","order": 10}, {"area": "D","order": 11},]},{"code": "10003","name": '2.篮球',"items": [{"area": "A","order": 15},{"area": "B","order": 13},{"area": "C","order": 18}, {"area": "D","order": 6},]},{"code": "10002","name": '3.乒乓球',"items": [{"area": "A","order": 23},{"area": "B","order": 20},{"area": "C","order": 19}, {"area": "D","order": 21},]}]

方法：methodsclick (item) {clearTimeout(time);  //首先清除计时器 在script里面定义let time = null;  time = setTimeout(() => {//定时器里面处理事件console.log(item);console.log('单击');}, 300);   //大概时间300ms},sortC (q) {clearTimeout(time);  //清除console.log('双击');let index = -2this.arr[0].items.forEach((item, idx) => {//因为arr下面的都是ABCD就直接取的第一个数组遍历找出对应的idxconsole.log(item);if (q.area == item.area) {index = idx}})console.log(index);if (index != -2) {this.arr = this.arr.sort((a, b) => b.items[index].order - a.items[index].order)}},

js数组、数组嵌套根据某个字段排序（eachart图标双击事件、vue双击）相关推荐

【PHP】数组分页函数、根据字段排序并分页
if (!function_exists("pageByArr")) {/*** 数组分页函数核心函数 array_slice* 用此函数之前要先将数据库里面的所有数据按一定的顺 ...
php根据数组某一字段排序,php如何根据数组中某一字段来实现排序
php如何根据数组中某一字段来实现排序发布时间:2020-04-28 14:53:01 来源:亿速云阅读:40 作者:小新 php如何根据数组中某一字段来实现排序?很多人都不太了解,今天小编为了让 ...
php 二维数组根据某个字段排序
/** * 数组排序根据某个字段排序 * @author ganyuanjiang <3164145970@qq.com> * @createtime 2017-07-30 09:31: ...
php按照二维数组某个字段排序,PHP 二维数组根据某个字段排序
/** * 二维数组根据某个字段排序 * 功能:按照用户的年龄倒序排序 * @author xiaophp.cn */ $arrUsers = array( array( 'id' => 1, ...
js根据数组中对象的多个属性值进行排序
js根据数组中对象的多个属性值进行排序 seatList.sort(function (a, b) {if (a['ordinate'] === b['ordinate']) {if (a['absc ...
js将数组中一个或多个字段相同的子元素中合并
最近js中遇到js将数组中一个或多个字段相同的子元素中合并,相信很多朋友也有遇到,大家可能有多种方法,我在这里记录一个相对简单的方法,当然大家如有其它更好的方法,请提出来大家共同学习. //将经济事项 ...
js中数组反向、排序reverse、sort
全栈工程师开发手册 (作者:栾鹏) js系列教程1-数组操作全解 js中数组反向.排序数组反向使用reverse函数,数组排序使用sort函数,排序函数可以传入比较函数,也可以修改数组圆形,自定义添 ...
JS 对数组对象进行排序
对Number类型的数组排序是很简单的,对数组元素为对象的数组进行排序也很简单,可以写一个下面的公共方法 /** 两个参数: 参数1 是排序用的字段, 参数2 是:是否升序排序 true 为升序,fa ...
java jsonnode 创建_如何在Java中访问JsonNode的JSON字段，数组和嵌套对象？
一个JsonNode是杰克逊的树模型为JSON,它可以读取JSON成JsonNode实例,写一个JsonNode出来JSON.通过创建ObjectMapper实例并调用readValue()方法,使用 ...

js数组、数组嵌套根据某个字段排序（eachart图标双击事件、vue双击）

1.根据某个字段排序

2.根据某两个字段排序

3.嵌套数组排序

js数组、数组嵌套根据某个字段排序（eachart图标双击事件、vue双击）相关推荐

最新文章

热门文章