天天看点

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

前言

  近些天对于厚积薄发有深刻的理解,尤其是月末那两天,很想再写两篇文章,保持每周一篇——每月至少四篇以上的文章。写文章分两种情况:一种情况是已经积累了许多经验,写起来轻松且得心应手,内容和系列文章容易把握,最典型的就是视频监控的那系列文章,得以写完是因为已经从事近半年相关的开发工作;另一种情况则是有方向但积累不足甚至无积累,边学边实践,然后进行归类和总结成系列,比如视频监控第二个系列和本系列都属于这种情况,如果时间稍微充足且过程较为顺利,尚可勉强完成,反之则遥遥无期。由此感悟,下次写系列文章还是得先多多积累,至少系列文章的内容在腹中已有一半以上,方可开动,否则可考虑继续积累或者拆除几篇相对独立的文章单独写,不必冠以系列,我可不想盖烂尾楼啊!

系列

推荐

正文

  一、效果图

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

  二、代码实现

    2.1  客户端

      tablepage.aspx

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

代码

        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: '没有记录'

                })

            }); 

        });

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

      代码说明:

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

    2.2  服务端

      tablepage.aspx.cs

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

    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

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

    代码说明:

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

    2.3  存储过程

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

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

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

      虽然本文没有用到,倒是实际中肯定要用到的,这里写一个样例,仅供参考(注意:这里是sql2000的例子)。

  三、下载 

结束语

   实在是想再补上点什么,暂且如此,随后归类再补上吧。

转载:http://www.cnblogs.com/over140/archive/2009/11/30/1613130.html

继续阅读