jquery-easyui中为datagrid加入分页功能

jquery-easyui中使用datagrid来加载远程数据，必须设置url属性，如下所示：

<table id="tt"></table>

 

$('#tt').datagrid({
    title:'Load Data',
    iconCls:'icon-save',
    width:600,
    height:250,
    url:'/demo3/data/getItems',
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]],
    pagination:true
});

 

 

分页时需要设置pagination:true，这样，在表格下方将显示分页工具栏。分页工具栏将向服务器发送二个参数：

• page: 页号，从1计起。
• rows: 每页记录大小。

后台数据使用etmvc框架编写，首先定义数据模型：

@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 index
     * @param rows rows per page
     * @return JSON format string
     * @throws Exception
     */
    public View getItems(int page, int rows) throws Exception{
        long total = Item.count(Item.class, null, null);
        List<Item> items = Item.findAll(Item.class, null, null, null, rows, (page-1)*rows);
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("total", total);
        result.put("rows", items);
        return new JsonView(result);
    }
}

部署运行程序，将会输出datagrid部件：

 

 

原文及范例下载地址：http://jquery-easyui.wikidot.com/tutorial:datagrid2

 

评论

6 楼 tianlinzx 2010-02-03  

对啊，楼主真的可以考虑一下，放个综合例子出来哦。上次那个机电设备管理，再完善一下嘛。

5 楼 kenchen0805 2010-02-03  

我的意思是jquery-easyui,综合例子

4 楼 lufei_vs 2010-02-02  

源码都是混淆过的 根本没法看呀，能否提供js源码呀

3 楼 stworthy 2010-02-02  

做CMS、权限这个可是大工程，和DATAGRID的用法没太多关系，了解DATAGRID可以再参阅http://www.iteye.com/topic/576846，也可以关注http://jquery-easyui.wikidot.com/tutorial中的教程。

2 楼 kenchen0805 2010-02-02  

能否做个综合一点的案例，比如说简单的cms或者权限后台系统

1 楼 kenchen0805 2010-02-02  

这个UI不错