DataGrid 添加排序

http://www.glphp.com/index.php?m=content&c=index&a=show&catid=36&id=330

 

 

DataGrid 添加排序
DataGrid中全部的列可以通過點擊列頭被排序。你可以定義可以被排序的列。默認的，列不能被排序除非你設置sortable屬性爲TRUE，下面是例子：

$('#tt').datagrid({

    title:'Sortable Column',

    width:550,

    height:250,

    url:'/demo4/data/getItems',

    columns:[[

        {field:'itemid',title:'Item ID',width:80,sortable:true},

        {field:'productid',title:'Product ID',width:80,sortable:true},

        {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},

        {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},

        {field:'attr1',title:'Attribute',width:100},

        {field:'status',title:'Status',width:60}

    ]],

    pagination:true,

    sortName:'itemid',

    sortOrder:'asc'

});

 

我們定義一些可排序的列，包括itemid，productid，listprice，unitcost等。attr1列和status列不能被排序。我們設置默認排序列：itemid，按asc（升序）排序。
當排序時， DataGrid發送兩個參數到服務器：
· sort: 排序列字段名
· order: 排序次序： 'asc' 或 'desc', 默認爲'asc'.
我們使用etmvc framework 寫後臺服務器代碼，首先定義數據模型

@Table(name="item")

public class Item extends ActiveRecordBase{

    @Id public String itemid;

    @Column public String productid;

    @Column public java.math.BigDecimal listprice;

    @Column public java.math.BigDecimal unitcost;

    @Column public String attr1;

    @Column public String status;

}

 寫控制代碼：

 

public class DataController extends ApplicationController{

    /**

     * get item data

     * @param page page number

     * @param rows page size

     * @param sort sort column field name

     * @param order sort order, can be 'asc' or 'desc'

     * @return JSON format string

     * @throws Exception

     */

    public View getItems(int page, int rows, String sort, String order) throws Exception{

        long total = Item.count(Item.class, null, null);

        List<Item> items = Item.findAll(Item.class, null, null, sort+" "+order, rows, (page-1)*rows);

        Map<String, Object> result = new HashMap<String, Object>();

        result.put("total", total);

        result.put("rows", items);

        return new JsonView(result);

    }

}

 

我們使用MySQL數據庫存儲演示數據，下面是配置實例：

 

domain_base_class=com.et.ar.ActiveRecordBase

 

com.et.ar.ActiveRecordBase.adapter_class=com.et.ar.adapters.MySqlAdapter

com.et.ar.ActiveRecordBase.driver_class=com.mysql.jdbc.Driver

com.et.ar.ActiveRecordBase.url=jdbc:mysql://localhost/jpetstore

com.et.ar.ActiveRecordBase.username=root

com.et.ar.ActiveRecordBase.password=soft123456

com.et.ar.ActiveRecordBase.pool_size=0

 部署
· 建立MySQL數據庫
· 從'/db/item.sql'導入測試表數據，表名是'item'.
· 按需要改變數據庫配置，配置文件在/WEB-INF/classes/activerecord.properties中。
· 運行程序