前言

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

系列

  1.  ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ]
  2.  ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]
  3.  ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
  4.  ExtJs 备忘录(4)—— Form表单(四) [ 数据提交 ]
  5.  ExtJs 备忘录(5)—— GirdPanl表格(一)[ 基本用法 ]
  6.  ExtJs 备忘录(6)—— GirdPanl表格(二)[ 搜索分页 ]

推荐

  1.  ExtJS 技巧笔记

  2.  Ext.data.Store

正文

  一、效果图

  二、代码实现

    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" οnclick="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的例子)。

  三、下载

     ExtJS2009-11-30

结束语

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

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

  1. layui 数据表格的搜索分页功能的实现

    最近在使用layui+larave做项目,需要使用到table的分页+搜索的功能,一开始没有什么思路,从网上找了几个,用在自己这里并不正确,不知是自己有哪里写错了,还是这几个是不正确,下面是自己亲自试 ...

  2. ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]

    前言 本以为可以稳稳当当的工作.安安心心的写文章,结果我做了一件非常疯狂的事情,换新工作一周后辞了--然后去了另外一家公司 - - #,理由就不详说了,总之现在是每天加班到8-9点,虽然如此但是这个团 ...

  3. jquery插件dataTables(dataTables在显示表格的时候,果然是个好东西,支持排序/搜索/分页/...)

    jquery插件dataTables dataTables在显示表格的时候,支持排序/搜索/分页/... 官网:http://www.datatables.net/ demo: [javascript ...

  4. ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ]

    前言 ExtJS接触至今已有4个月(5.1 - 9.1),小有心得,由于公司短期内并没有打算采用,所以备忘之以备他日之需.虽然网上资料不少,但学起来仍感费劲,所以还是想以自己的方式来与众分享. 系列 ...

  5. php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码

    一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等 查看详情 {{# if (d.hotcake === '超级爆款') ...

  6. Django 04 :靓号管理【 靓号的增删改 + 搜索 + 分页 + 时间插件 + ModelForm与BootStrap】

    文章目录 1.用户管理:编辑与删除 1.1.编辑用户 (1)前端基础效果 (2)提交 (3)补充知识 1.2.删除用户 2.靓号管理 2.1.数据库的表结构 2.2.靓号列表 2.3.靓号:新建.编辑 ...

  7. SAP UI 搜索分页技术

    搜索分页技术往往和另一个术语Lazy Loading(懒加载)联系起来.今天由Jerry首先介绍S/4HANA,CRM Fiori和S4CRM应用里的UI搜索分页的实现原理.后半部分由SAP成都研究院 ...

  8. php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能)

    layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 JavaScript部分 var t ...

  9. ExtJs 备忘录(4)—— Form表单(四) [ 数据提交 ]

    一.截图和示例共用Ext.FormPanel 1.1 截图 由于本文主要关注的是表单提交的几种方式,所以仅用了一个表单项以便于测试和减少示例代码. 1.2 示例共用Ext.FormPanel      ...

最新文章

  1. 操作系统读写者问题实验报告_操作系统知识点总结
  2. 华为云计算FusionCompute环境部署实验之使用批量部署工具安装
  3. 异常:System.Runtime.InteropServices.Marshal.GetTypeFromCLSID(System.Guid)
  4. ora-24811提供写入的数据少于指定的数据_C++开源、高性能时序数据库pinusdb
  5. android扩散波动动画,使用WebGL制作图片的像素脉冲波(粒子化扩散波动)动画特效...
  6. TypeError: only integer scalar arrays can be converted to a scalar index
  7. 2020年度国家自然科学基金医学领域结果公布(9月27后可查)
  8. 【Xamarin.Android】掌握android支持库
  9. 4G路由器光伏发电监控系统
  10. 高薪设计师必修课 AE移动UI动效设计从入门到实战
  11. 人大金仓数据库的备份与还原
  12. 【牛客刷题-SQL大厂面试真题】NO5.某宝店铺分析(电商模式)
  13. 内网安全-域横向PTHPTKPTT哈希票据传递
  14. 基于Unity3D的相机功能的实现(六)—— 上帝视角(王者荣耀视角)
  15. 【科普】Kubectl基本操作命令
  16. Opencv在图片上写文字(hello)
  17. 传感器实验——寻迹小车
  18. HTTP协议与Get和Post的区别
  19. 我是深圳南山的集体户口,要将我老婆的户口随迁入深圳 没有房产,可以办深圳人才中心的集体户口吗
  20. 如何用python打印等腰三角形

热门文章

  1. rocketmq中的broker设计与实现
  2. 2017年最受欢迎的10个编程挑战网站
  3. 利用 test 命令的测试功能
  4. 信度和效度 智商计算
  5. Linux下源码编译安装Python3
  6. springmvc学习(小知识点整理)
  7. AtCoder Grand Contest 015
  8. KlayGE 4.3开发计划
  9. [Silverlight入门系列]使用MVVM模式(6):使用Behavior
  10. LOADRUNNER 登陆功能测试实例(转)