SOURCE

console 命令行工具 X clear

                    
>
console
onload = function () {
  var collator = new Intl.Collator('zh', {
                  co: 'pinyin'
              });

  // generate some random data
  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, // show just a marker while resizing
  	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
  });
  // apply collator to grid’s collectionView
              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;
}