logo

EasyUI DataGrid 分页2012-07-08

这个例子显示如何能从服务器中调用数据,如何添加分页到DataGrid中。
\
从远程服务器中调用数据,你必须设置url属性,服务器应该返回JSON格式数据。获得更多数据格式,请参考DataGrid文档。
建立<table>标记
首先,我们在网页上定义标记。
<table id="tt"></table>
jQuery代码
然后,写一些jQuery代码建立DataGrid组件
$('#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
});
我们定义DataGrid列并且设置pagination属性为true,这样可以在DataGrid上产生分页栏按钮。分页发送2个参数到服务器。
· page: 页号,从1开始。
· rows: 每页的列数。
我们使用etmvc framework编写后台服务代码,所以,url被映射到DataController类和getItems方法。
定义数据模型的例子
@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);
    }
}
数据库配置实例
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中。
· 运行程序

相关话题

热门搜索

  • EasyUI
  • DataGrid
  • 分页

扫描二维码分享话题