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);   
//                 alert(record.get('name'));   
//             }  

            

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

     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)
    {
        IList < User >  result  =   new  List < User > ();
         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 );
         return  result;
    }

     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 ; }
         ///   <summary>
         ///  邮箱
         ///   </summary>
         public   string  Email {  get ;  set ; }
         ///   <summary>
         ///  名称
         ///   </summary>
         public   string  Name {  get ;  set ; }
         ///   <summary>
         ///  性别 0 女 1 男
         ///   </summary>
         public   int  Gender {  get ;  set ; }
    }

     #endregion

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