ExtJs 备忘录（6）—— GirdPanl表格（二） [ 搜索分页 ]

正文

　　一、效果图

二、代码实现

　　　　2.1　　客户端

　　　　　　tablepage.aspx

代码

        Ext.onReady(function() {

            Ext.QuickTips.init();

            Ext.form.Field.prototype.msgTarget = 'side';

            //搜索id

            var id = new NumberField('tbSearch');

            id.style='text-align:center';//设置文本居中

            var store = new Ext.data.Store({

                proxy: new Ext.data.HttpProxy({

                    url: 'tablepage.aspx?method=search',

                    method: 'GET'

                }),

                reader: new Ext.data.JsonReader({

                    totalProperty: 'count',

                    root: 'result'

                }, [

                        { name: 'Name' },

                        { name: 'Id' },

                        { name: 'Email' },

                        { name: 'Gender' }

                ]),

                baseParams:{    

                    id : '',        //用于分页时保存搜索条件

                    limit: 10       //每页显示数量

                }

            });

            //加载数据

            store.load();

            //遍历数据

//            store.each(function(record) {   

//                alert(record.get('name'));   

//            }); 

//            for (var i = 0; i < store.getCount(); i++) {   

//                var record = store.getAt(i);   

//            }  

            var dataColumns = new Ext.grid.ColumnModel({

                columns: [

                    new Ext.grid.RowNumberer(), //显示行号

                    { header: "编  号", dataIndex: 'Id', sortable: true },

                    { header: "名  称", dataIndex: 'Name' },

                    { header: "邮  箱", dataIndex: 'Email' },

                    { header: "性  别", dataIndex: 'Gender' }

                ],

                defaults: {

                    align: 'center'

            var grid = new Ext.grid.GridPanel({

                store: store,

                cm: dataColumns,    //columns: [{}]

                renderTo: Ext.getBody(),

                //autoExpandColumn: 1,

                title: '<center style="curor:hand" onclick="window.location.reload();">搜索与分页</center>',

                autoScroll: true,

                autoHeight: true,

                border: true,

                disableSelection: true,

                enableHdMenu:false,

                frame: true,

                loadMask: { msg: '正在加载数据，请稍侯……' },     //loadMask: true,

                stripeRows: true, //隔行显示不同颜色

//                bodyStyle:'width:99.8%',

//                autoWidth:true,

                width: 800,

                //设置单行选中模式

                selModel: new Ext.grid.RowSelectionModel({ singleSelect: false }),

                //使列自动均分

                viewConfig: {

                    forceFit: true

                },

                //搜索条

                tbar: new Ext.Toolbar({

                    items:[

                        new Ext.form.Label({ text:'编号： ' }),

                        id,{   

                            iconCls: "add", text: '搜索',

                            handler:function(){

                                //注意 sum 需要等数据加载完毕才能计算出来，不然始终为0

                                //alert(store.sum('Id'));

                                grid.store.baseParams['id'] = id.getValue();//防止分页时丢失

                                grid.store.reload();

                            }  

                         } 

                    ]

                //底部分页工具条

                bbar: new Ext.PagingToolbar({

                    pageSize: 10,//此处应与limit一致

                    store: store,

                    displayInfo: true,

                    emptyMsg: '没有记录'

                })

            }); 

        });

　　　　　　代码说明：

　　　　　　　　实现了非常简单搜索和分页，需要注意的是关于搜索分页时搜索结果丢失的问题，这里采取了两个步骤：先是在Ext.data.Store的baseParams中声明搜索传值变量，然后再点击搜索按钮时将搜索条件存入到baseParams里，这样分页时条件可以保持下来。

　　　　2.2　　服务端

　　　　　　tablepage.aspx.cs

    public override string Search()

    {

        int start = -1;

        int.TryParse(Request.QueryString["start"], out start);

        int limit = -1;

        int.TryParse(Request.QueryString["limit"], out limit);

        string id = Request.QueryString["id"];

        IList<User> result = new List<User>();

        if (string.IsNullOrEmpty(id))

            result = GetPage(ConverToList(dataSource.Values), start, limit);

        else

        {

            int uid;

            if (int.TryParse(id, out uid))

            {

                if (dataSource.ContainsKey(uid))

                    result.Add(dataSource[uid]);

            }

        }

        return new StringBuilder().Append("{count:")

        .Append(1000)

        .Append(",result:")

        .Append(JavaScriptConvert.SerializeObject(result))

        .Append('}')

        .ToString();

    }

    #region 数据源

    private static IDictionary<int, User> dataSource = new Dictionary<int, User>();

    static tablepage()

        for (int i = 0; i < 1000; i++)

            User user = BuildUser(i);

            dataSource.Add(user.Id, user);

    private static IList<User> GetPage(IList<User> data, int start, int limit)

        int length = start + limit;

        if (length > data.Count)

            length = data.Count;

        for (int i = start; i < length; i++)

            result.Add(data[i]);

        return result;

    private static IList<User> ConverToList(ICollection<User> users)

        User[] result = new User[users.Count];

        users.CopyTo(result, 0);

    private static User BuildUser(int number)

        return new User()

            Id = number,

            Email = string.Format("test{0}163.com", number),

            Name = string.Format("test{0}", number),

            Gender = new Random().Next(2)

        };

    class User

        /// <summary>

        /// 编号

        /// </summary>

        public int Id { get; set; }

        /// 邮箱

        public string Email { get; set; }

        /// 名称

        public string Name { get; set; }

        /// 性别 0 女 1 男

        public int Gender { get; set; }

    #endregion

　　　　代码说明：

　　　　　　这里仍然没有连接数据库，模拟数据与分页查询。

　　　　2.3　　存储过程

CREATE PROCEDURE dbo.DataPager

    (

        @StartIndex        INT = 0 ,

        @Limit            INT = 15,

        @RowsCount        INT = 0 OUTPUT,         -- 输出记录总行数

        @SQLString        VARCHAR(500)            

    )

AS

    SET NOCOUNT ON

    SELECT IDENTITY(INT,1,1) AS [NewID],* INTO #TMP_ZSFLZ1 FROM [TB_XJYJZ] WHERE 1=2

    INSERT INTO #TMP_ZSFLZ1 EXEC sp_executesql @SQLString

    --总行数

    SELECT @RowsCount = COUNT([NewID]) FROM #TMP_ZSFLZ

    SET @StartIndex = @StartIndex + 1

    SELECT * FROM #TMP_ZSFLZ tz

    WHERE [NewID] BETWEEN @StartIndex AND @StartIndex + @Limit - 1

    DROP TABLE #TMP_ZSFLZ

    RETURN

GO

　　　　　　虽然本文没有用到，倒是实际中肯定要用到的，这里写一个样例，仅供参考（注意：这里是SQL2000的例子）。

本文转自over140 51CTO博客，原文链接：http://blog.51cto.com/over140/586541，如需转载请自行联系原作者