`

Ext gird分页学习

阅读更多
var store = new Ext.data.Store({
                    // 使用一个URL获取数据源
                    url:  '../ListAlarminfoAfterten.form',
                                   
                   //映射关系
                    reader: new Ext.data.XmlReader({
                           record: 'tbalarminfo',
                           id: 'id',
                           totalRecords:'countRow'
                       }, [
                           {name: 'id', mapping: 'ItemAttributes > id'},
                          'id','errorid','taskname','alarmtime','descr','matter','rating','status'
                       ])
                });
                   //创建一个表格对象
                   var sm = new Ext.grid.CheckboxSelectionModel();
                    var cm = new Ext.grid.ColumnModel([
                            new Ext.grid.RowNumberer(),//自动行号
                               sm,//添加的地方
                            {header: "id", dataIndex: 'id',hidden:true},
                            {header: "错误ID", width: 100, dataIndex: 'errorid'},
                            {header: "任务名称", width: 100, dataIndex: 'taskname'},
                            {header: "时间", width: 100, dataIndex: 'alarmtime'},
                            {header: "报警描述", width: 150, dataIndex: 'descr'},
                            {header: "错误内容", width: 150, dataIndex: 'matter',hidden:true},
                            {header: "级别", width: 100, dataIndex: 'rating'},
                            {header: "状态", width: 100, dataIndex: 'status',renderer:function(value){
                                if (value == '0') {
                                    return "<span style='color:red;font-weight:bold;'>未通知</span>";
                                } else if (value == '1') {
                                    return "<span style='color:red;font-weight:bold;'>未处理</span>";
                                }else if (value == '10') {
                                    return "<span style='color:green;font-weight:bold;'>已处理</span>";
                                }
                            }}
                    ]);
                    cm.defaultSortable = true;
   
                    // create the grid
                    var grid = new Ext.grid.GridPanel({
                        el:'example-grid',
                        store: store,
                        cm: cm,
                        sm: sm,
                        width: 700,
                        height: 310,
                        fitToFrame: true,
                        title:'文件同步历史报警信息列表',
                        selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
                        bbar: new Ext.PagingToolbar({
                            pageSize: 20,
                            store: store,
                            displayInfo: true,
                            displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
                            emptyMsg: "没有记录"
                        })
                    });
                   
                    grid.render();
                    store.load({ params : { start : 0, limit : 10 }});   
                   
                    //为grid添加双击事件做弹出窗口处理
                   
                    grid.addListener('rowdblclick',function(){
                       
                        var records = grid.getSelectionModel().getSelections();
                        var stat = records[0].get("status");
                        id=records[0].get('id');
                        errorid=records[0].get('errorid');
                        errordescr=records[0].get('descr');
                        matter=records[0].get('matter');
                        if(stat!="10"){
                                if(!records.length){
                                    alert("请选择要处理的报警信息");
                                }
                                else{
                                   
                                    window.open ('ModifyFileAlarmStatById.jsp?id='+id+","+errorid+","+errordescr+","+matter,'newwindow', 'height=300, width=540, top=200, left=200, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');                             
                                }
                        }else{
                                window.open ('ViewAlarmDisposenoticeById.jsp?id='+id+","+errorid+","+errordescr+","+matter,'newwindow', 'height=200, width=540, top=200, left=200, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
                        }
                    });


xml 结合 extajax  分页 以及grid 添加监听方法处理操作
后台 java 获得 start的起始条数   
数据库写 sql 查询相应的第几条到多少条数的数据
分享到:
评论

相关推荐

    ext超酷的grid中放图片(ext3.2.1)

    EXT JS 3.2.1虽然已经是较旧的版本,但其核心概念和方法在后续版本中仍然适用,因此学习这部分内容对于理解EXT JS的Grid组件依然有价值。 1. **EXT JS Grid组件基础** - Grid组件是EXT JS中的一个核心组件,用于...

    ext5.0中将grid导出excel文件

    根据网络上已有的导出代码,替换ext2.0中的函数和属性为ext5.0版本。 无选择项默认导出全表。 未考虑grid分页的情况。 默认设置导出文件名为grid中name属性+当天年月日。 没有研究出data uri协议导出excel文件时动态...

    ExtGridDemo

    10. **响应式布局(Responsive Layout)**:在ExtJS 5.1中,你可以利用Ext.container.Viewport和Ext.resizer.Splitter等组件,实现Grid在不同屏幕尺寸下的自适应布局。 11. **主题(Theme)**:ExtJS提供多种视觉...

    Ext扩展控件-------可以通过下拉列表框选择每页的分页条数

    在EXT(Ext JS)框架中,分页是数据网格(Grid)中常用的功能,用于处理大量数据时提高性能和用户体验。EXT Grid控件允许用户滚动查看数据,而不是一次性加载所有记录,这使得页面加载更快,资源消耗更低。然而,...

    jq-extgrid v1.2 表格插件

    extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...

    表格Ext js源代码

    在本资源中,我们关注的是"表格Ext js gird源代码",这涉及到Ext JS中的Grid Panel组件,它是展示和操作数据集的主要工具。 Grid Panel是Ext JS中的核心组件之一,用于显示结构化的数据,通常以表格的形式。它支持...

    extjs 学习笔记 四 带分页的grid

    在Ext JS中实现带有分页功能的Grid组件是处理大量数据展示的有效方式,可以极大地改善用户浏览数据时的体验。当处理成千上万条数据时,将所有数据加载到一个页面中会导致页面加载缓慢,影响用户交互。因此,分页功能...

    Extjs2.0动态加载gird的例子

    动态加载Grid意味着数据不是一次性全部加载到页面中,而是根据用户滚动或者设定的分页大小逐步加载。这种方式不仅减少了初始页面加载时间,还降低了服务器端的压力,因为只需要处理当前显示的数据。 首先,我们需要...

    Ext+struts学生管理系统

    【压缩包子文件的文件名称列表】中的"Gird"很可能是指ExtJS中的Grid组件,这是一个表格展示控件,常用于显示和操作大量结构化数据。在学生管理系统中,Grid可能被用于展示学生列表,支持排序、过滤、分页等功能。 ...

    Ext会员统计管理系统

    这使得【Ext会员统计管理系统】成为一个理想的学习平台,开发者可以通过实践来加深对ExtJS统计功能的理解,提升自身在Web前端开发和数据分析方面的专业技能。 至于在【压缩包子文件的文件名称列表】中的"Gird2",...

    Flexigrid for jQuery

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

    jquery表格插件flexigrid-1.1.zip

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

    jQuery表格插件 Flexigrid的例子

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...

    flexigrid 插件 加入 CheckBox

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。 本资源是...

    Flexigrid的使用(整合Struts2 )

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。 本资源为...

    对YUI扩展的Gird组件 Part-1

    - **`initPaging(url, pageSize, baseParams)`**:这是实现分页功能的核心方法,用于一次性完成分页初始化工作。其中,`url`指定获取数据的URL地址,`pageSize`定义每页显示的数据条数,而`baseParams`则是可选参数...

    ExtJS 4.2 Grid组件单元格合并的方法

    从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域)。 其中grid-body包含了许多tr元素,每一个tr都是代表Grid组件中的一行数据;每个tr内部...

    asp.net gridview中用checkbox全选的几种实现的区别

    GridView控件内置了很多功能,例如分页、排序、编辑、删除以及选中行等。在处理多行数据时,经常需要一个全选的功能来选中或取消选中所有行。本文将详细介绍在*** GridView中使用CheckBox实现全选功能的几种不同方法...

    ExtJS4 动态生成的grid导出为excel示例

    component: Ext.getCmp('gird_a') ``` 对于动态生成的grid,初始的`columns`属性可能在`grid.columnManager.columns`中,而不是`grid.columns`。因此,你可能需要在`exporter.js`的第40行修改代码,如下: ```...

Global site tag (gtag.js) - Google Analytics