Ext js 4 简单实现分页查询

参考官方api文档写的分页,原来分页也可以这么简单,(ext-4.2.1.883):


1,前台页面:

ValuePanel = new Ext.grid.GridPanel({
        // 下方参数值
        title: '参数值',
        split: true,
        region: "south",
        height: 300,
        xtype: 'grid',
        store: storeAnalysis,
        columns: ValuePanelColumns,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: storeAnalysis,
            dock: 'bottom',
            emptyMsg: '没有数据',
            displayInfo: true,
            displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',
            beforePageText: '第',
            afterPageText: '页/共{0}页'
        }]
  });
// 每页显示记录数
var itemsPerPage = 10;
// 分页查询store
var storeAnalysis = new Ext.data.ArrayStore({
    model: 'SelectFieldValueListModel',
    pageSize: itemsPerPage,
    proxy: {
        type: 'ajax',
        url: appPath + '/ExploredReserves/AddSelectFieldValueToGridPage',// 任意动态页面
        reader: {
            type: 'json',
            root: 'items',
            totalProperty: 'total'
        }
    }
});
function LoadStoreAnalysis() {
    storeAnalysis.load({
        params: {
            start: 0,// 这里的参数名不能改,是ext定死的
            limit: itemsPerPage
        }
    });
}

2 后台返回一个如下格式的json就行了


        /// <summary>
        ///  分页刷新下方属性值列表
        /// </summary>
        public ActionResult AddSelectFieldValueToGridPage(int start, int limit)
        {
            List<AnalyzeFieldBase> listFieldDataPage=new List<AnalyzeFieldBase>();
            for (int i = 0; i < m_listFieldData.Count; i++)
            {
                if (i >= start && i < start + limit)
                {
                    listFieldDataPage.Add(m_listFieldData[i]);
                }
            }
            string result = CommonFun.ConvertObjectToJson(listFieldDataPage);

            result = "{\"success\": true,\"total\": " + m_listFieldData.Count + ",\"items\":" + result + "}";
            return Content(result);
        }





猜你喜欢

转载自blog.csdn.net/icemaker88/article/details/18079977