`
liubl2011
  • 浏览: 234362 次
  • 性别: 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中文排序函数方法

    功能: 中文排序功能 具体: 实现按照中文信息,进行排序 用法: 将此方法,放到ext-all.js文件最后,或者放到html页面最上面,总之要在Ext初始化之后,实际代码调用之前执行。

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

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

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

    ExtJs+Dwr带分页分组传参后台排序功能的grid 主要包含:这个主要用到ExtJS+DWR+Spring+Hibernate,主要包括浏览页(usernamerecord.jsp),脚步文件(usernamerecord.js),dwr分页代理脚本文件(dwrproxy.js),...

    ExtJs中gridpanel分组后组名排序实例代码

    主要介绍了ExtJs中gridpanel分组后组名排序实例代码,有需要的朋友可以参考一下

    extjs_GroupPropertyGrid.js

    基于extjs分组propertyGrid ,分组不排序

    ExtJS下grid的一些属性说明

    1.界面修改(css style): Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的... GroupingView, EditorGridPanel): Extjs的grid功能强大,如排序、隐藏列或移动列等,这些都有一些属

    ExtJS(ajax框架) 4.2.1

    单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染...

    extjs2.2.1

    单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染...

    Ext Js 4 + Struts2 + Json实现list列表的展现(使用ExtJs的Grid控件)

    (1)它可以根据ID、Name、Company、Money和Booktime进行排序(升序/降序),点击标题栏后在升序和降序间切换; (2)可以随意拖动列宽,在某列值很长,而列宽不够被遮挡是特别有用; (3)支持列的显示/不显示,...

    EXTJS4.0 MVC 架构 GRID 应用

    基于EXT4.0 MVC 模式开发GRID DEMO 包括:GRID 分页、分组、排序、编辑等等常用功能 访问路径:http://localhost/Ext4Mvc/gridManager/gm.html

    ext.net-extjs

    单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染...

    深入浅出ExtJS第2版

    深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...

    EXTJS 3.3.1例子

     单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。  自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行...

    extjs3.2 资源包文件

    ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽改变列...

    Extjs中文文档.pdf

    ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。  功能丰富,无人能出其右  无论是界面之美,还是功能之强,ext的表格控件都高居榜首。  单选行,多选行,高亮显示选中的行,推拽...

    精通JS脚本之ExtJS框架.part2.rar

    第4章 ExtJS事件机制 4.1 设计模式——观察者模式 4.2 自定义事件 4.3 浏览器事件 4.4 ExtJS中的事件 4.4.1 Function.call()/apply()方法 4.4.2 函数的作用域 4.4.3 Ext.lib.Event事件 4.4.4 Ext.util....

    jq-extgrid v1.2 表格插件

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

    extjs4.0开发技术文档

    单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,...

    ExtJS 4.2.0

    单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,...

Global site tag (gtag.js) - Google Analytics