技术交流 > 前端技术 > ExtJs 3.4 实现分页

ExtJs 3.4 实现分页

最近研究了一下ExtJs,虽然已经年代久远,但对于企业级web应用来说,确实快速、好用!

废话不多说,我们直接开始上代码。


前端部分:

首先我们需要引入三个Ext的核心文件:ext-all.css、ext-base.js和ext-all.js

<link href=".../ext/resources/css/ext-all.css" rel="stylesheet" />
<script src=".../ext/adapter/ext/ext-base.js"></script>
<script src=".../ext/ext-all.js"></script>


Ext的入口函数是:Ext.onReady


接着我们设置一下列属性:

            var sm = new Ext.grid.CheckboxSelectionModel({ singleSelect: true });
            var cm = new Ext.grid.ColumnModel([
                new Ext.grid.RowNumberer({
                    header: "序号",
                    id: "title",
                    width: 60
                }),//自动显示行号
                sm,//复选框
                { header: '订单编号', dataIndex: 'BillNo', sortable: true, width: 140 },//每一行对应表格的一列
                { header: '操作员', dataIndex: 'Operator', width: 140 },
                { header: '性别', dataIndex: 'Sex', renderer: rendererSex, width: 140},
                { header: '描述', dataIndex: 'Descn', width: 200},
            ]);


然后需要设置数据源,Ext.data.Store,每个store最少需要两个组件的支持,分别是proxyreader,proxy用于从某个途径读取原始数据,reader用于将原始数据转换成Record实例。

这里我们使用Ext.data.HttpProxy和Ext.data.JsonReader(也可以使用Ext.data.MemoryProxy和Ext.data.ArrayReader
            var pageInfo = {
                    totalProperty: "TotalCount",
                    root: "Data"
                };
            var store = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({ url: "Handler1.ashx" }),
                reader: reader = new Ext.data.JsonReader(pageInfo, new Ext.data.Record.create(["BillNo", "Operator", "Sex", 'Descn'])),
                sortInfo: { field: "BillNo", direction: "ASC" }//设置默认排序方式
            });


之后我们还需要一个底部的面板控件:Ext.PagingToolbar

            var bbar = new Ext.PagingToolbar({
                pageSize: 5,//每页显示几条数据
                store: store,//数据
                displayInfo: true,//是否显示数据信息
                displayMsg: '显示第{0}条到{1}条记录,一共{2}条',//只有displayInfo:true时才有效,用来显示有数据的提示信息。
                emptyMsg: "没有记录",//没有数据显示的信息
            });


最后我们设置Ext.grid.GridPanel并渲染到id=grid的div上

            var grid = new Ext.grid.GridPanel({
                renderTo: 'grid',//指示表格渲染到什么地方去
                store: store,//数据存储器
                cm: cm,//列定义信息
                sm: sm,//复选框
                autoHeight: true,
                bbar: bbar,
            });
            //如果配置了分页工具条,store.load()必须在构造表格以后执行
            store.load({ params: { start: 0, limit: 5 } });


后端部分:

            int pageSize = 0;
            int pageIndex = 0;
            if (!string.IsNullOrEmpty(context.Request.Form["limit"]))
            {
                int limit, start;
                int.TryParse(context.Request.Form["limit"], out limit);
                int.TryParse(context.Request.Form["start"], out start);
                if (limit > 0)
                {
                    pageSize = limit;
                    if (start == 0)
                    {
                        pageIndex = 1;
                    }
                    else
                    {
                        pageIndex = (start / limit) + 1;
                    }
                }
            }


            List<TestModel> tm = new List<TestModel>();
            switch(pageIndex)
            {
                case 1:
                    //第一页
                    tm.Add(new TestModel() { BillNo = "CGDD202109080001", Operator = "111", Sex = "male", Descn = "测试1" });
                    tm.Add(new TestModel() { BillNo = "CGDD202109080002", Operator = "222", Sex = "male", Descn = "测试2" });
                    tm.Add(new TestModel() { BillNo = "CGDD202109080003", Operator = "333", Sex = "female", Descn = "测试3" });
                    tm.Add(new TestModel() { BillNo = "CGDD202109080004", Operator = "444", Sex = "female", Descn = "测试4" });
                    tm.Add(new TestModel() { BillNo = "CGDD202109080005", Operator = "555", Sex = "male", Descn = "测试5" });
                    break;
                case 2:
                    //第二页
                    tm.Add(new TestModel() { BillNo = "CGDD202109080006", Operator = "666", Sex = "female", Descn = "测试6" });
                    tm.Add(new TestModel() { BillNo = "CGDD202109080007", Operator = "777", Sex = "female", Descn = "测试7" });
                    tm.Add(new TestModel() { BillNo = "CGDD202109080008", Operator = "888", Sex = "male", Descn = "测试8" });
                    tm.Add(new TestModel() { BillNo = "CGDD202109080009", Operator = "999", Sex = "female", Descn = "测试9" });
                    tm.Add(new TestModel() { BillNo = "CGDD202109080010", Operator = "000", Sex = "female", Descn = "测试10" });
                    break;
                case 3:
                    //第三页
                    tm.Add(new TestModel() { BillNo = "CGDD202109080011", Operator = "1111", Sex = "female", Descn = "测试11" });
                    tm.Add(new TestModel() { BillNo = "CGDD202109080012", Operator = "2222", Sex = "male", Descn = "测试12" });
                    tm.Add(new TestModel() { BillNo = "CGDD202109080013", Operator = "3333", Sex = "female", Descn = "测试13" });
                    break;
            }

            PageList<TestModel> pl = new PageList<TestModel>();
            pl.Data = new List<TestModel>();
            pl.Data = tm;
            pl.PageIndex = pageIndex;
            pl.TotalCount = 13;
            pl.PageSize = 5;
            pl.PageCount = 5;


            System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

            context.Response.ContentType = "text/json";
            context.Response.Write(js.Serialize(pl));



效果图:

图片.png


至此,我们简单的ExtJs实现报表分页的功能就做好了,实际环境可能还会涉及带条件过滤等;

对此我们只需要在监听事件“beforeload”中注册一个回调函数即可,new Ext.data.Store({...}).on("beforeload", function (_store, options) {...}




2021-09-08 15:10:22
评论
  • 评论加载中...

评论内容: