ExtJs中文排序函数方法详解
在ExtJs框架中，实现中文排序功能是一件非常重要的事情。今天，我们将详细介绍如何使用ExtJs实现中文排序，特别是使用Ext.data.Store.prototype.createComparator()函数来实现中文排序。
让我们来了解 Ext.data.Store.prototype.createComparator()函数的作用。这个函数是ExtJs框架提供的用于生成比较器的函数，它可以根据sorters参数来生成比较器。sorters参数是一个数组，每个元素都是一个sorter对象，sorter对象有两个属性：property和direction。property属性是要排序的字段，direction属性是排序的方向，可以是ASC（升序）或DESC（降序）。
现在，让我们来实现中文排序功能。我们将重写Ext.data.Store.prototype.createComparator()函数，使其支持中文排序。下面是实现中文排序的代码：
```javascript
Ext.data.Store.prototype.createComparator = function(sorters){
return function(r1,r2){
var s = sorters[0],
f = s.property;
var v1 = r1.data[f],
v2 = r2.data[f];
var result = 0;
if(typeof(v1) == 'string'){
result = v1.localeCompare(v2);
if(s.direction == 'DESC'){
result *= -1;
}
}else{
result = sorters[0].sort(r1,r2);
}
var length = sorters.length;
for(var i = 1;i < length; i++){
s = sorters[i];
f = s.property;
v1 = r1.data[f];
v2 = r2.data[f];
if(typeof(v1) == 'string'){
result = result || v1.localeCompare(v2);
if(s.direction == 'DESC'){
result *= -1;
}
}else{
result = result || s.sort.call(this,r1,r2);
}
}
return result;
}
}
```
在上面的代码中，我们首先获取sorters数组的第一个元素，然后根据property属性获取要排序的字段的值。接着，我们使用localeCompare()函数来比较两个字符串的大小。如果direction属性是DESC，那么我们就将比较结果乘以-1，以实现降序排序。我们返回比较结果。
现在，让我们来看一个使用示例。假设我们有一个表格，表格的数据如下：
```javascript
var chineseData = [
['1','啊','descn1'],
['2','啵','descn2'],
['3','呲','descn3'],
['4','嘚','descn4'],
['5','呃','descn5']
];
```
我们可以使用以下代码来创建一个数据存储对象：
```javascript
var store = Ext.create('Ext.data.ArrayStore',{
data:chineseData,
fields:[
{name:'id',mapping:0},
{name:'name',mapping:1},
{name:'descn',mapping:2}
],
sorters:[{property:'name',direction:'ASC'}]
});
```
在上面的代码中，我们创建了一个ArrayStore对象，并将数据设置为chineseData数组。然后，我们设置了sorters参数，以便在name字段上进行升序排序。
让我们来创建一个表格，并将数据存储对象绑定到表格上：
```javascript
var grid = Ext.create('Ext.grid.Panel',{
store:store,
columns:[
{header:'编号',dataIndex:'id',width:100 },
{header:'名称',dataIndex:'name',width:100},
{header:'描述',dataIndex:'descn',width:100}
],
renderTo:Ext.getBody()
});
```
在上面的代码中，我们创建了一个GridPanel对象，并将数据存储对象绑定到表格上。我们还设置了表格的列头和宽度。
现在，我们可以运行这个示例，并看到中文排序的效果。
评论0