`

js自定义多字段排序

阅读更多
  • 多字段同时排序在后端很好实现,直接order by field1 asc, field2 asc,field3 desc…
  • 如下可实现在前端按照多字段同时排序:


//测试数据
var items = [
    {name:"linc",age:28,num:1234},
    {name:"linc",age:28,num:12345},
    {name:"kiki",age:20,num:12345},
    {name:"高峰",age:26,num:123},
    {name:"高峰",age:27,num:101},
    {name:"高峰",age:26,num:111},
    {name:"安迪",age:29,num:110},
    {name:"安迪",age:30,num:110}
];

//两个字段一升一降排序
(function asc-desc(){
    items.sort(function (a, b) {
        return SortByProps(a, b, { "name": "ascending", "age": "descending" });
    });
    console.log(items)
})();
//两个字段都降序排序,其他排序方向同理,也可再加字段
(function desc(){
    items.sort(function (a, b) {
        return SortByProps(a, b, { "name": "descending", "age": "descending" });
    });
    console.log(items)
})();
//不定义排序方向和字段,默认都升序排列
(function default(){
    items.sort(function (a, b) {
        return SortByProps(a, b);
    });
    console.log(items)
})();

//以下函数排序属性并未写死,可直接拿去用自定义属性
function SortByProps(item1, item2, obj) {
    var props = [];
    if(obj){
        props.push(obj)
    }
    var cps = []; // 存储排序属性比较结果。
    // 如果未指定排序属性(即obj不存在),则按照全属性升序排序。
    // 记录下两个排序项按照各个排序属性进行比较得到的结果    
    var asc = true;
    if (props.length < 1) {
        for (var p in item1) {
            if (item1[p] > item2[p]) {
                cps.push(1);
                break; // 大于时跳出循环。
            } else if (item1[p] === item2[p]) {
                cps.push(0);
            } else {
                cps.push(-1);
                break; // 小于时跳出循环。
            }
        }
    } 
    else {
        for (var i = 0; i < props.length; i++) {
            var prop = props[i];
            for (var o in prop) {
                asc = prop[o] === "ascending";
                if (item1[o] > item2[o]) {
                    cps.push(asc ? 1 : -1);
                    break; // 大于时跳出循环。
                } else if (item1[o] === item2[o]) {
                    cps.push(0);
                } else {
                    cps.push(asc ? -1 : 1);
                    break; // 小于时跳出循环。
                }
            }
        }
    }        

    // 根据各排序属性比较结果综合判断得出两个比较项的最终大小关系
    for (var j = 0; j < cps.length; j++) {
        if (cps[j] === 1 || cps[j] === -1) {
            return cps[j];
        }
    }
    return false;          
}
分享到:
评论

相关推荐

    JavaScript数据根据字段值分组排序

    JavaScript数据排序,根据数据中的字段,自定义排序方式,实现数据根据不同的字段值分组显示

    JS根据json数组多个字段排序及json数组常用操作

    总结来说,JS处理JSON数组涉及到的关键概念包括数组的`sort()`、`filter()`、`splice()`、`indexOf()`和`push()`方法,以及自定义比较函数用于排序。了解并熟练掌握这些方法对于高效地处理数据至关重要,无论是在...

    jssort:JavaScript排序方法,将按给定数组中对象的多个字段进行排序

    jsSort v0.0.5 jsSort是一种通用的排序方法,可以通过多个属性对对象数组进行排序。概述jsSort的公共API归结为一个名为sortByMultiple的方法。 此方法采用两个参数,每个参数都是数组。 sequence :要排序的数组。 ...

    jquery 分布 字段排序

    标签"jquery ajax 分布 js 字段排序 实例"为我们提供了更详细的关键词,"js"指的是JavaScript,这里与jQuery一起使用,表明是JavaScript的上下文。"实例"再次强调了有实际操作的代码示例。 在提供的文件名"jquery....

    基于JavaScript实现Json数据根据某个字段进行排序

    下面是一个实现JSON数据根据某个字段排序的函数示例: ```javascript function jsonSort(array, field, reverse) { // 检查输入是否有效 if(array.length || !field || typeof array[0] !== "object") return ...

    JSON 数字排序多字段排序介绍

    在IT行业中,数据排序是一项基础且重要的...总的来说,对JSON数据进行数字排序和多字段排序是通过自定义比较函数实现的,这涉及到对数据类型的处理和逻辑判断。理解这些概念有助于在实际开发中更高效地处理和组织数据。

    vue+element-ui实现穿梭框数据自定义排序

    在本文中,我们将深入探讨如何使用Vue.js框架与Element-UI库来实现穿梭框(Transfer)数据的自定义排序功能。Element-UI是基于Vue.js的一套丰富的UI组件库,其中包括了穿梭框组件,它常用于在两个列表之间进行数据的...

    Dojo 自定义后台排序

    这个过程涉及到了`sort`方法,它可以接受一个或多个排序对象,每个对象包含字段名和排序方向(升序或降序)。 然而,有时候我们需要自定义排序逻辑,比如处理复杂的数据类型或者实现特定的排序算法。这时,我们可以...

    基于jquery js自定义sql条件查询.rar

    在这个过程中,版权说明.xlsx文件可能是项目相关的法律文件,而基于jquery js自定义sql条件查询.zip可能是包含源代码、样式文件和其他资源的压缩包,用于实现上述功能。在实际开发中,确保遵循版权规定,正确引用和...

    js 關於跨域訪問的問題 unoin 之後排序問題

    在JavaScript(JS)中,跨域访问是一个常见的问题,它涉及到浏览器的安全策略,因为默认情况下,浏览器禁止一个源(域名)的脚本访问另一个源的数据,以防止恶意网站窃取数据。解决跨域问题通常有以下几种方法: 1....

    JS 做的表格数据排序。。。。。。

    5. **多列排序**:高级的库可能支持多列排序,允许用户按多个字段排序,如先按年龄升序,再按名字降序。 6. **性能优化**:由于DOM操作可能会有性能影响,优秀的库会使用虚拟DOM或者最小化DOM操作次数来提升性能。 ...

    前端 JSON 数据 排序

    6. **扩展应用**:除了直接排序整个数组,还可以对子集或过滤后的数据进行排序,或者根据多个字段进行复合排序。这需要在比较函数中处理多个条件。 7. **兼容性问题**:虽然`Array.prototype.sort()`在所有现代...

    js 图片排序 --点点滴滴

    在JavaScript(JS)中,图片排序是一个常见的需求,特别是在网页动态展示或图像处理的应用中。本文将深入探讨如何使用JS实现图片排序,并分享一些实践中的点点滴滴。 首先,我们需要理解图片排序的基本概念。通常,...

    js数字文本排序.rar

    此外,对于复杂的排序需求,比如根据多个字段或自定义规则排序,可能还需要使用更高级的策略。 总之,“js数字文本排序.rar”这个资源提供了一个关于JavaScript中数字文本排序的基础教程,帮助开发者理解和应用...

    js分页+列表排序+属性显示

    列表排序允许用户按照特定字段对数据显示进行升序或降序排列。在JavaScript中,可以使用数组的`sort()`方法,配合自定义比较函数来实现。比较函数接收两个参数,返回值决定了排序顺序。例如,对于数字列表,可以...

    jsp页面表格排序 js文件

    综上所述,`jsp页面表格排序 js文件`的实现涵盖了JavaScript的DOM操作、事件处理、数据排序、DOM更新等多个核心技能。通过熟练掌握这些技术,开发者可以创建出高效、交互性强的表格排序功能,提升用户在查看和管理...

    深入理解js数组的sort排序

    废话少说直接上代码: &lt;body&gt; sort()对数组排序,不开辟新的内存,对原有数组元素进行调换 1、简单数组简单排序 [removed] var arrSimple=new Array(1... 2、简单数组自定义排序 &lt;script type=tex

    python通过对字典的排序,对json字段进行排序的实例

    例如,如果我们有一个包含多个对象的数组,每个对象都有一个名为`age`的字段,我们可能想根据这个字段对数组进行排序。在JavaScript中,我们可以定义两个比较函数,一个用于升序排序,另一个用于降序排序: ```...

    jquery flexigrid 支持前台排序

    然而,上述示例中的排序功能是基于服务器的,即数据在返回时已经按照指定的字段和顺序进行了排序。为了实现客户端排序,我们需要引入jQuery Tablesorter插件。Tablesorter是一个轻量级的jQuery插件,它可以对HTML...

    jQuery自定义添加编辑删除表单模块及拖拽排序代码

    同时,它还可能引入了jQuery库和自定义的JavaScript文件(可能命名为`js/main.js`或类似的名称)。 JavaScript文件(如`js`目录下的文件)是项目的核心逻辑,包含了实现上述功能的代码。它可能包括了事件监听器的...

Global site tag (gtag.js) - Google Analytics