提高 Dojo Grid 的数据处理性能（4）Grid 性能问题的解决方法更新
|
- UID
- 1066743
|
提高 Dojo Grid 的数据处理性能（4）Grid 性能问题的解决方法更新
清单 9 展示了重新定义 onHeaderCellMouseDown 的响应函数的过程。函数定义了一个数组来存放临时变量，并且记录了表头上是否存着“全选”。 接着函数寻找记录需要排序的项目，接着设置此次排序是顺序还是逆序排列。设置完成后，就调用自定义的 sort 函数对数据进行排序。排序完后 对表头进行一定的修改，增加一个向上或者向下的箭头来标识当前表格的某列是按升序还是降序排列，便于用户识别。
清单 9. 重新定义 onHeaderCellMouseDown 的响应函数1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| //Grid.onHeaderCellMouseDown 事件就是鼠标点击表头所触发的事件。
// 我们所要做的就是把这一事件的处理函数重定向到我们自己定义的排序方法。
modelGrid.onHeaderCellMouseDown = function(e){
modelGrid._setStore(null);
var instancesArr = new Array(); // 定义一个数组存放排序临时数据
var allselRrd=dojo.byId('checkcollection').checked;// 记录表头上的“全选”状态
columnSort=e.cellIndex;
var propSort=modelGridLayout[0].cells[e.cellIndex].name; // 记录排序的项目
if(columnSort!=0){
sortAscending=!sortAscending; // 设置正向排序还是逆向排序
for(var i=0;i <modelStore._arrayOfTopLevelItems.length;i++){
instancesArr.push(modelStore._arrayOfTopLevelItems);
}
sortmodelGrid(instancesArr,propSort); // 重写 sort 函数
modelStore._arrayOfTopLevelItems=instancesArr;
modelGrid._setStore(modelStore);
UpdateHeaderView(); // 更新表头
}
dojo.byId('checkcollection').checked=allselRrd;
}
|
清单 10 是我们根据需要重写的排序函数。在这里主要是对数据做了一个分类处理。如果排序数据是数字的话，就按照大小排列。如果排序数据是子母的话，就先把他们转换成小写子母，然后再根据子母顺序进行排序。
清单 10. 重构 Sort 函数1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| // 根据所在列的内容的属性定制适合的 Sort 函数
function sortmodelGrid(arr,propSorter)
{
var comp=1;
var asc=1;
if(sortAscending){
asc=1;}
else{
asc=-1;}
for(var i=0;i < (arr.length);i++){
for(var j=0;j <(arr.length-1-i);j++){
var aProp=eval("arr[j]."+propSorter+"[0]");
var bProp = eval("arr[j+1]."+propSorter+"[0]");
if(IsNumber(aProp)&& IsNumber(bProp)){
// 如果是数字就直接排序
}
else{
// 如果是子母就先转换成小写再排序
aProp= aProp.toLowerCase();
bProp = bProp.toLowerCase();
}
if(aProp > bProp){
comp=1;}
else if(aProp < bProp){
comp=-1;}
else{
comp=0;}
if((comp*asc) >0){
var Itemm=arr[j+1];
arr[j+1]=arr[j];
arr[j]=Itemm;
}
}
}
}
|
清单 11 所做的就是在 Grid 的表头栏上增加一个向上或者向下的箭头来标识当前表格的某列是按升序还是降序排列，便于用户识别。操作的方法主要是通过根据一些 html 属性取出表头的各列的值，对其 html 语言进行修改，插入一个箭头的符号。
清单 11. 更新 Grid 表头视图1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| // 增加一个向上或者向下的箭头来标识当前表格的某列是按升序还是降序排列，便于用户识别
function UpdateHeaderView(){
var docnObj=document.getElementsByTagName("th");
for(var i=0;i < 5;i++){
var docnObjName=modelGridLayout[0].cells.name;
var ret = [ '<div class="dojoxGridSortNode' ];
if(i==columnSort){
// 通过判断 sortAscending 是 true 还是 false 来认知当前是升序还是降序排列
// 根据排列顺序来修改表头的 css
ret = ret.concat([' ',(sortAscending ==true)?'dojoxGridSortUp':'dojoxGridSortDown','">
<div class="dojoxGridArrowButtonChar">',(sortAscending ==true)? '▲':'▼',
'</div ><div class="dojoxGridArrowButtonNode" ></div >' ]);
ret = ret.concat([propSort, '</div >']);
}
else{
ret.push('">');
ret = ret.concat([docnObjName, '</div >']);
}
docnObj.innerHTML=ret.join(" ");
}
}
|
图 4 是 Grid 排序后的一张效果图。可以看到 Grid 中的各项已经在 Device 列上降序排列了。Device 表头上多了一个向下的箭头，表示数据降序排列。
图 4.Grid 排序效果图 |
|
|
|
|
|
