Pro JavaScript (11)

January 18, 2006 at 6:16 am | Posted in JavaScript | Leave a comment

Pro JavaScript (11) 列表排序

—————————————————————————————————————————

想想电子邮件,想想CRM系统中的用户列表,需要排序的地方太多了,但是如果把这不分处理推给Server端,则把Server的能力浪费在重复劳动上,而且蚁多咬死象,Server端很多的负载消耗在数据展现的形式上,而不是集中于获得具体的数据,这也是客户对于UI认为响应缓慢,而心生不满的缘由之一。

排序用到的最重要的方法是Arraysort()方法:sort(compareFunction) 注意,sort的参数为一个比较函数,当函数不指定时,会把数组中的元素首先转化为String,然后按字符顺序排序(也就是字典顺序,lexicographic)。列表排序的一般方法是,把需要排序的数据首先存入一个array中,然后使用自定义排序函数的sort方法进行排序。

需要注意的是这个自定义的排序函数有一般的格式,即入参有两个,返回值根据两个入参的比较结果返回>0,==0,<0。另外当sort执行完毕后,对于反向的排序使用reverse,速度要比重新sort,使用反向排序的算法要快很多。

注:这里介绍的是完全客户端的排序,如果数据获取一次后就不跟server端打交道的话,可能存在数据不一致的情况,为了更好的解决这个问题,可能需要使用AJAX的方法。

注意:这里sort的实际是一个个的<tr/>元素对象,用对象的方法看待被sort的元素这样可以简化操作,不论是代码理解上,还是后面使用appendChild方法都很方便。另外注意当一个fragment被传入appendChild时,append的是fragment的所有子节点。并不包括fragment本身。

上述sort对单行有效,但是更实际的数据源都是多列的,所以需要对compareTRs方法作一些修改,使之适应不同列:

也就是说通过列为参数,动态的创造compareTRs函数。

同时,修改sortTable方法,加入iCol参数来表示不同的列,这时可以针对不同的列进行排序,其中一个有用的技巧是,如果重复点击同一列时(也就是iCol输入参数与上次输入时相同时)可以加入判断来调用reverse()方法来进行反序。

上述都是针对String的排序,编写类似的排序函数,可以把排序扩展到对数值,日期,等方面。这里的思路是首先对数据类型进行判断,然后根据不同的数据类型来parse值,然后再进行比较,注意的是对于date类型是没有==的(==表示两对象相等,而不是值相等),所以判断的时候要加以注意。

通过添加自定义的属性,还可以对文件类型等进行排序,思路是首先通过自定义的属性得到文件的类型,然后再比较,需要注意的是,XHTML来说是不支持自定义属性的,如果要保证遵守XHTML则可以把<div>包含在单元格了,然后取得div的属性来指示文件的类型。

Advertisements

Leave a Comment »

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: