w2ui onSort 方法排序问题

如何开启排序

将下面field="fname"所在列加入sortable: true属性,这样列就开启了排序功能了.

columns: [ { field: 'fname', caption: 'First Name', size: '150px', info: true, sortable: true }, ]

不过此时首次点击列显示默认排序是由低到高,但往往我们的需求是由高到低

因此我们需要通过onSort方法来实现由高到低的需求

onSort的用法及作用

当用户应用排序时调用, 您可以在对象创建期间添加事件侦听器

onSort: function(event) { console.log(event); }

event会返回我们想要的属性,属性如下

{ 
  direction: null, 
  done: ƒ (handler),
  doneHandlers: [],
  field: "fname", 
  isCancelled: false,
  isStopped: false,
  multiField: false,
  onComplete: null,
  phase: "before",
  preventDefault: ƒ (), 
  stopPropagation: ƒ (), 
  target: "grid",
  type: "sort"
  }

在触发事件的默认操作之前，将调用事件处理程序。您可以通过调用取消默认操作 event.preventDefault（）。

我们通过返回值,会观察到field字段,就是我们要绑定列的字段.

根据字段field我们可以处理排序了,此时需要了解一个属性sortData

sortData的用法及作用

下面是sortData的格式

sortData: [ { field: ‘lname’, direction: ‘asc’ }, { field: ‘fname’, direction: ‘desc’ } ]

其中field为绑定的字段,direction为排序方式,asc为下箭头由高到低,desc为上箭头由低到高

如果用户单击列（或按住Shift键并单击几列），并且该列是可排序的，则网格将生成排序对象，并将其提交给数据源以应用排序。 作为开发人员，您可以在对象创建期间定义初始排序。

$('#grid').w2grid({
                    name : 'grid', 
                    columns: [ ], 
                    records: [ ], 
                    sortData: [ { field: 'lname', direction: 'asc' }, { field: 'fname', direction: 'asc' } ] 
                });

您还可以在运行时通过更改此数组来更改排序形式的JavaScript。不要忘记调用.refresh方法在屏幕上刷新它们。如果数据源是本地数据，则网格将使用此.sortData数组对记录进行排序。如果数据源是远程的，网格将把.sortData数组提交给服务器进行排序。

如何您使用的是自己封装的ajax,再刷新refresh时,需要关闭本地排序

this.localsort = function () { return this; };

上述方法需要在onSort方法里重写,阻止本地排序.

此外在处理sortData时,更新.refresh方法会出w2ui生成的dom闪二次排序的现象,需要用定时期延时1s进行数据刷新

    var defalutOrders = {};

    defalutOrders["fname"] = 1;

    $('#grid').w2grid({
        name: 'grid',
        columns: [
            { field: 'fname', caption: 'First Name', size: '150px', info: true ,sortable: true },
            { field: 'lname', caption: 'Last Name', size: '150px', sortable: true },
            { field: 'email', caption: 'Email', size: '200px', sortable: true },
            { field: 'sdate', caption: 'Start Date', size: '200px', sortable: true  }
        ],
        "records": [
            { "recid": 1, "fname": "John", "lname": "Doe", "email": 1, "sdate": "4/1/2012" },
            { "recid": 2, "fname": "Stuart", "lname": "Motzart", "email": 2, "sdate": "4/2/2012" },
            { "recid": 3, "fname": "Jin", "lname": "Franson", "email": 3, "sdate": "4/3/2012" },
            { "recid": 4, "fname": "Susan", "lname": "Ottie", "email": 5, "sdate": "4/4/2012" },
            { "recid": 5, "fname": "Kelly", "lname": "Silver", "email": 4, "sdate": "4/5/2012" },
            { "recid": 6, "fname": "Francis", "lname": "Gatos", "email": 8, "sdate": "4/6/2012" },
            { "recid": 7, "fname": "Mark", "lname": "Welldo", "email":10, "sdate": "4/7/2012" },
            { "recid": 8, "fname": "Thomas", "lname": "Bahh", "email": 7, "sdate": "4/8/2012" },
            { "recid": 9, "fname": "Sergei", "lname": "Rachmaninov", "email": 6, "sdate": "4/9/2012" }
        ],
        onSort: function (event) {
            debugger;
            let field = event.field;
            //选择排序的方向需要自行处理，不处理则显示默认的上箭头
            if (defalutOrders[field] && defalutOrders[field] != undefined) {
                defalutOrders[field] = defalutOrders[field] == 1 ? 0 : 1;
            } else {
                defalutOrders[field]=1;
            }

            w2ui["grid"].sortData[0] = { field: field, direction: defalutOrders[field] == 1 ? "asc" : "desc" };

            阻止本地排序
            //this.localsort = function () {
            //    return this;
            //};
            /// 自己写的ajax,需要自己提交排序
            //延时,解决w2ui dom闪的问题
            //setTimeout(function () {
            //    //此处可以用来提交更新, 刷新前记得更新数据
            //    w2ui["grid"].add(list)
            //    w2ui["grid"].refresh()
            //    $.refresh()  会刷新localsort ,所以需要本地重写js阻止
            //}, 100);
        }
    });
});

上面代码未使用为w2ui自带的提交方式，可跟据自己的需求自行封装ajax