Java 改造ayui表格组件实现多重排序

 更新时间:2021年04月26日 09:47:20   作者:畴刓  
layui 的表格组件目前只支持单列排序,在实际应用中并不能很好的支撑我们的业务需求。今天一时手痒,决定改造一番以支持多重排序。

  实现思路也比较简单,只需要用一个数组来存放所有排序的列,再把这个数组传到后端(后端排序)进行排序即可。沿用一般的使用习惯,按住 shift 键点击表头可增加排序列,按住 ctrl 键点击表头可减少排序列。话不多说,先上最终效果图:

1. 定义排序列数组

我当前用的是 2.5.6 版本,源码之前为适应业务需求也做过相应修改,所以下文说到的行数只是个大概数。

为兼容之前单列排序的使用习惯,我们增加一个 multiSort 的配置属性,默认为 false,为 true 时才开启多列排序。修改源码大概第 235 行,增加两个属性 multiSort、sortCols。

//构造器
, Class = function (options) {
    var that = this;
    that.index = ++table.index;
    that.mutlSort = false;
    that.sortCols = []; // 组合排序列集合
    that.config = $.extend({}, that.config, table.config, options);
    that.render();
};

2. 修改表头点击事件

之前单列排序是根据点击的表头,将表头对应的字段和排序类型(asc、desc)做为参数传给 sort 方法。这里我们需要稍做修改,当按住 shfit 键点击表头时增加排序列,当按住 ctrl 键点击表头时减少排序列。修改源码大概 1511 行

 //排序
th.on('click', function (e) {
    var othis = $(this)
    , options = that.config
    , elemSort = othis.find(ELEM_SORT)
    , nowType = elemSort.attr('lay-sort')
    , field = othis.data('field')
    , type;

    if (!elemSort[0] || resizing === 1) return resizing = 2;

    if (nowType === 'asc') {
        type = 'desc';
    }
        // Fix# 排序只有 desc 和 asc 两种模式
        //else if (nowType === 'desc') {
        //    type = null;
        //}
    else {
        type = 'asc';
    }

    var sorts = JSON.parse(JSON.stringify(that.sortCols));
    if (e.shiftKey) {
        // 加入组合排序
        var inArray = false;
        for (var i = 0; i < sorts.length; i++) {
            if (sorts[i].field == field) {
                sorts[i].type = type;
                inArray = true;
                break;
            }
        }
        if (!inArray)
            sorts.push({ field: field, type: type });

    } else if (e.ctrlKey) {
        // 从组合排序移除
        for (var i = 0; i < sorts.length; i++) {
            if (sorts[i].field == field) {
                sorts.splice(i, 1);
                break;
            }
        }
    }
    else {
        // 单列排序
        sorts = [{ field: field, type: type }];
    }
    // 单列排序配置
    if (!options.multiSort)
        sorts = [{ field: field, type: type }];
    that.sort(sorts, null, true);

}).find(ELEM_SORT + ' .layui-edge ').on('click', function (e) {
    var othis = $(this)
    , index = othis.index()
    , field = othis.parents('th').eq(0).data('field');
    // 阻止事件冒泡
    layui.stope(e);
    if (index === 0) {
        that.sort([{ field: field, type: 'asc' }], null, true);
    } else {
        that.sort([{ field: field, type: 'desc' }], null, true);
    }
});

3. 修改表格排序方法

改造前的 sort 方法是用 filed 和 type 签名,多重排序我们要用排序数组 sortCols 做签名,修改源码大概第 1076 行:

//数据排序
Class.prototype.sort = function (sorts, pull, formEvent) {

    var that = this
    , res = {}
    , options = that.config
    , filter = options.elem.attr('lay-filter')
    , data = table.cache[that.key], thisData;

    // 如果欲执行的排序已在状态中,则不执行渲染
    if (sorts.length == that.sortCols.length) {
        var sorted = true;
        for (var i = 0; i < sorts.length; i++) {
            if (sorts[i].field != that.sortCols[i].field || sorts[i].type != that.sortCols[i].type) {
                sorted = false;
                break;
            }
        }

        if (sorted) return;
    }

    that.layHeader.find('th').each(function (i, item) {
        // 清除其它标题排序状态
        $(item).find(ELEM_SORT).removeAttr('lay-sort');

        var field = $(item).data('field');
        var cols = $.grep(sorts, function (obj) { return obj.field === field });
        if (cols.length > 0) {
            $(item).find(ELEM_SORT).attr('lay-sort', cols[0].type || null);
        }
    });

    delete that.sortCols;
    that.sortCols = sorts;

    //默认为前端自动排序。如果否,则需自主排序(通常为服务端处理好排序)
    if (options.autoSort && sorts) {

        var clone = JSON.parse(JSON.stringify(data || []));
        clone.sort(function (dataRow1, dataRow2) {
            for (var i = 0, l = sorts.length; i < l; i++) {
                var field = sorts[i].field;
                var sign = sorts[i].type === 'asc' ? 1 : -1;
                var value1 = dataRow1[field], value2 = dataRow2[field];
                var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
                if (result != 0) {
                    return result;
                }
            }
            return 0;
        });
        thisData = clone;
    }

    // 输出表格数据
    if (options.autoSort || !formEvent) {
        res[options.response.dataName] = thisData || data;
        that.renderData(res, that.page, that.count, true);
    }

    if (formEvent)
        layui.event.call(that, MOD_NAME, 'sort(' + filter + ')', sorts);
};
  同时修改源码大概 686 行:

//获得数据
Class.prototype.pullData = function (curr) {
    var that = this
    , options = that.config
    , request = options.request
    , response = options.response
    , sort = function () {
        if (typeof options.initSort === 'object') {
            //that.sort(options.initSort.field, options.initSort.type);
            that.sort(options.initSort);
        }
    };
	// 此处略...
}

4. 修改后台传参

传递给后台的参数同样需要改成数组,后端接收的代码同时也改成接收数组

// 监听列排序
var layAttribute = self._$element.attr('lay-filter');
layui.table.on('sort(' + layAttribute + ')', function (obj) {
    // 过滤条件
    var sortFilter = $.extend({}, kom.toJS(self.loadCondition || {}));
    // 过滤条件+排序字段(注意这里是传递的是数组)
    sortFilter.sorts = $.map(obj, elem => {
        return {
            fieldName: elem.field,
            order: elem.type
        };
    });

    // 再一次自定义过滤条件
    if (self.options.parseFilter)
        sortFilter = self.options.parseFilter.call(self, sortFilter);

    // 更新 table 组件配置
    self.options.where = sortFilter;
    self.table.config.where = sortFilter;
    self.table.inst.config.where = sortFilter;
    // 排序说明
    self.options.initSort = obj;
    self.table.config.initSort = obj;
    self.table.inst.config.initSort = obj;

    // 加载数据
    self.table.inst.pullData(self.table.inst.page);
});


// 后端代码
public async Task<PagedList<Log>> GetPagedList([FromUri]Paging paging, [FromUri]Log condition, [FromUri]Sort[] sorts)
{
    return await svc.GetPagedList(paging, condition, sorts);
}

  至此,整个改造工作完成,整个过程也相对简单。主要是脚勤手快,想得到就能做得出 ~..~。layui 在国内的社区还是挺成熟,不过个人感觉就是有点封闭,希望这个国产的框架组件越做越好,越走越远。

  代码单独拎出来临时放在 https://github.com/TANZAME/TZM.XFramework/tree/master/.nuget 下面,仅做抛砖引玉,希望对有需要的同学有帮助。 

以上就是Java 改造ayui表格组件实现多重排序的详细内容,更多关于Java 改造ayui实现多重排序的资料请关注脚本之家其它相关文章!

相关文章

  • 详解 JAVA的回调机制CallBack

    详解 JAVA的回调机制CallBack

    最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义,本文给大家介绍JAVA的回调机制CallBack,感兴趣的朋友一起学习
    2016-04-04
  • 详解SpringMVC的拦截器链实现及拦截器链配置

    详解SpringMVC的拦截器链实现及拦截器链配置

    拦截器(Interceptor)是一种动态拦截方法调用的机制,在SpringMVC中动态拦截控制器方法的执行。本文将详细讲讲SpringMVC中拦截器参数及拦截器链配置,感兴趣的可以尝试一下
    2022-08-08
  • SpringMVC的五大核心组件用法及说明

    SpringMVC的五大核心组件用法及说明

    这篇文章主要介绍了SpringMVC的五大核心组件用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Spring Boot整合Spring Security简单实现登入登出从零搭建教程

    Spring Boot整合Spring Security简单实现登入登出从零搭建教程

    这篇文章主要给大家介绍了关于Spring Boot整合Spring Security简单实现登入登出从零搭建的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧
    2018-09-09
  • springboot 接口返回字符串带引号的问题解决

    springboot 接口返回字符串带引号的问题解决

    本文主要介绍了springboot 接口返回字符串带引号的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • Java 回调callback举例详解

    Java 回调callback举例详解

    这篇文章主要介绍了Java 回调callback举例详解,软件模块之间总是存在一定的接口,从调用方式上,可以把他们分为三类:同步调用、回调和异步调用
    2022-09-09
  • mybatis相同的sql查询第二次查不出结果问题

    mybatis相同的sql查询第二次查不出结果问题

    这篇文章主要介绍了mybatis相同的sql查询第二次查不出结果问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • Java网络编程基础教程之Socket入门实例

    Java网络编程基础教程之Socket入门实例

    这篇文章主要介绍了Java网络编程基础教程之Socket入门实例,本文讲解了创建Socket、Socket发送数据、Socket读取数据、关闭Socket等内容,都是最基础的知识点,需要的朋友可以参考下
    2014-09-09
  • IntellJ idea使用FileWatch实时编译less文件的方法

    IntellJ idea使用FileWatch实时编译less文件的方法

    这篇文章主要介绍了IntellJ idea使用FileWatch实时编译less文件的相关资料,需要的朋友可以参考下
    2018-02-02
  • Java探索之Thread+IO文件的加密解密代码实例

    Java探索之Thread+IO文件的加密解密代码实例

    这篇文章主要介绍了Java探索之Thread+IO文件的加密解密代码实例,具有一定参考价值,需要的朋友可以了解下。
    2017-10-10

最新评论