`
endual
  • 浏览: 3557741 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

extjs4做的grid,带分页,搜索 (转)

 
阅读更多

【原创】extjs4做的grid,带分页,搜索

最终效果图:

服务器端数据格式输出:
{"total":100,"items":[{"id":0,"name":"aaaa0","time":"2009-23-0","phone":"000-2342442"},{"id":1,"name":"aaaa1","time":"2009-23-1","phone":"010-2342442"},{"id":2,"name":"aaaa2","time":"2009-23-2","phone":"020-2342442"},{"id":3,"name":"aaaa3","time":"2009-23-3","phone":"030-2342442"},{"id":4,"name":"aaaa4","time":"2009-23-4","phone":"040-2342442"},{"id":5,"name":"aaaa5","time":"2009-23-5","phone":"050-2342442"},{"id":6,"name":"aaaa6","time":"2009-23-6","phone":"060-2342442"},{"id":7,"name":"aaaa7","time":"2009-23-7","phone":"070-2342442"},{"id":8,"name":"aaaa8","time":"2009-23-8","phone":"080-2342442"},{"id":9,"name":"aaaa9","time":"2009-23-9","phone":"090-2342442"}]} 

 

服务器端参数接受:

int page = int.Parse(context.Request["page"]);//当前第几页,从1开始
int pagesize = int.Parse(context.Request["limit"]);//每页显示数

前台js部分:

复制代码
<script type="text/javascript">

        Ext.require(['Ext.data.*', 'Ext.grid.*']);

        Ext.onReady(function () {

            Ext.define('MyData', {
                extend: 'Ext.data.Model',
                fields: [
                     { name: "id", type: "int" }, //第一个必须指定mapping,其他可以省略
'name', 'time', 'phone'
                ]
            });

            var mystore = Ext.create('Ext.data.Store', {
                //分页大小
                pageSize: 10,
                model: 'MyData',
                proxy: {
                    type: 'ajax',
                    url: 'loadgriddata.ashx',
                    reader: { root: 'items', totalProperty: 'total' }
                },
                sorters: [{
                    property: 'id', //排序字段
                    direction: 'asc'// 默认ASC
                }]
            })

            var panel = Ext.create('Ext.form.Panel', {
                title: '按条件搜索',
                width: 600,
                defaultType: 'textfield',
                frame: true,
                method: 'POST',
                collapsible: true,//可折叠
                bodyPadding: 5,
                layout: 'column',
                margin: '0 0 10 0',
                items: [{
                    fieldLabel: '姓名',
                    labelWidth: 40,
                    id: 'name'
                }, {
                    xtype: 'button',
                    text: '搜索',
                    margin: '0 0 0 5',
                    handler: function () {
                        var name = Ext.getCmp('name').getValue(); //获取文本框值
if (name !="") {
                            mystore.load({ params: { name: name} });//传递参数
                        }
                    }
                }],
                renderTo: Ext.getBody()
            })



            var grid = Ext.create('Ext.grid.Panel', {
                title: 'grid加载远程数据',
                width: 600,
                store: mystore,
                loadMask: true, //加载提示{ msg: '正在加载数据,请稍侯……' }
                selModel: new Ext.selection.CheckboxModel, //添加checkbox列
                columns: [{
                    header: '姓名', dataIndex: 'name'
                }, {
                    header: '时间', dataIndex: 'time', width: 150
                }, {
                    header: '电话', dataIndex: 'phone'
                }],
                dockedItems: [
                {
                    xtype: 'pagingtoolbar',
                    store: mystore,  // same store GridPanel is using
                    dock: 'bottom', //分页 位置
                    emptyMsg: '没有数据',
                    displayInfo: true,
                    displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',
                    beforePageText: '',
                    afterPageText: '页/共{0}页'
                }, {
                    xtype: 'toolbar',
                    items: [{
                        iconCls: 'icon-add',
                        text: 'Add',
                        scope: this, //添加
                        handler: function () {
                            Panel.show(); //显示
                        }
                    }, {
                        iconCls: 'icon-delete',
                        text: 'Delete',
                        //disabled: true,
                        itemId: 'delete',
                        scope: this,
                        handler: function () {
                            //var selModel = grid.getSelectionModel();
var selected = grid.getSelectionModel().getSelection();
                            var Ids = []; //要删除的id
                            Ext.each(selected, function (item) {
                                Ids.push(item.data.id); //id 对应映射字段
                            })
                            //alert(Ids);
                        }
                    }]
                }],
                listeners: {
                    //监听单击事件 records 当前行 对象
                    itemclick: function (dv, records, item, index, e) {
                        //alert(record.data.id);

                    }, selectionchange: function (model, records) {
                        if (records[0]) {
                            Panel.show(); //显示
                            Panel.loadRecord(records[0]);
                        }
                    }
                },
                renderTo: Ext.getBody()
            })
            //初始加载第1页
            mystore.loadPage(1);

            var Panel = Ext.create('Ext.form.Panel', {
                title: '表单',
                width: 300,
                frame: true,
                bodyPadding: 5,
                //closable:true,//是否可关闭
                hidden: true, //隐藏
                margin: '10 0 0 0',
                defaultType: 'textfield', //name对应grid列中的dataIndex 
                items: [{ fieldLabel: 'name', name: 'name' }, { fieldLabel: 'time', name: 'time' }, { fieldLabel: 'phone', name: 'phone'}],
                renderTo: Ext.getBody(),
                buttons: [{ text: '确定' }, { text: '取消'}]
            });
        })
    
    </script>
复制代码
分享到:
评论

相关推荐

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    Extjs grid分页1

    ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...

    Extjs grid分页多选记忆功能

    很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...

    EXTJS4 表格GRID示例

    EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例

    extjs4打印grid插件

    总的来说,"extjs4打印grid插件"是ExtJS4开发中非常实用的一个工具,它为Grid Panel提供了方便的打印功能,极大地丰富了用户体验,特别是在数据报告和数据分析场景中。通过深入理解和使用这个插件,开发者可以更好地...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...

    Extjs4 Grid分页与自动刷新

    ### Extjs4 Grid分页与自动刷新 #### 一、Extjs4 Grid 分页功能实现 在使用Extjs4进行Web应用开发时,Grid控件是常用的数据展示组件之一。对于大数据量的情况,通常需要使用分页来提高用户体验。下面详细介绍如何...

    extjs 分页

    2. Grid:EXTJS Grid是数据展示的主要组件,它与Store绑定后,可以自动展示Store中的数据,并支持分页操作,如切换页码、显示每页记录数等。 3. Paging Toolbar:分页条是EXTJS提供的一种UI组件,它包含页码按钮、...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...

    ExtJs+Dwr带分页分组传参后台排序功能的grid

    在本文中,我们将深入探讨如何实现一个基于ExtJS和Direct Web Remoting (DWR)的带分页、分组及后台排序功能的Grid组件。这个功能整合了多种技术,包括ExtJS、DWR、Spring和Hibernate,以创建一个高效且灵活的数据...

    ExtJs+Dwr(Grid)实现分页功能

    ExtJs+Dwr(Grid)实现分页功能,很实用

    extjs 简单分页例子

    EXTJS通过其Grid组件支持分页,Grid组件是一个可配置的表格视图,能够显示大量数据并进行排序、筛选和分页操作。 首先,我们需要创建一个EXTJS Grid组件。在JS文件中,定义Grid的基本配置,包括列模型(column ...

    ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能

    在本示例中,我们将深入探讨如何使用ExtJS实现动态加载grid,同时实现CRUD(创建、读取、更新、删除)操作和分页功能。 首先,让我们了解什么是Grid。在ExtJS中,Grid是一种数据网格组件,用于展示大量结构化数据。...

    ExtJs动态grid的生成

    - Grid的顶部通常包含一个工具栏,可以动态添加按钮或其他UI元素,提供搜索、排序或过滤等功能。这些功能可以通过`dockedItems`配置项实现。 6. **Autogrid.js可能的用途** - 文件名"Autogrid.js"暗示可能是一个...

    Extjs4前台前台grid导出excel

    在本篇文章中,我们将深入探讨如何在ExtJS4中实现前台Grid的数据导出到Excel功能。 首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中的核心组件之一,用于创建数据网格。它能够动态加载数据,提供排序、过滤、分页...

    extjs 学习笔记 四 带分页的grid

    因此,现在几乎所有的grid控件都会支持分页功能。extjs也不例外,它对分页也提供了强大而方便的支持,使得我们在分页处理上可以得心应手。 在extjs中,类Ext.PagingToolbar封装了关于分页的操作,该类从Toolbar继承...

    动画效果的grid分页

    在ExtJS框架中,我们可以实现具有动画效果的grid分页,提升用户交互的流畅性和视觉吸引力。 首先,让我们了解一下ExtJS。ExtJS是一个流行的JavaScript库,提供了丰富的组件和工具,用于构建复杂的、功能强大的Web...

    EXTJS grid导出EXCEL文件

    1. **EXTJS Grid组件**:EXTJS Grid是EXTJS的核心组件之一,它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源(如JSON、XML或内存中的数组)配合使用,并通过Store对象进行数据的加载和管理...

    extjs4.2 分页combo动态条数 源码

    分页组件在EXTJS中通常由PagingToolbar提供,这是一个放置在Grid或TreePanel底部的工具栏,包含了导航按钮和页码显示。在Combobox中实现分页,我们需要自定义Combobox的行为,使其能够与PagingToolbar协同工作。 `...

    ExtJs Grid选择行

    在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...

Global site tag (gtag.js) - Google Analytics