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

 

这个UI不错

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

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

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

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

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

呵呵，好像跟jquery ui很像吗

jquery-easyui 感觉很不错，如果能和extjs那样，整合再一起，就好了，用jquery挺好，但没人给进一步的整合，每一个控件都得自己整合，太零散了，不适合快速开放，楼主水平很高，如果jquery-easyui能进一步完善，感觉比你的 etmvc框架，更能推广好！

关注etmvc好久了！

看起来不错
但怎么编译布署啊
我的环境是jdk6+eclipse3.2+myeclipse6.5+jboss4.2
导入项目报错:
Target runtime Apache Tomcat v6.0 is not defined.
怎么解决啊？