`
liubl2011
  • 浏览: 236780 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

Extjs4 grid的排序

阅读更多
Extjs版本ext-4.0.2a
grid支持两种排序方法
一种是前段排序,不请求后台本页面列字段进行排序在grid的列中设置属性sortable: true,
第二种排序是后台排序,请求后台对整个数据进行排序,在store中设置属性remoteSort: true,
第一种排序代码:
var grid = Ext.create('Ext.grid.Panel', {
  title: '任务计划管理列表',
  region: 'center',
  store: store,
  columns: [ {
      header: '任务名称',
      sortable: true, //设置这个属性进行排序
      dataIndex: 'task_name'
  }]
});

第二种后来排序代码:
var store = Ext.create('Ext.data.ArrayStore', {
    model: 'Task',
    autoLoad: true,
    pageSize: 20,
    // 设置服务器端映射。
    proxy: {
    	type: 'ajax',
        url: 'task/getTaskInfo',
        // 定义数据结构
        reader: {
        	type: 'json',
            totalProperty: 'totalProperty',
            root: 'root'
        }
    },
    remoteSort: true //设置属性进行请求后台排序
});

后台java中会接收到几个固定的字符串
json格式的名为sort的字符串里面包括两个属性一个是property是要排序的字段名,另一个是direction里面会有两个值( ASC 或DESC )我是用google的开源解析json的工具包gson来对其进行解析,代码如下:
  public static Map<String,String> getSort(String sort){
    	Gson gson = new Gson();
    	Map<String,String> map = new HashMap<String,String>();
    	if(sort == null || "".equals(sort)){
    	  map.put("direction", "");
        	map.put("property", "");
    	}else{
    	  List<SortData> sortData = gson.fromJson(sort, new TypeToken<List<SortData>>(){}.getType());
        	map.put("direction", sortData.get(0).getDirection());
        	map.put("property", sortData.get(0).getProperty());
    	}
    	return map;
    }

取得数据的代码片段如下:
if(sort != null){
  Map<String,String> map = new HashMap<String,String>();
  map = CommonUtils.getSort(sort);
  String property = map.get("property");//排序的字段名和前台mode中字段名一致
  String direction= map.get("direction");//字符串( ASC 或DESC )
}


然后请求后台数据库进行排序,在制造的时候前台的字段名尽量和数据库的字段名保持一致,这样方便了很多东西。
一起同store请求传过来的参数还有名为start的int型参数,名为limit的int型数据,他们是分页条件,start是开始记录数,limit是本页最大记录数。
小宝制造。
分享到:
评论
6 楼 juzhihai 2015-07-13  
[list]
[*][img][url][align=left][size=small][size=xx-small][size=xx-small][b]啊实打实大[color=red][/color][/b][/size][/size][/size][/align][/url][/img]
[/list]
5 楼 liubl2011 2013-03-28  
青蛙的脑袋 写道
受教了···后台直接用个String sort就可以接到前台的sort参数,而没有把其他的参数接过来,是由于框架的原因吗???

应该都传过来 如果没有排序后台不会传sort参数,同样你不把参数写到ajax请求里面也不会自动去页面取得参数。
4 楼 青蛙的脑袋 2013-03-13  
受教了···后台直接用个String sort就可以接到前台的sort参数,而没有把其他的参数接过来,是由于框架的原因吗???
3 楼 青蛙的脑袋 2013-03-12  
为什么我的ajax提交方式是以get方式提交的···
2 楼 liubl2011 2012-01-05  
grid上只能选择一列进行排序啊。你是想怎么操作呢,清楚一点。
1 楼 qqdenghaigui 2012-01-04  
那多个字段排序呢?求赐教!!!

相关推荐

    Extjs grid 中文排序问题修正

    在EXTJS开发中,我们经常会遇到使用Grid组件展示数据的情况,特别是当数据包含中文字符时,可能会遇到排序问题。EXTJS Grid默认的排序机制对于英文字符处理得较好,但对于中文字符,由于编码和比较规则的不同,可能...

    Extjs4 grid使用例子

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

    ExtJs表格grid中文排序函数方法

    ExtJs中文排序函数方法详解 在ExtJs框架中,实现中文排序功能是一件非常重要的事情。今天,我们将详细介绍如何使用ExtJs实现中文排序,特别是使用Ext.data.Store.prototype.createComparator()函数来实现中文排序。...

    extjs4Grid和jqGrid对比.doc

    ### ExtJs 4 Grid 与 jqGrid 对比分析 #### 一、数据展示对比 在数据展示方面,ExtJs 4 Grid 和 jqGrid 都采用了 JSON 格式的数据交互方式,但两者在实现机制上存在一定的差异。 1. **ExtJs 4 Grid**: - **耦合...

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

    - `GridPanel` 是EXTJS中用于展示表格数据的组件,它可以灵活地处理大量数据,并提供排序、分页、过滤等功能。 - 在 `GridComboBox` 中,`GridPanel` 作为下拉菜单的内容,使用户能以表格形式查看和选择数据。 3....

    ExtJs6.5Grid列表导出(包含样式)

    Grid是一个可配置的组件,用于显示数据集并提供交互式功能,如排序、筛选和编辑。它的核心组成部分包括Store(存储数据)、Model(定义数据字段)和Columns(定义列的显示方式)。 要实现导出功能,我们需要关注...

    ExtJS 使用grid显示数据

    在ExtJS中,Grid Panel是一种数据驱动的组件,它允许开发者以表格的形式展示大量数据,并且支持分页、排序、过滤、编辑等功能。要创建一个Grid,首先需要定义数据模型(Model),它描述了数据的结构,包括字段名和...

    Extjs动态GRID

    EXTJS Grid支持自定义表头菜单,用户可以通过右键点击表头来选择排序、隐藏列等操作。开发者可以自定义这个菜单,添加更多功能,如列过滤、列锁定等。 6. 数据源绑定: EXTJS Grid的数据通常来源于Store,一个数据...

    ExtJs动态grid的生成

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

    Extjs4 Grid分页与自动刷新

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

    EXTJS grid导出EXCEL文件

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

    ExtJs Grid选择行

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

    extjs表格Grid比较全面的功能

    ExtJS表格Grid是一款强大的JavaScript组件,它在Web应用中用于展示和操作数据,尤其是在复杂的业务逻辑和大量数据处理中表现出色。这篇博客文章主要探讨了ExtJS Grid的全面功能,结合源码分析和实用工具,帮助开发者...

    ExtJS_grid.rar_Grid javascript_extjs grid

    - **Grid Panel**:是ExtJS中的一个核心组件,用于显示二维数据,可以进行排序、筛选、分页等操作。 - **Store**:存储Grid的数据,可以是从服务器获取的JSON、XML或Array格式的数据,也可以是本地数据。 - **...

    Spring+JPA+ExtJs(Grid)

    包括如何设置Spring Boot项目,定义JPA实体,配置数据源和事务管理,使用Spring Data JPA的仓库接口,以及在ExtJS中创建Grid,绑定数据源,实现分页和排序功能。这样的项目有助于提升开发者在前后端数据交互、UI设计...

    extjs grid

    EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和处理数据。EXTJS 4.2.1是EXTJS的一个稳定版本,它包含了多项改进和新特性,以提升用户体验和开发者的工作效率。 在EXTJS ...

    Extjs4前台前台grid导出excel

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

    extjs grid示例代码

    ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...

    Ext.net实现GridPanel拖动行、上移下移排序功能DEMO

    对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...

    EXTJS Grid总结例子

    EXTJS Grid是一款强大的数据展示组件,广泛应用于Web应用开发中,尤其在数据密集型界面设计时,EXTJS Grid以其高效的数据加载、灵活的分页、排序、过滤和自定义功能而受到开发者青睐。本总结例子将深入探讨EXTJS ...

Global site tag (gtag.js) - Google Analytics