GridManager排序详解

GridManager排序,GridManager,GridManager排序详解,GridManager排序使用,GridManager组合排序

拭目以待 发布于

注意: GridManager 表格排序是需要后端支撑的. 

排序相关配置项

supportSorting: 配置是否支持排序功能

isCombSorting: 用于配置是否使用组合排序功能

sortUpText: 更改排序操作所使用的升序标识

sortDownText: 配置排序操作所使用的降序标识

sortKey: ajax请求中排序字段所使用的前缀

sortingBefore: 排序执行前事件,在ajax请求发送前触发

sortingAfter: 排序执行后事件,在ajax请求发送前触发

setSort: 手动设置排序方法(非用户触发时)

排序初始化

1、设置配置项 supportSorting = true

2、通过配置项( columnData ) 中增加排序标识( sorting )指定使用 ASC(升序) 或 DESC(降序) 排序。

HTML:

  <table></table>

JS:

var table = document.querySelector('table');
var TGM = table.GM({
        ,gridManagerName: 'test'
        ,isCombSorting: false // 使用非组合排序方式
        ,height: '400px'
        ,supportAjaxPage:true // 启用分页
        ,supportSorting: true // 启用排序
        ,ajax_url: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList'  // 这个是我写的一个数据地址, 主要用于测试
        ,ajax_type: 'POST'
        ,query: {pluginId: 1}
        ,pageSize:30response.list = response.data;
        ,columnData: [
            {
                key: 'name',
                remind: 'the name',
                width: '100px',
                align: 'right',
                text: '名称',
                sorting: '' // 开启排序, 但是不指定排序状态。 在不触发这一列的排序前, 请求参数中将不会存在该字段的排序信息
            ,{
                key: 'info',
                remind: 'the info',
                text: '使用说明'
            },{
                key: 'url',
                remind: 'the url',
                text: 'url'
            },{
                key: 'createDate',
                remind: 'the createDate',
                width: '100px',
                text: '创建时间',
                sorting: 'DESC', // 开启排序,并且设置初始排序为 DESC(降序)
                template: function(createDate, rowObject){
                    return new Date(createDate).format('YYYY-MM-DD HH:mm:ss');
                }
            },{
                key: 'lastDate',
                remind: 'the lastDate',
                width: '100px',
                text: '最后修改时间',
                sorting: '',  // 开启排序, 但不设置初始排序。 在不触发这一列的排序前, 请求参数中将不会存在该字段的排序信息
                template: function(lastDate, rowObject){
                    return new Date(lastDate).toLacaleString();
                }
            }
        ]
});


排序如何工作

1、排序操作触发后, 由 GridManager 向后端发起接口调用; 该请求将包含排序字段.

2、后端解析请求, 并返回相应的数据。


组合排序 与 非组合排序

配置方式上仅是字段 isCombSorting 配置为 true 或 false。

isCombSorting === true: 使用组合排序; 此时触发排序操作,后端将会接到当前表格中全部的有效排序字段。

isCombSorting === true: 不使用组合排序; 此时触排序操作,后端将只会接到最后一次触发排序的字段。

需要注意的是,如果在配置为 false 的情况下, 及在 columnData 中对多个列指定了明确的排序信息(ASCDESC)。 那么在第一次(仅第一次)进入页面时,仍会将这些信息传递。


排序传递参数的生成规则

以上为例,请求中将存在创建时间列的排序信息: sort_createDate:DESC,如图:

从上图可以看出,请求中的排序字段规则为: 'sort_' + key , sort_ 与 key分别对应: 

sort_: 可通过配置项 sortKey 进行配置

key: 初始化时 columnData 中所指定的列标识。


手动触发排序方式

GridManager为这种方式提供了setSort方法,调用方式如下:

document.querySelector('table').GM('setSort',sortJson,callback, refresh);

详细请参考 API-setSort


GridManager API

GridManager github