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

      代码说明:

        实现了非常简单搜索和分页,需要注意的是关于搜索分页时搜索结果丢失的问题,这里采取了两个步骤:先是在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)
    {
        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

    代码说明:

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

    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,如需转载请自行联系原作者

相关文章
|
4月前
|
JavaScript 数据格式
10jqGrid - 搜索操作
10jqGrid - 搜索操作
22 0
|
4月前
|
JavaScript 前端开发 Java
67jqGrid - 搜索操作工具栏
67jqGrid - 搜索操作工具栏
20 0
|
4月前
|
JavaScript 前端开发 Java
64jqGrid - 在搜索中显示查询条件
64jqGrid - 在搜索中显示查询条件
24 0
|
4月前
|
JavaScript 前端开发 Java
66jqGrid - 搜索模板
66jqGrid - 搜索模板
18 0
|
2月前
|
Serverless 定位技术 数据格式
Python遍历大量表格文件并筛选出表格内数据缺失率低的文件
Python遍历大量表格文件并筛选出表格内数据缺失率低的文件
|
7月前
|
安全 PHP
漏刻有时php集合layui动态表格翻页和搜索的代码分析
漏刻有时php集合layui动态表格翻页和搜索的代码分析
51 0
|
7月前
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
363 0
|
JavaScript
vue再读48-表格案例-搜索按钮实现功能
vue再读48-表格案例-搜索按钮实现功能
158 0
vue再读48-表格案例-搜索按钮实现功能
|
缓存 前端开发 JavaScript
React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发
在日常开发中,特别是内部使用的后台系统时,我们常常会需要用表格来展示数据,同时提供一些操作用于操作表格内的数据。简单的表格直接用原生 HTML table 就好,但如果要在 React 中实现一个功能丰富的表格,其实是非常不容易的。在本站之前的文章《最好的 6 个 React Table 组件详细亲测推荐》 中有提到过 react-table 这个库,如果对这个库不太了解的同学可以先了解一下,这里不再赘述。简而言之,react-table 是一个非常强大的库,它与常见的表格组件不同,它不负责渲染 HTML 和 CSS,而是提供了一系列的 hooks 让我们可以灵活地构建功能强大的表格组件。
1121 0
|
JavaScript Java
DataTables单纯的分页 不排序 没有默认搜索
憋了好几天看了中文和英文的文档,终于把分页搞出来了,先前一直纠结这个页码和页容量怎么传的,其实不用纠结这个,会自动识别。
224 0