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

来源：互联网发布：跳跃网络的游戏有哪些编辑：程序博客网时间：2024/05/16 15:53

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

//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/z9IAghgcjBRIIBIAMGLXR2FC2Gi////BwD4gD7X7i0baAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");}

//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);

附例子：

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

1 0