请问如何实现表格的服务器端排序

demo只有前端排序的例子，但是如何实现服务器端的表格排序呢？这个基础的问题困扰我多日了，就知道要通过sortingColumn获取排序事件，但是如何阻止默认的前端排序，改成服务器端排序呢？论坛里也没有答案，请版主帮忙解答。

你好，其实sortingColumn事件有个cancel参数，设置为true即可阻止前端的排序执行，参考示例代码：

1.     var theGrid = new wjGrid.FlexGrid('#theGrid', {
   
2.         deferResizing: true,
   
3.         autoGenerateColumns: false,
   
4.         columns: [
   
5.             { binding: 'id', header: 'ID', width: 60, allowSorting: false },
   
6.             { binding: 'country', header: 'Country' },
   
7.             { binding: 'sales', header: 'Sales' },
   
8.             { binding: 'expenses', header: 'Expenses' }
   
9.         ],
   
10.         itemsSource: data,
    
11.         sortingColumn: function(sender, args){
    
12.             console.log(args);
    
13.             args.cancel = true;
    
14.         }
    
15.     });

复制代码

这段代码可以替换掉这个示例的theGrid声明部分即可：
https://demo.grapecity.com.cn/wi ... ing/Overview/purejs

服务器端可以根据需要排序后回传前端排序完成的数据源，
前端拿到数据源重新绑定即可。

KevinChen 发表于 2020-3-16 10:15
你好，其实sortingColumn事件有个cancel参数，设置为true即可阻止前端的排序执行，参考示例代码：

有几个细节问题还是没清楚。如何设置表格的默认排序呢？我看论坛的例子是将allowSorting设置成false，然后view .add(new SortDescritio你（'列名'，true）)。如果这样设置的话，其实排序方式还是取决于ew SortDescritio你（'列名'，true）设置成true或者false，后台的排序结果还是要在前台再排序一遍，由于表格设置了allowSorting为false，点击列也不能触发排序事件了。能不能给个完整的例子，有默认的排序，然后点击列可以服务器端排序的例子，太困扰我了，我还是付费的用户

您好，根据您的描述，我给您的方案是：

1、首先，当数据在页面端加载时，默认是会以dataSource数据源的排列顺序来排序的；

2、如果需要在加载时就自动排序，可以通过theGrid.rows.sort()来实现。参考以下代码：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import * as wjGrid from '@grapecity/wijmo.grid';
   
4. //
   
5. document.readyState === 'complete' ? init() : window.onload = init;
   
6. //
   
7. function init() {
   
8.     //
   
9.     // create some random data
   
10.     var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','), data = [];
    
11.     for (var i = 0; i < countries.length; i++) {
    
12.         data.push({
    
13.             id: i,
    
14.             country: countries[i],
    
15.             active: i % 5 != 0,
    
16.             downloads: Math.round(Math.random() * 200000),
    
17.             sales: Math.random() * 100000,
    
18.             expenses: Math.random() * 50000
    
19.         });
    
20.     }
    
21.     //
    
22.     // create the grid with on-demand sorting
    
23.     var view;
    
24.     var theGrid = new wjGrid.FlexGrid('#theGrid', {
    
25.         itemsSourceChanged: function (s, e) {
    
26.             view = s.collectionView;
    
27.             view.canSort = false; // prevent sorting
    
28.         },
    
29.         sortedColumn: function (s, e) {
    
30.             view.canSort = false; // prevent sorting
    
31.             view.sourceCollection = view.items; // copy sorted values
    
32.         },
    
33.         alternatingRowStep: 0,
    
34.         itemsSource: data
    
35.     });
    
36.     //
    
37.     // allow sorting by mouse click
    
38.     theGrid.hostElement.addEventListener('mousedown', function (e) {
    
39.         if (theGrid.hitTest(e).panel == theGrid.columnHeaders) {
    
40.             view.canSort = true;
    
41.         }
    
42.     }, true);
    
43. 
    
44.     theGrid.rows.sort(function(a, b){
    
45.         return -1;
    
46.     });
    
47. }
    

复制代码

这段代码可以完全拷贝到这个示例上运行：
https://demo.grapecity.com.cn/wi ... ng/On-demand/purejs

参考API：
https://demo.grapecity.com.cn/wi ... ollection.html#sort

KevinChen 发表于 2020-3-18 18:04
您好，根据您的描述，我给您的方案是：

1、首先，当数据在页面端加载时，默认是会以dataSource数据源的 ...

我的用的版本是5.0171.282，运行不了。报错，不支持alternatingRowStep，初始化的时候没有执行itemsSourceChanged，报错。
view.sourceCollection = view.items; // copy sorted values 把服务器后台的Data， view.sourceCollection = Data 这样赋值就ok么？默认排序的样式如何处理啊？在theGrid.rows.sort函数里面处理么？这么常见第一个功能，为啥没有一个完整的例子么？太难受了。
theGrid.rows.sort(function(a, b){
        return -1;
    });

我觉得wijmo插件功能特别强大，性能也很好。就是文档写的太差了，基本的例子也没有，简单的一个排序就折腾好几天

您好，可能咱们在交流上有一些相互没有特别清楚的地方，如果这个问题仍然对您有困扰，欢迎拨打029-88331988-620，期待与您详细沟通。