一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js（附ajax例子）

港控/mmm° 2021-09-11 05:12 561阅读 0赞

由于项目上需要，自己花时间写了一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js，  
仿EasyUI，数据列启用自定义排序后，该列标题后将出现向上或者向下的三角形，点击列标题设置新的排序参数。使用方法都直接写在js里了，没什么技术难度，就直接上代码吧。  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]

//css文件
    /********************************************************************************
     * Copyright (C) Corporation. All rights reserved.
     * 
     * Author      :  lihaitao 
     * Email        : lhtzbj12@126.com
     * Create Date  :  2016-11-15
     * Description  : 表格自定义排序插件的样式
     * 
     *          
     * Revision History:
     *      Date         Author               Description
     *      2016-11-15   lihaitao               create
     *  
    
    *********************************************************************************/
    
    .sortable-sort-default, .sortable-sort-asc, .sortable-sort-desc {
     display: inline-block;
     width: 8px !important;
     height: 11px !important;
     background-image: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAALCAIAAADN+VtyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAABzSURBVChTY/gPAT9uLY4J6Lv4A8r9/x8sARQNFGUAAnaTTpgcA0IUAmByDBtikUQhACzHcHbLakxw9B7EDmyAod1CHgNoF+78xHBxhhuaJewmrWe/gIz6gSwHEQUZBTYQKgcXBQK45T9uHdx7HSb6//9/AFztmH+QWaTdAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
     background-position: center center;
     background-repeat: no-repeat;
    }
    
    .sortable-sort-asc {
     background-image: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAIAAAD38zoCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAABFSURBVBhXY/gPAwsv/tjVUfj//wsIFyox4+IPBlE3BgaGDbGiEDmQBFwUAiByDHOv/EcWhQCgHMOaWz9SU+tSUcHhKYUAuK0+12A7dLIAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
    }
    
    .sortable-sort-desc {
     background-image: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAIAAAD38zoCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAABESURBVBhXYzg8pTAVHdStufWDYUOsKAMaEHWbe+U/w///L1DkRN1mXPzx/z9IAghgcjBRIIBIAMGLXR2FC2GiBwD4gD7X7i0baAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
    }

//js文件
    /******************************************************************************** * Copyright (C) Corporation. All rights reserved. * * Author : lihaitao * Email : lhtzbj12@126.com * Create Date : 2016-11-15 * Description : 表格自定义排序插件 * * * Revision History: * Date Author Description * 2016-11-15 lihaitao create * *********************************************************************************/
    //自定义排序插件，传入当前表格加载数据的排序规则orderby、direction，以及回调函数
    //callback为点击th后激发的回调函数，给回调传两个值，新的orderby和direction
    //有两种方法让th启用自定义排序
    //一、在DOM中，给th添加属性data-field(数据库中表字段)和data-sortable="true"
    //二、调用插件的初始化语句中给参数columns附值
    //两种方法可以同时使用，如果对同一th使用了两种方法，则以columns有效
    //要求表格基本结构
    /* <table id="dataGrid"> <thead> <tr> <th data-field="Id" data-sortable="true">ID</th> //第一种方法让th启用自定义排序 data-field为对应数据库中表字段 <th>开始时间</th> <th>结束时间</th> <th>创建时间</th> </tr> </thead> <tbody> //tr </tbody> </table> //调用实例 $("#dataGrid").Sortable({ orderby:'CreateTime', //当前数据已按CreateTime排序 direction:'desc', //当前数据已按降序排序 columns:[{ index: 1, field: 'StartTime' }, { index: 3, field: 'CreateTime' }], //第二种方法让th启用自定义排序：表格中可用于排序的列index第th的索引,field为对应数据库中表字段 callback:function(orderby,direction){ //回调函数，当点击th时回调 //do something //orderBy,direction为点击后要向服务器请求的新参数 } }); */
    (function ($) { 
        $.fn.Sortable = function (options) { 
            var table = this;
            var orderby = options.orderby;
            var direction = options.direction;
            var callback = options.callback;
            var columns = options.columns;
            if (columns == undefined)
                columns = [];
            //找出表中th有属性 data-field 和 data-sortable=‘true’的th,填充columns
            $(this).find("th").each(function (i, e) { 
                if ($(e).attr("data-field") != null &&
                    $(e).attr("data-field").length > 0 &&
                    $(e).attr("data-sortable") != null &&
                    $(e).attr("data-sortable") == "true") {
                    var entity = { index: i, field: $(e).attr("data-field") };
                    //判断当前th是否在columns已存在，不存在则加入
                    if ($(columns).filter(function (ci, ce) {  return ce.index == i; }).length == 0) {
                        columns.push(entity);
                    }
                }
            })
            $(columns).each(function (i, c) { 
                var th = $(table).find("th:eq(" + c.index + ")");
                if (th.length == 0) return true;
                e = th[0];
                $(e).attr("data-field", c.field);
                //设置鼠标样式
                $(e).css("cursor", "pointer");
                //添加i
                var sonI = $(e).children("i");
                if (sonI.length == 0) $(e).append("<i></i>");
                sonI = $(e).children("i").removeClass();
                //判断是否当前已经排序字段
                var nextdirection = 'asc';
                if (c.field == orderby) {
                    if (direction == "asc") {
                        sonI.addClass("sortable-sort-asc");
                        nextdirection = "desc";
                    } else {
                        sonI.addClass("sortable-sort-desc");
                        nextdirection = "asc";
                    }
                }
                else {
                    sonI.addClass("sortable-sort-default")
                }
                //添加点击事件，必须先off，否则会重复触发
                $(e).off('click');
                $(e).on('click', function () { 
                    if (callback) {
                        callback(c.field, nextdirection);
                    }
                });
    
            });
            return this;
        };
    })(jQuery);

附例子：

[点这里去下载][Link 1]  
附的例子是asp.net mvc的，但插件是基于jQuery 的，当然可以用于其他语言的。

[SouthEast]: /images/20210809/7e7cc2aaaed349728eaeb84b68af2bc5.png
[SouthEast 1]: /images/20210809/6f7c54baba92447b9222138594c2bceb.png
[Link 1]: http://download.csdn.net/detail/lhtzbj12/9709814