console
onload = function () {
var collator = new Intl.Collator('zh', {
co: 'pinyin'
});
var countries = '阿联,美国,中国,巴西'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
var theGrid = new wijmo.grid.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
});
theGrid.collectionView.sortComparer = function (a, b) {
return wijmo.isString(a) && wijmo.isString(b) && collator
? collator.compare(a, b)
: null;
}
}
<div class="container">
<h1>
排序</h1>
<p>
表格支持通过源<b>CollectionView</b>进行排序.</p>
<p>
默认情况下,单击任何列标题将根据点击的列对数据进行排序。 再次单击相同的列标题将恢复排序顺序。 按住Control键并单击列标题将删除排序.</p>
<p>
您可以使用表格的<b>showSort</b>和<b>allowSorting</b>属性来自定义排序行为。 您可以通过将列的 <b>allowSorting</b>属性设置为false来禁用特定列的排序:</p>
<div id="theGrid"></div>
<div class="panel panel-warning">
<div class="panel-heading">
尽管CollectionView类支持对多个属性进行排序,但表格不提供UI。 如果您需要该功能,您可以构建自己的Excel样式排序对话框. 参见
<a href="http://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/SortingGroupingUI" target="_blank">SortingGroupingUI</a> 示例.
</div>
</div>
</div>
.wj-flexgrid {
height: 150px;
margin:10px 0;
}