`

GT-Grid 1.0 基础教程(九)

阅读更多
GT-Grid 1.0 基础教程(九)

教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里

第九章: 排序

第一章中的示例 就已经具备排序功能了, 但是只是简单的客户端排序.
客户端排序处理的数据并不一定时"当前页的数据",
而是"所有在客户端的数据",也就是说,当你将数据全部加载到客户端,在客户端进行分页时,客户端排序实际上排列的就是所有数据.

本章将讲解 自定义排序函数 以及如何进行 服务端排序.

将上一章编写的"mydemo8.html"另存为"mydemo9.html".



=========================================



先来说一个 很重要 但是很简单的属性:columns定义中的 "sortable" 属性,
顾名思义,当不希望某一列可排序时,就把那一列的该属性设置为 false, 本例中不希望对"详细信息"列进行排序,那么可如下定义:

var  colsConfig ={

	/* ... 略去其他属性设置 ...*/

	{ id : 'detail'   , header : "详细信息" , width : 120, sortable : false,
		renderer : function(value ,record,columnObj,grid,colNo,rowNo){
			return '&#160;<a href=".?no='+record['no']+'" style="margin-left:3px;" >&#160;'+ record['name'] +' 的详细信息&#160;</a>';
		}
	}
];





=========================================



下面说一说自定义排序函数. GT-Grid 自身只提供了两种数据排序方式 : 按数字数据排序 和 按字符串数据排序.
这两种排序显然无法应对多样的需求, 所以GT-Grid 提供了一个 接口函数,columns定义中的 : getSortValue(  value, recrod )
开发人员重写该接口,就可以实现自定义的更加复杂的排序方式.
例如有这样一个需求 : 按照姓名的字符串长度排序. 那么我们可以这么定义 姓名 列:

var  colsConfig ={

	/* ... 略去其他属性设置 ...*/

	{ id : 'name'    , header : "姓名" , width : 100 ,  editable:false ,  editor: { type :'text' ,validRule : 'R' }	,
		getSortValue : function(value , record){
			return value?value.length:0;
		}		
	},
];



getSortValue函数的两个参数分别为:
  value :当前记录中,该列对应的数据
  record : 排序时的 当前记录.


在上例中, 排序时,取响应数值时就不再是 取记录的"name"值,而为变为了取name的字符串长度,从而实现了按姓名字符长度排序的功能.
在这里就暂时先不列举更复杂的例子了.



=========================================




下面该说一说 服务端排序了. 要使用服务端排序,需要 将 grid的 remoteSort 属性设置为 true.
var gridConfig={
	/* ... 略去其他属性设置 ...*/
	remoteSort :  true
}


下一步要知道 排序信息 传递到后台的格式, 以及后台如何处理这些信息了.

排序信息 是和 load信息 一起提交到后台的 其格式如下(注意看 sortInfo 部分:

{
	action	 : 'load',	
	pageInfo : {
		/* ... 略去pageInfo信息 ...*/
	},

	sortInfo : [
			{ 
				columnId : "排序的列id" , 
				fieldName : "排序的列对应的dataset中的field字段名" ,
				sortOrder : "asc"  // 排序的顺序状态 : 升序"asc"  降序"desc"  默认"defaultsort"
			}
		]
}


大家可能注意到了, sortInfo信息对应的是一个数组, 这是为了将来做多重排序而准备的. 在目前版本(1.1之前),该数组最多只会有一组排序信息.

后台得到这个信息之后, 可以把 sortInfo 转换为一个 List对象.
而这个list的第一个元素 就是排序的信息了, 然后开发人员就可以根据这些排序信息来实现服务端的排序了.
(与服务端结合的完整示例 会有与此相关的参考实现)
看一下示例中的  GridServerHandler 类下的 initSortInfo方法 和 getSingleSort 方法 大家应该可以更好的理解读取sortInfo信息的原理.



=========================================



关于服务端的排序 就先讲到这里, 下一章将讲解的是过滤功能(客户端和服务端)的实现.

.


分享到:
评论
1 楼 playfish 2008-07-30  
呵呵,我觉得一个组件要强大,要被更多的人应用,详细的文档是第一位的,国外的开源社区一般都会有详细的文档与支持,这点对于开发者来说,非常重要。
持续关注GT。。

相关推荐

    GT-Grid 1.0 基础教程

    本基础教程旨在帮助初学者快速理解并掌握GT-Grid 1.0 的核心概念和基本操作,以便在实际项目中应用。下面将详细阐述GT-Grid 1.0 的关键知识点。 一、GT-Grid 1.0 概述 GT-Grid 1.0 是一个基于Java开发的分布式计算...

    GT-Grid 1.0 基础教程(一)转载

    ### GT-Grid 1.0 基础教程(一)——纯客户端只读列表开发详解 #### 一、教程背景与目标 本教程旨在帮助初学者快速掌握如何使用GT-Grid开发纯客户端只读列表的基本技能。对于那些对Ajax技术下的列表组件不太熟悉的...

    gt-grid 基础教程

    **gt-grid基础教程** 在网页开发中,数据的展示往往是不可或缺的部分,特别是在处理大量结构化信息时。`gt-grid`是一款由"胖哥"开发的高效、功能丰富的表格组件,专为页面展示设计,旨在帮助开发者更便捷地构建数据...

    gt-grid的一个例子

    在这个“gt-grid的一个例子”中,我们将深入探讨如何使用`gt-grid`的基本功能,并通过实际代码示例来理解其工作原理。 首先,`gt-grid` 提供了灵活的数据绑定机制,可以方便地将后台数据源与前端表格进行对接。在...

    GT-Grid 教程示例

    GT-Grid 教程示例 GT-Grid 教程示例GT-Grid 教程示例GT-Grid 教程示例

    gt-grid demo 源码下载

    《GT-Grid 源码解析与后台交互实践》 GT-Grid 是一款功能强大的数据网格组件,广泛应用于Web应用中展示和管理大量结构化数据。本次我们将通过"gt_grid_demo"源码下载来深入理解GT-Grid的运作机制及其与后台数据交互...

    gt-grid 表格源码,开发包,api手册

    "gt-grid 表格源码,开发包,api手册"这一资源主要涵盖了用于构建数据表格的前端组件的源代码、开发工具以及相关的API文档。gt-grid是一个强大的数据展示和操作框架,它允许开发者以灵活的方式展示和管理大量结构化...

    最新的GT-Grid vs EXT-Grid例子(超级经典)

    在例子中,我们可以看到三种不同场景的应用,这些例子可能展示了GT-Grid和EXT-Grid在处理基础数据展示、高级功能集成以及自定义程度上的差异。例如,可能有一个例子专门对比两者的数据加载速度,另一个可能比较各自...

    GT-grid 例子

    GT-Grid 是一款强大的数据网格组件,常用于前端开发中展示和操作大量结构化数据。在Web应用中,它提供了一种高效的方式来呈现表格数据,支持排序、筛选、分页、编辑等多种功能,大大提升了用户体验。这个压缩包文件...

    GT-Grid 是一个基于Ajax技术的列表组件

    GT-Grid 是一个基于Ajax技术的列表组件. 拥有丰富的功能以及良好易用性和用户体验. 它是 EC Side列表组件 的更新换代产品. (ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jsp...

    gt-grid.rar+demo

    "gt-grid.rar+demo"这个压缩包文件包含的是关于"gt-grid"的样例源码。"gt-grid"是一个常见的前端数据展示控件,通常用于创建高性能、可定制的表格,它在Web应用中广泛使用,特别是在大数据量的场景下。下面我们将...

    最新版GT-grid-好用的表格组件

    10. **文档与示例**:为了方便开发者快速上手,GT-grid提供了详尽的文档和丰富的示例代码,从基础用法到高级功能,都有清晰的指导。 在最新的版本中,GT-grid不仅在功能上进行了增强,而且在用户体验和性能优化上也...

    gt-grid 分页 用ajax 开发的 里面有例子

    在本示例中,“gt-grid 分页 用ajax 开发的 里面有例子”显然演示了如何使用`gt-grid`配合Ajax实现分页功能。 首先,我们需要理解Ajax的核心概念。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的...

    网页Grid组件 GT-Grid组件

    网页Grid组件,特别是GT-Grid组件,是Web开发中一种强大的数据展示工具,它为开发者提供了灵活、高效且功能丰富的表格解决方案。Grid组件在网页应用中扮演着至关重要的角色,用于展示结构化数据,支持排序、筛选、...

    GT-GRID插件下载

    GT-GRID是一款基于jQuery的强大的数据网格插件,主要用于展示和操作大量结构化的数据。它在Web应用中常被用于创建功能丰富的表格,提供类似数据库的分页、排序、过滤和编辑功能,使得用户可以方便地浏览和管理数据。...

    Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_

    标题中的“Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_”提到了几个关键元素,分别是“Draw-Grid”,“CATIA 插件”,“catia车线”以及“下载”。这表明我们要讨论的是一个用于CATIA软件的...

    GT-Grid 1.36 版 前后台结合示例

    NULL 博文链接:https://fins.iteye.com/blog/283672

    Ag-Grid Demo2.7z

    3. **社区资源**:网上有许多关于ag-Grid的讨论和教程,可以从中获取更多实用技巧和解决常见问题的方法。 总之,这个"Ag-Grid Demo2.7z"是学习和探索ag-Grid的一个好起点,无论你是前端开发者还是数据展示需求者,...

    GT-Grid 列表组件[1]

    列表组件N0.1(国产) 用过之后你才知道优化 初学者提供问题解答哈 qq 406235245

    NVIDIA-GRID-Linux-KVM-470.63-470.63.01.zip

    此压缩包"NVVIDIA-GRID-Linux-KVM-470.63-470.63.01.zip"包含了与NVIDIA GRID相关的两个关键组件,以及一系列相关的文档,这些文档提供了详细的安装指南、更新说明和用户手册。 首先,我们来看一下两个主要的运行时...

Global site tag (gtag.js) - Google Analytics