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

收藏

本帖最后由迷彩于 2020-3-15 08:37 编辑

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

KevinChen · KevinChen

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

var theGrid = new wjGrid.FlexGrid('#theGrid', {
deferResizing: true,
autoGenerateColumns: false,
columns: [
{ binding: 'id', header: 'ID', width: 60, allowSorting: false },
{ binding: 'country', header: 'Country' },
{ binding: 'sales', header: 'Sales' },
{ binding: 'expenses', header: 'Expenses' }
],
itemsSource: data,
sortingColumn: function(sender, args){
console.log(args);
args.cancel = true;
}
});

复制代码

这段代码可以替换掉这个示例的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，点击列也不能触发排序事件了。能不能给个完整的例子，有默认的排序，然后点击列可以服务器端排序的例子，太困扰我了，我还是付费的用户

KevinChen · KevinChen

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

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

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

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import * as wjGrid from '@grapecity/wijmo.grid';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// create some random data
var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','), data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
active: i % 5 != 0,
downloads: Math.round(Math.random() * 200000),
sales: Math.random() * 100000,
expenses: Math.random() * 50000
});
}
//
// create the grid with on-demand sorting
var view;
var theGrid = new wjGrid.FlexGrid('#theGrid', {
itemsSourceChanged: function (s, e) {
view = s.collectionView;
view.canSort = false; // prevent sorting
},
sortedColumn: function (s, e) {
view.canSort = false; // prevent sorting
view.sourceCollection = view.items; // copy sorted values
},
alternatingRowStep: 0,
itemsSource: data
});
//
// allow sorting by mouse click
theGrid.hostElement.addEventListener('mousedown', function (e) {
if (theGrid.hitTest(e).panel == theGrid.columnHeaders) {
view.canSort = true;
}
}, true);
theGrid.rows.sort(function(a, b){
return -1;
});
}

复制代码

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

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

迷彩 · 迷彩

本帖最后由迷彩于 2020-3-20 22:12 编辑

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插件功能特别强大，性能也很好。就是文档写的太差了，基本的例子也没有，简单的一个排序就折腾好几天

KevinChen · KevinChen

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

		自动登录	找回密码
密码			立即注册

[已处理] 请问如何实现表格的服务器端排序

6 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章