time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > Jquery > jquery-easyui中为datagrid加入分页功能

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

时间:2010-03-24 00:26 点击:11772次 字体:[ ]




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

jquery-easyui中为datagrid加入分页功能_www.fengfly.com

<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



本文地址 : http://www.fengfly.com/plus/view-172115-1.html
标签: jquery datagrid easyui
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: