GT-Grid 1.0 基础教程(九)

GT-Grid 1.0 基础教程(九)

教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里

第九章: 排序

第一章中的示例 就已经具备排序功能了, 但是只是简单的客户端排序.
客户端排序处理的数据并不一定时"当前页的数据",
而是"所有在客户端的数据",也就是说,当你将数据全部加载到客户端,在客户端进行分页时,客户端排序实际上排列的就是所有数据.

本章将讲解 自定义排序函数 以及如何进行 服务端排序.

将上一章编写的"mydemo8.html"另存为"mydemo9.html".



=========================================



先来说一个 很重要 但是很简单的属性:columns定义中的 "sortable" 属性,
顾名思义,当不希望某一列可排序时,就把那一列的该属性设置为 false, 本例中不希望对"详细信息"列进行排序,那么可如下定义:

var  colsConfig ={

	/* ... 略去其他属性设置 ...*/

	{ id : 'detail'   , header : "详细信息" , width : 120, sortable : false,
		renderer : function(value ,record,columnObj,grid,colNo,rowNo){
			return '&#160;<a href=".?no='+record['no']+'" style="margin-left:3px;" >&#160;'+ record['name'] +' 的详细信息&#160;</a>';
		}
	}
];

=========================================



下面说一说自定义排序函数. GT-Grid 自身只提供了两种数据排序方式 : 按数字数据排序 和 按字符串数据排序.
这两种排序显然无法应对多样的需求, 所以GT-Grid 提供了一个 接口函数,columns定义中的 : getSortValue(  value, recrod )
开发人员重写该接口,就可以实现自定义的更加复杂的排序方式.
例如有这样一个需求 : 按照姓名的字符串长度排序. 那么我们可以这么定义 姓名 列:

var  colsConfig ={

	/* ... 略去其他属性设置 ...*/

	{ id : 'name'    , header : "姓名" , width : 100 ,  editable:false ,  editor: { type :'text' ,validRule : 'R' }	,
		getSortValue : function(value , record){
			return value?value.length:0;
		}		
	},
];

getSortValue函数的两个参数分别为:
  value :当前记录中，该列对应的数据
  record : 排序时的 当前记录.


在上例中, 排序时,取响应数值时就不再是 取记录的"name"值,而为变为了取name的字符串长度,从而实现了按姓名字符长度排序的功能.
在这里就暂时先不列举更复杂的例子了.



=========================================




下面该说一说 服务端排序了. 要使用服务端排序,需要 将 grid的 remoteSort 属性设置为 true.

var gridConfig={
	/* ... 略去其他属性设置 ...*/
	remoteSort :  true
}

下一步要知道 排序信息 传递到后台的格式, 以及后台如何处理这些信息了.

排序信息 是和 load信息 一起提交到后台的 其格式如下(注意看 sortInfo 部分:

{
	action	 : 'load',	
	pageInfo : {
		/* ... 略去pageInfo信息 ...*/
	},

	sortInfo : [
			{ 
				columnId : "排序的列id" , 
				fieldName : "排序的列对应的dataset中的field字段名" ,
				sortOrder : "asc"  // 排序的顺序状态 : 升序"asc"  降序"desc"  默认"defaultsort"
			}
		]
}

大家可能注意到了, sortInfo信息对应的是一个数组, 这是为了将来做多重排序而准备的. 在目前版本(1.1之前),该数组最多只会有一组排序信息.

后台得到这个信息之后, 可以把 sortInfo 转换为一个 List对象.
而这个list的第一个元素 就是排序的信息了, 然后开发人员就可以根据这些排序信息来实现服务端的排序了.
(与服务端结合的完整示例 会有与此相关的参考实现)
看一下示例中的  GridServerHandler 类下的 initSortInfo方法 和 getSingleSort 方法 大家应该可以更好的理解读取sortInfo信息的原理.



=========================================



关于服务端的排序 就先讲到这里, 下一章将讲解的是过滤功能(客户端和服务端)的实现.

.

评论

21 楼 jackey3316 2008-08-25  

extreme component  好像一样的dd嘛~~

20 楼 差沙 2008-08-01  

我觉得，不管是用fins的方法还是用原来的排序方法，道理上来讲都是一样的。

可以理解fins的设计初衷，排序的根本操作是要找到排序的索引值，而fins就是把这个权力交给用户，后面的就不要用户来管了。

QW一直强调常用的sort方法。

其实我觉得sort方法还是有必要提供的，因为很多排序的方法已经封装好了。你想一下，封装一个排序方法很有必要，而封装一个取排序的索引值可能就不那么重要了，因为很多索引值仅仅在排序时才有意义。而一个列表组件跟其他jslib结合的时候更是如此，lib可能会直接给你compare方法，不会给你一个返回索引值方法。就拿QW举的localCompare例子就很有说服力。

所以这个时候就一定要有sort方法了，你说对吧。

其实两个方法都可取的，fins的方法也想的很周到。但是既有的东西还是要满足的，罗马也不是一天造成的，好的框架都是要承上启下的。而且我想信GT-Grid肯定有自己的sort方法，也加到文档里也无妨。

19 楼 fins 2008-07-30  

引用

按照你之前提到的这个原则，这里参与到了排序操作，用户不应该使用扩展显示例，所以你最初举的例子实际上不可能出现。

你的这个不可能出现的假设是错误的, 是会出现的,我遇到过了, 而且gt目前的设计必然会出现这种需求.
我之前也说过"在gt目前的设计下", 你的那种做法 我不会采用 因为很多需求都无法实现.



1 那个你说的类似多重排序的需求是有 而且使用 getSortValue 很容易实现

2 点击A列 但是实际上排序的值 不仅仅是A列直接对应的值,还有肯能使record中的其他的属性值 或者是通过一系列计算得到的值
这个需求也是有的
而且这个需求 实际上非常强大和必要, 可以衍生出很多排序 编组相关的相对高级的技巧

3 实际开发中 我遇到了太多 不知道如何写那个排序方法的人了.



如果 真的有无法满足的需求 例如你说那个 locale比较的 (其实那个取的不是拼音 而是按区位表排列的, 而且它依赖于客户端的操作系统 所以我一直不喜欢用那个东西)
那么也支持你说的那种方法, 只是在客户有确实需求的时候 我才会告诉客户.

最后 我坚持以下观点

引用

希望用户更专注于"在排序时,一条记录,参与排序的值是什么".
因为 这个是排序最核心的东西 , 也是与排序算法 和语言无关的 对排序最自然的理解方式.

而不希望用户去关注 "在排序时,如何决定任意两条之间记录之间的顺序"
更不希望用户去理解和了解 "更多的关于 多重排序等其他的排序细节".

这个话题 stop吧 , 根据我开发 和使用列表的经验:
自定义排序算法/方法 这种情况压根就是不多见的 为了一个不多见的问题 讨论这么多实在有些无意义

18 楼 QuakeWang 2008-07-30  

fins 写道

但是 如果用你的设计 呢? (用户不想使用initValue来扩展列)

fins 写道

那么该如何选择呢?? 一个简单的原则如下:
如果你扩展的列 只是用来显示给用户看 , 而不会参与到 编辑 排序 统计 运算 等数据操作中,
那么使用扩展显示列就可以, 否则就应该使用扩展数据列.

按照你之前提到的这个原则，这里参与到了排序操作，用户不应该使用扩展显示例，所以你最初举的例子实际上不可能出现。

fins 写道

还有我下面的需求 看看你的那个方法怎么实现:

按姓名排序, 姓名相等时, 女性在前,男性在后 ,性别相等时, 年龄小的在前, 年龄大的在后.

你是否有做过用户的实际需求调查？这种功能在微软强大的excel里面也没有实现，这个需求其实就是多重排序，对用户来说便捷的操作是GT-Grid提供多重排序，比如定义用户在按住ctrl时候进行点击就是多重排序：
点击姓名列排序，然后按住ctrl，再点击性别列，然后再点击年龄列，这样就能很自然地达到他的需求，而且用户可以自由地定义进行不同列的组合多重排序，而不需要开发人员预先写死。

在这里开发人员不需要定义任何特别的多重排序方法，他只用定义好单个column就行了。

这2个例子都是脱离实际需求的，我还是看不出来在这里放一个record有它任何的实际用途。

fins 写道

举个例子:
服务端 送过来的 数据 是 "月/日/年" 格式的字符串.显示的时候也是 "月/日/年"

我要对这列进行排序.
实际上这个排序要求对数值进行转换,
要么转换成位数相等的 年/月/日 然后做字符串比较
要么转换成日期格式进行比较
不管怎么转换 这个转换成本是不低的.

一定要缓存,缓存的问题怎么办??让开发人员自己写?

我的建议是不要考虑缓存，因为js Array sort是内置功能，它的效率一定是比写映射功能获取值然后再对值进行排序要来的高，如果你有兴趣的话，不妨单独将这一块缓存＋排序的代码拿出来和Array sort做一个性能测试，我们可以另外开一个话题讨论：看看到底要在什么样的数据量和复杂的数值转换程度下，缓存＋自定义排序会比built in sort性能要好。

17 楼 fins 2008-07-30  

我说:

引用

实际上还有很多更复杂的操作 是我要在 sort 时做的 , 而这些 都不能暴露给客户的, 例如对sort值的缓存 值的类型转换 ... 等等.如果这些都让用户来做, 我绝对对于用户的要求 以及自定义函数的成本太高了.

这里面 数值转换 以及 排序值的缓存 也是很重要的因素.

举个例子:
服务端 送过来的 数据 是 "月/日/年" 格式的字符串.显示的时候也是  "月/日/年"

我要对这列进行排序.
实际上这个排序要求对数值进行转换,
要么转换成位数相等的 年/月/日 然后做字符串比较
要么转换成日期格式进行比较
不管怎么转换 这个转换成本是不低的.

一定要缓存,缓存的问题怎么办??让开发人员自己写?

还有我下面的需求 看看你的那个方法怎么实现:

按姓名排序, 姓名相等时, 女性在前,男性在后 ,性别相等时, 年龄小的在前, 年龄大的在后.

16 楼 fins 2008-07-30  

引用

那这个getSortValue方法是定义在哪里呢？我看了一下下载的代码和文档，没有找到相关的例子。
使用renderer？那么和renderer里面的代码是不是又重复了呢？

用renderer的话确实是重复的

但是 如果用你的设计 呢? (用户不想使用initValue来扩展列)

column :
{
renderer : function(){
    return record[数学]+record[外语];
}
}

dataset的record中根本就没有总成绩这项
也就是说 v1 v2根本就是undefined
    sort : function(v1, v2){  
        ... ...
    }  

15 楼 QuakeWang 2008-07-30  

那这个getSortValue方法是定义在哪里呢？我看了一下下载的代码和文档，没有找到相关的例子。
使用renderer？那么和renderer里面的代码是不是又重复了呢？

fins 写道

那么该如何选择呢?? 一个简单的原则如下:
如果你扩展的列 只是用来显示给用户看 , 而不会参与到 编辑 排序 统计 运算 等数据操作中,
那么使用扩展显示列就可以, 否则就应该使用扩展数据列.

按照你之前提到的这个原则，这里参与到了排序操作，不应该使用扩展显示例，所以你最初举的例子实际上就不可能出现。

14 楼 fins 2008-07-30  

看帖不仔细啊 你 呵呵

我说:

引用

如果由于某种原因 总成绩 并没有在record中, 而且客户也不希望扩展数据列

也就是说 我的意思是 如果用户 不希望 使用initValue 的话.

如果他愿意使用initValue来阔真数据列的话 , 那么根本就没必要写 getSortValue
所以不存在重复的问题

13 楼 QuakeWang 2008-07-30  

fins 写道

引入 record 为的是在排序时 可以取到更多信息:

例如 按 总成绩排序.
如果由于某种原因 总成绩 并没有在record中, 而且客户也不希望扩展数据列

那么 总成绩列的

getSortValue : function(v,record){
   return record.数学成绩+ record.英语成绩;
}

根据下载的示例代码来看，总成绩列应该是通过一个定义加总列来显示的，按照你目前的设计就会变成：

{name : 'total', type: 'float',
    initValue : function(record){
        return record['english'] + record['math'];
    },
    getSortValue : function(v,record){
        return record['english'] + record['math'];
    }
}

这里出现了2次重复的return record['english'] + record['math']代码，这不符合Don't Repeat Yourself原则，顺便问一下，在这里的v会是什么值？

如果是采用我们惯用的sort function，那么代码就可以写成：

{name : 'total', type: 'float',
    initValue : function(record){
        return record['english'] + record['math'];
    },
    sort : function(v1, v2){
        return v1 - v2;
    }
}

而且由于这里是按照数值排序，所以其实用户不需要写sort的定义：

{name : 'total', type: 'float',
    initValue : function(record){
        return record['english'] + record['math'];
    }
}

现在你觉得那种方法更简单方便呢？

还有一个你前面没有回答的问题，我想再提一下：在目前的排序设计中，如何利用js提供的内置功能(localeCompare)实现汉字拼音排序？

12 楼 fins 2008-07-30  

引入 record 为的是在排序时 可以取到更多信息:

例如 按 总成绩排序.
如果由于某种原因 总成绩 并没有在record中, 而且客户也不希望扩展数据列

那么 总成绩列的

getSortValue : function(v,record){
   return record.数学成绩+ record.英语成绩;
}


"产品设计中一个重要的理念是尊重用户习惯，不要增加学习成本，而你这个设计恰恰是违背了这一点。"

首先 ,我不认为这会增加成本. (getSortValue的学习成本绝对比js.sort的学习成本低,而且你乐观的估计了学习 js排序原理的成本)

其次 我不认为这是不尊重用户习惯.

而且 你说的那种方式 GT是支持的 只是不作为推荐的方式, 不会写入文档.


"尊重用户习惯" 不等于 "不提供新的使用方式给用户"

否则 就不会有ajax 了, ajax 改变的就是传统的开发页面的习惯
在GUI出现之前, 用户的习惯是 命令行.
车辆出现之前,人们的习惯是骑马或步行

... ...


好的产品 除了尊重用户习惯之外, 还有"引导用户改现有习惯"的责任.

这个问题不要再争论了 ,
因为这就好像是问 红色和绿色哪个颜色好看一样?

答案是 都好看,关键看个人喜好.

11 楼 QuakeWang 2008-07-30  

fins 写道

你的这个思路我明白 你说的那些技术手段我也明白

我觉得你还是没有明白， 再来强调一次：我前面讲的多重排序/倒序是建议如何在GT-Grid内部实现的细节，而用户如果要使用这个功能，只需要关注于一个栏位的排序function就可以了。
而你的接口设计引入了record和value的概念，但是record其实对于单个栏位的排序是完全用不到的，我猜测你引入record可能是为了实现多重排序，所以建议你换常见的/大家都早已习惯的sort接口，这样可以避免新的学习成本。

至于你说的用户是否明白JS排序的原理，这个大不必担心，你的用户毕竟是程序员，哪怕再新手的程序员，也会听说过快速排序或者冒泡排序算法。

退一步说，哪怕是一个非程序员，他也有上体育课按高矮排队经历：和他人比较一下高矮，交换位置，而不是报一个xxxCM给老师，让老师再给你指定位置。

产品设计中一个重要的理念是尊重用户习惯，不要增加学习成本，而你这个设计恰恰是违背了这一点。

10 楼 fins 2008-07-30  

忘了 补充一下:

真的非常感谢你的关注 和 建议.

我说那么多 不是为了反驳你

其实你说的 是很有道理的 只是我不愿意采用而已.

当然 以后在实际使用中 如果这种需求很多 我一定会及时调整思路的

再次感谢你

9 楼 fins 2008-07-30  

你的这个思路我明白 你说的那些技术手段我也明白

但是我目前的设计中, 希望用户更专注于"在排序时,一条记录,参与排序的值是什么".
因为 这个是排序最核心的东西 , 也是与排序算法 和语言无关的 对排序最自然的理解方式.

而不希望用户去关注 "在排序时,如何决定任意两条之间记录之间的顺序"
更不希望用户去理解和了解 "更多的关于 多重排序等其他的排序细节".


而且 ,我觉得编写 sort 函数所需要掌握的内容 明显要更多
要明白 sort 函数的用法 返回值的意义
而且 你这些都是建立在下列基础之上的:
1 用户明白js自带的排序方式的原理 (这个请相信我 不是所有人都明白的)
2 系统使用js默认的 array.srot( ... )方法进行排序.

以上两点 有任何一点不明白 都不行.


另外关于 多种排序  和 多重排序等 只是我举的例子
(按你的思路 面对这几个例子时,用户需要写的东西已经很多了,
要比 getSortValue复杂很多)

实际上还有很多更复杂的操作 是我要在 sort 时做的 , 而这些 都不能暴露给客户的, 例如对sort值的缓存 值的类型转换 ... 等等.如果这些都让用户来做, 我绝对对于用户的要求 以及自定义函数的成本太高了.
再而且, 给客户越多低层的东西 我要面临的问题越多.

"
客户自己写的sort函数有问题, 他自己没检查出来, 会跟你说"排序不好用"
要代码, "对不起 系统保密 代码不能给你"
于是 两个人开始了文字和语言的交流, 耗时一个上午之后 终于明白了原因...
"
这种情况在产品开发里太常见了,而我希望极力避免这种问题



其实 你的需求 可以实现的 有一个 sortFunction  你只要重写他就可以了
但是 我不会把这种给"达人"准备的方法暴露给客户的.

其实 你想想 利用override 有什么是不能实现的呢?
只是 开发者是否希望用户那么做而已.

(你买来的正版windows中 绝对不会送你一本"注册表修改权威指南 以及windows优化指南的"对吧? 为什么呢???)


说这么多 已经超出了技术的范畴.更多的是我对"产品"的一个设计上的理念.


总之 在GT目前的整体架构中(以及我的设计理念) 你提出的这种做法 我是不会采用的.

8 楼 QuakeWang 2008-07-30  

多重排序可以用组合，假设已经有了现成的3个单列排序:

nameSort: function(r1, r2) {
  return r1['name'].localeCompare(r2['name'];
}

ageSort: function(r1, r2) {
  return r1['age'] - r2['age'];
}

workYearSort: function(r1, r2) {
  return r1['workYear'] - r2['workYear'];  
}

我们可以写一个通用的multiSort:

function multiSort() {
  var args = Array.prototype.slice.call(arguments);
     return function(a,b) {
     for (var i=0;i<args.length;i++) {
        var result = args[i](a,b);
        if (result!=0) return result;
     }
     return 0;        
    }
}

调用可以是：

multiSort(nameSort,ageSort,workYearSort);

主排序，第2排序，第3排序，可以通过调整3个参数的顺序实现。

正序/倒序的问题，可以再写一个：

function negative(func) {
    return function(a,b) {
        var i = func(a,b);
		return i == 0 ? i : -i;
    }
}

调用就是：

multiSort(nameSort,negative(ageSort),workYearSort);

这2个方法都可以在gtgrid中提供，使用者不需要关心他们的实现，只要实现单个栏位的排序即可。我不知道用你的方法做多重排序是否会更简单？能否举例说明一下？

p.s 以上代码未经调试，仅做示例，这些其实在各种UI工具里面都是用类似思路（比如swing/swt的table sort）。

7 楼 fins 2008-07-30  

如果只是排序一次很好办

升序
降序
默认排序

多重排序

这些问题如果你自己写sort

你要处理很多问题

例如 取得当前的排序状态,然后判断 如果是这样那么... 如果是那样那么...
如果是主排序... 如果是第2排序 如果是第3排序...

6 楼 QuakeWang 2008-07-30  

这不是一个讨论简单或者易用的问题，我想要表达的是：接口设计要符合大家的习惯。
大家都已经习惯的写法：比如javascript Array.sort接受一个function(a, b)，比如Java的Arrays.sort接受一个Comparator#public int compare(Object o1, Object o2)，没有必要引入新的学习成本。

另外，就算从简单或者易用来讨论，这个设计也有问题：
你的设想是所有排序都是通过一个方法调用获取一个值，然后再对值进行排序。但实际上，这个调用在一些情况下面是不必要甚至是写不出来的，比如前面的按照拼音排序，localeCompare是js自己带的功能，可以写成这样：

sort: function(r1, r2) {
  return r1['name'].localeCompare(r2['name'];
}

如果要用你原先的设计，我还得去自己实现一个通过字符获取拼音映射值的功能，那样就太麻烦了。

5 楼 fins 2008-07-30  

Quake Wang 你的理解还是有偏差

我的这个做法 只比你说的那种更简单易用

如果非要说有什么缺点 那就是 "可能会慢一点 因为用到了双层闭包的引用"

我说个例子 你就明白了

"按姓名的拼音排序"

假设 你已经写好了一个方法 , 传入 汉字 取得拼音: getPinYin(cnstr)

那么 你在 name列的getSortValue 只要这么写就可以:

getSortValue : function(value,r){
   return getPinYin(value); // 此时value 其实就是那各个记录的姓名了;
}

如果按你的思路是不是要这样写:

sort : function(r1,r2){
  var pinyin1 = getPinYin( r1['name'] );
  var pinyin2 = getPinYin( r2['name'] );

  return pinyin1 <pinyin2 ? -1 : (pinyin1 >pinyin2?1:0);

}

你比较一下 你觉得哪个好呢???

4 楼 QuakeWang 2008-07-30  

为什么不采用标准的sort方法呢？javascript/java都是用这种标准方法。
而且按我的理解，你这种接口是按照取得值，再来做一个sort，这样会导致一些排序无法实现，比如我前面提到的按照拼音排序。

3 楼 fins 2008-07-30  

不是的 你可以理解为getSortValue 的返回值是 a 或 b

record1 = { age : 11 }

record2 = { age : 22 }

正常的 按 age的升序排序 那么结果是 record1 ,record2
但是 如果 你在 getSortValue  里 写上 getSortValue = function(v,r){
return 0-v;  // v == r['age']

}

那么结果就是 record2 和 record1  了

也就是 在排序时  从 record1中取age时  取得不再是 record1的真正的age了
而是经过 getSortValue 处理过的值

2 楼 QuakeWang 2008-07-30  

getSortValue 这个方法有点不明白，value和record 2个名称是否就是js array sort里面接受function的2个参数？
比如按照拼音排序：

function(a,b){return a.localeCompare(b)}