表格排序

【注】WW 问我J2EE怎么做服务器端排序,于是上次帮她写了点介绍,放在这里做个存档。

数据结构:

表格(Table)可以是数据库表,也可以是内存中的一个数据结构。例如:

class UserObject
{
 String columnA;
 int columnB;
 char columnC;
}

 一个 List 用来存放你的 UserObject,此时就构成一个表结构。逻辑结构如图:

Index      columnA    columnB      columnC
-------------------------------------------
1            'abc'    1            'a'
2            'efg'    2            'e'
3            'hij'    3            'h'

服务器端:

服务器端客户端参数:1. 当前页码,2. 每页大小,3. 按那个字段排序?

步骤为:

  1. 按客户端点击的字段排序,如果按上述数据结构,如果按 ColumnA 排序方法为,创建比较两个对象的 columnA 属性的方法
class UserComparator implements java.util.Comparator {
  
  int compare(Object o1, Object o2) {
    UserObject uo1 = (UserObject) o1;
    UserObject uo2 = (UserObject) o2;

    if (哪个前头?)
       return 1;        
    else if               
       return -1;        
    else
       return 0;    
   }
}

         
然后使用 Collections 的方法对 List 进行排序:java.util.Collections.sort(list, new UserComparator());

   2. 排序完毕。然后按常规手段,对 List 进行分页处理。

   3. 提取出 客户端请求的页码上的数据。

   4. 将提取出的数据变成 JSON,写回给客户端。

客户端步骤:

   展现方式为:

<table>
    <!-- 表头 -->
    <tr>
        <th>               
            <a href="#" onclick="sendSortRequest('columnA');">columnA</a>
        </th>
        <th>              
            <a href="#"
               onclick="sendSortRequest('columnB');">columnB</a>    
        </th>    
        <th>           
            <a href="#"
               onclick="sendSortRequest('columnC');">columnC</a>    
        </th>
    </tr>
    <!-- 数据 --> 
    <tr>
        <td>abc</td>
        <td>1</td>
        <td>a</td>
    </tr>
</table>

   1. 当点击表头时,使用AJAX方式向服务器端程序 POST 提交参数:1.当前页码,2. 每页大小,3. 按那个字段排序?
   2. 接收到服务器端返回JSON,更新当前表格(这个是纯JAVASCRIPT + DHTML的工作)

8,091 次阅读

One Reply to “表格排序”

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注