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是本页最大记录数。
小宝制造。
分享到:
相关推荐
在EXTJS开发中,我们经常会遇到使用Grid组件展示数据的情况,特别是当数据包含中文字符时,可能会遇到排序问题。EXTJS Grid默认的排序机制对于英文字符处理得较好,但对于中文字符,由于编码和比较规则的不同,可能...
在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...
ExtJs中文排序函数方法详解 在ExtJs框架中,实现中文排序功能是一件非常重要的事情。今天,我们将详细介绍如何使用ExtJs实现中文排序,特别是使用Ext.data.Store.prototype.createComparator()函数来实现中文排序。...
### ExtJs 4 Grid 与 jqGrid 对比分析 #### 一、数据展示对比 在数据展示方面,ExtJs 4 Grid 和 jqGrid 都采用了 JSON 格式的数据交互方式,但两者在实现机制上存在一定的差异。 1. **ExtJs 4 Grid**: - **耦合...
- `GridPanel` 是EXTJS中用于展示表格数据的组件,它可以灵活地处理大量数据,并提供排序、分页、过滤等功能。 - 在 `GridComboBox` 中,`GridPanel` 作为下拉菜单的内容,使用户能以表格形式查看和选择数据。 3....
Grid是一个可配置的组件,用于显示数据集并提供交互式功能,如排序、筛选和编辑。它的核心组成部分包括Store(存储数据)、Model(定义数据字段)和Columns(定义列的显示方式)。 要实现导出功能,我们需要关注...
在ExtJS中,Grid Panel是一种数据驱动的组件,它允许开发者以表格的形式展示大量数据,并且支持分页、排序、过滤、编辑等功能。要创建一个Grid,首先需要定义数据模型(Model),它描述了数据的结构,包括字段名和...
EXTJS Grid支持自定义表头菜单,用户可以通过右键点击表头来选择排序、隐藏列等操作。开发者可以自定义这个菜单,添加更多功能,如列过滤、列锁定等。 6. 数据源绑定: EXTJS Grid的数据通常来源于Store,一个数据...
- Grid的顶部通常包含一个工具栏,可以动态添加按钮或其他UI元素,提供搜索、排序或过滤等功能。这些功能可以通过`dockedItems`配置项实现。 6. **Autogrid.js可能的用途** - 文件名"Autogrid.js"暗示可能是一个...
### Extjs4 Grid分页与自动刷新 #### 一、Extjs4 Grid 分页功能实现 在使用Extjs4进行Web应用开发时,Grid控件是常用的数据展示组件之一。对于大数据量的情况,通常需要使用分页来提高用户体验。下面详细介绍如何...
1. **EXTJS Grid组件**:EXTJS Grid是EXTJS的核心组件之一,它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源(如JSON、XML或内存中的数组)配合使用,并通过Store对象进行数据的加载和管理...
在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...
ExtJS表格Grid是一款强大的JavaScript组件,它在Web应用中用于展示和操作数据,尤其是在复杂的业务逻辑和大量数据处理中表现出色。这篇博客文章主要探讨了ExtJS Grid的全面功能,结合源码分析和实用工具,帮助开发者...
- **Grid Panel**:是ExtJS中的一个核心组件,用于显示二维数据,可以进行排序、筛选、分页等操作。 - **Store**:存储Grid的数据,可以是从服务器获取的JSON、XML或Array格式的数据,也可以是本地数据。 - **...
包括如何设置Spring Boot项目,定义JPA实体,配置数据源和事务管理,使用Spring Data JPA的仓库接口,以及在ExtJS中创建Grid,绑定数据源,实现分页和排序功能。这样的项目有助于提升开发者在前后端数据交互、UI设计...
EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和处理数据。EXTJS 4.2.1是EXTJS的一个稳定版本,它包含了多项改进和新特性,以提升用户体验和开发者的工作效率。 在EXTJS ...
在本篇文章中,我们将深入探讨如何在ExtJS4中实现前台Grid的数据导出到Excel功能。 首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中的核心组件之一,用于创建数据网格。它能够动态加载数据,提供排序、过滤、分页...
ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
EXTJS Grid是一款强大的数据展示组件,广泛应用于Web应用开发中,尤其在数据密集型界面设计时,EXTJS Grid以其高效的数据加载、灵活的分页、排序、过滤和自定义功能而受到开发者青睐。本总结例子将深入探讨EXTJS ...