`
huang5787826
  • 浏览: 46740 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
文章分类
社区版块
存档分类
最新评论

grid按页查询

阅读更多
Ext.onReady(function(){
 var sm = new Ext.grid.CheckboxSelectionModel();//显示选择框
 var cm = new Ext.grid.ColumnModel([
  new Ext.grid.RowNumberer(),//显示行号
  sm,//显示选择框
  {
    header : "姓名",// 列头文字说明
    width : 80,
    dataIndex : "Name",// 记录结构中的name属性值
    tooltip : "这是你的姓名"// 悬停提示
   }, {
    header : "性别",
    width : 40,
    dataIndex : "Sex",
    align : "center",
    renderer : function(v) {
     if (v == "男") {
      return "<img src='imgs/boy.gif'>";
     } else {
      return "<img src='imgs/girl.gif'>";
     }
    }
   }, {
    header : "生日",
    width : 150,
    format : "Y-m-d",
    dataIndex : "Birthday",
    renderer : Ext.util.Format.dateRenderer("Y-m-d")
   }, {
    header : "学历",
    width : 80,
    dataIndex : "Education",
    align : "center"
   }, {
    id : "memo",
    header : "备注",
    dataIndex : "Memo"
   }, {
    header : "操作",
    width : 150,
    dataIndex : "Operation",
    menuDisabled : true,
    renderer : function(v) {
     return "<sapn style='margin-right:10px'><a href='#'>修改</a></span>"
       + "<span><a href='#'>删除</a></span>";
    }
   }
 ]);
 
 // 给每个列添加数据
 var data = [{
    name : "学生A",
    sex : "男",
    birthday : Date.parseDate("1987-12-08", "Y-m-d"),
    edu : "本科",
    memo : "无备注"
   }, {
    name : "学生B",
    sex : "女",
    birthday : Date.parseDate("1974-04-23", "Y-m-d"),
    edu : "大专",
    memo : "漂亮MM"
   }, {
    name : "学生C",
    sex : "女",
    birthday : Date.parseDate("1978-05-17", "Y-m-d"),
    edu : "硕士",
    memo : "无备注"
   }, {
    name : "学生D",
    sex : "女",
    birthday : Date.parseDate("1988-07-14", "Y-m-d"),
    edu : "硕士",
    memo : "无备注"
   }];

 // proxy
 var proxy = new Ext.data.MemoryProxy(data);

 // 定义记录结果
 var Human = Ext.data.Record.create([{
    name : "Name",
    type : "string",
    mapping : "name"
   }, {
    name : "Sex",
    type : "string",
    mapping : "sex"
   }, {
    name : "Birthday",
    type : "string",
    mapping : "birthday"
   }, {
    name : "Education",
    type : "string",
    mapping : "edu"
   }, {
    name : "Memo",
    type : "string",
    mapping : "memo"
   }, {
    name : "Operation",
    type : "string"
    // mapping:"oper"
  }]);

 var reader = new Ext.data.JsonReader({}, Human);

 //提供数据源
 var store = new Ext.data.Store({
    proxy : proxy,
    reader : reader
   });

 store.load();
 var grid = new Ext.grid.GridPanel({
  title:"学生信息",
  width:700,
  autoHeight:true,
  cm:cm,
  sm:sm,
  store:store,
  renderTo:"a",
  autoExpandColumn:"memo",//自动伸展
  buttonAlign:"center",
  buttons:[{
   text:"第一行",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行选择模型
    rsm.selectFirstRow();
   }
  },{
   text:"上一行",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到选择行的模型
    if(!rsm.hasPrevious()){
     Ext.Msg.alert("警告","已到达第一行");
    }else{
     rsm.selectPrevious();
    }
   }
  },{
   text:"下一行",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行选择模型
    if(!rsm.hasNext()){
     Ext.Msg.alert("警告","已到达最后一行");
    }else{
     rsm.selectNext()
    }
   }
  },{
   text:"最后一行",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行选择模型
    rsm.selectLastRow();
   }
  },{
   text:"全选",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行选择模型
    rsm.selectAll();
   }
  },{
   text:"全不选",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行选择模型
    rsm.deselectRange(0,grid.getView().getRows().length - 1);
   }
  },{
   text:"反选",
   handler:function(){
    var rsm = grid.getSelectionModel();//得到行选择模型
    for (var i = grid.getView().getRows().length - 1; i >= 0; i--) {
     if(rsm.isSelected(i)){
      rsm.deselectRow(i);
     }else{
      rsm.selectRow(i,true);//必须保留原来的,否则效果无法是实现
     }
    }
   }
  }]
  
 });
})

 


分享到:
评论

相关推荐

    JqueryGrid 无刷新分页

    当用户点击分页按钮时,jQueryGrid会发送一个包含当前页数和每页显示条数的请求到服务器,服务器根据这些参数返回对应的数据,然后jQueryGrid将新数据动态插入到表格中,实现页面内容的局部更新。 三、实现步骤 1. ...

    Grid布局综合Demo案例

    通过使用媒体查询(Media Queries),我们可以根据屏幕尺寸改变网格的结构和大小。例如,当屏幕宽度小于600px时,我们可以重新定义网格布局: ```css @media (max-width: 600px) { .container { grid-template-...

    JsGrid官网离线版/离线文档

    JsGrid是一个基于jQuery的开源库,它的主要功能是为网页提供一个可定制的数据网格,支持数据的添加、删除、编辑和查询操作。这种数据网格非常适合用于管理和显示大量结构化的数据。 **2. 安装与引入** 离线使用Js...

    jquery网页表格插件pqgrid-2.4.1.zip

    这对于数据查询和分析而言,提供了极大的便利。 控制要显示的列头是PQGrid的自定义功能之一,开发者可以根据实际需求选择显示哪些列,隐藏不重要的列,使得界面更加简洁,同时也避免了信息过载的问题。用户也可以...

    Laravel开发-grid-view

    `限制每页显示的记录数。 - **排序和过滤**:可以添加链接或按钮,利用JavaScript或者重新发送Ajax请求,改变查询参数来实现排序和过滤功能。 4. **第三方库** 在Laravel社区中,有许多现成的包可以帮助快速实现...

    jquery Grid Demo

    jQuery Grid 是一个强大的数据展示和管理工具,它基于 jQuery 库,提供了丰富的功能,包括数据的排序、查询、分页等,使得开发者能够快速构建交互式的表格应用。在本篇文章中,我们将深入探讨 jQuery Grid 的核心...

    Ext4 grid打印

    这通常涉及到媒体查询@media print,来专门为打印设置样式规则。 5. **插件支持**:Ext4 Grid可能需要借助特定的插件来实现打印功能,如Ext.grid.plugin.Printer。这些插件通常会处理大部分细节,包括表头的重绘和...

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

    - Grid通常配合Paging Toolbar使用,它会显示页码和页大小选择器。通过将Paging Toolbar添加到Grid下方,可以方便用户导航和控制分页。 - 配置`store`属性指向之前定义的Store,并设置`displayInfo`为`true`来显示...

    Laravel开发-grid

    我们可以很容易地将分页集成到grid中,使用户能够逐页浏览数据。 5. **Sorting and Filtering**:Laravel grid可以实现数据的排序和过滤。通过监听用户的交互事件,动态更新Eloquent查询条件,实现列排序,并且可以...

    带搜索的grid

    1. 数据管理:数据库管理工具,如MySQL Workbench,用Grid显示查询结果并支持搜索。 2. 电子表格:类似Excel的Web应用,如Google Sheets,具备Grid和搜索功能。 3. CRM系统:客户信息管理,通过Grid展示客户列表,...

    ext2.0 grid 分页实例(php)

    Grid组件是Ext JS中一个强大的数据展示工具,能够以表格形式展示大量数据,而分页则是处理大数据集时不可或缺的功能,它可以提高用户体验并优化系统性能。 首先,让我们理解什么是Ext JS Grid。Grid是一种用户界面...

    grid网格布局页面+响应式.zip

    这通常通过使用弹性布局(Flexbox)、Grid布局以及媒体查询(Media Queries)来实现。媒体查询允许我们针对不同的视口宽度定义不同的样式规则,确保页面在手机、平板电脑和桌面等不同设备上都能良好显示。 3. **...

    Grid++Report6.0.0.6.rar

    5. **打印与导出**:Grid++Report具备强大的打印功能,允许用户设置打印范围、页边距、方向等参数。同时,它支持将报表导出为多种格式,如PDF、Excel、HTML、图片等,方便分享和离线查看。 6. **版本更新**:6.0....

    Laravel开发-laravel-grid

    5. **分页**:Laravel Grid通常会自动处理分页,但你可以根据需要自定义每页记录数,如`$grid-&gt;paginate(20)`。 6. **渲染**:最后,确保在视图文件中正确地输出Grid,一般通过`{!! $grid !!}`将Grid实例渲染为HTML...

    基于grid布局实现的响应式栅格系统

    Grid布局的关键属性包括`display: grid`用于开启网格容器,`grid-template-columns`和`grid-template-rows`定义网格的列和行,以及`grid-gap`来设置网格项之间的间距。 2. 响应式设计原理: 响应式设计是一种确保...

    ext grid json分页显示

    3. DWR接收到请求后,根据这些参数在后端数据库执行相应的SQL查询,获取对应页的数据,并将其转换为JSON格式。 4. 后端返回JSON数据到前端,EXT Grid解析JSON,渲染新的数据行,并更新分页状态。 5. 这样,用户就能...

    grid.rar_grid布局

    5. **响应式设计**:CSS Grid也支持响应式设计,通过媒体查询(`@media`)可以针对不同屏幕尺寸调整网格布局。 6. **图片(1.jpg)的作用**:通常,图片文件可能是用来可视化网格布局的示意图,帮助用户更直观地理解4...

    jquery的强大Grid控件

    在"jquery的强大Grid控件"中,我们可以看到它集成了分组、排序、查询、固定表头、滚动条以及更新和插入数据等多种功能,为用户提供了优秀的交互体验。 1. **分组功能**:jQuery Grid允许用户根据一列或多列对数据...

    grid++ report在线报表的使用笔记

    2. 数据绑定:将查询结果绑定到报表单元格,Grid++ Report会自动处理数据的显示格式。 五、运行与预览 1. 实时预览:在设计过程中,你可以随时预览报表效果,确保满足预期。 2. 参数化报表:支持参数输入,使得...

    960-Grid-System

    - **Fluidity**:虽然960 Grid System以固定宽度为基础,但通过CSS媒体查询,可以实现响应式设计,以适应不同设备的屏幕尺寸。 2. **优势** - **效率**:960 Grid System为设计师提供了模板,可以快速搭建页面...

Global site tag (gtag.js) - Google Analytics