`

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技术下的列表组件不太熟悉的...

    kernel-devel-4.18.0-553.45.1.el8-10.x86-64.rpm

    Rocky Linux 8.10内核包

    Simulink中三阶单环多位量化Σ-Δ调制器的设计与实现-音频带ADC的应用(复现论文或解答问题,含详细可运行代码及解释)

    内容概要:本文档详细介绍了如何在Simulink中设计一个满足特定规格的音频带ADC(模数转换器)。首先选择了三阶单环多位量化Σ-Δ调制器作为设计方案,因为这种结构能在音频带宽内提供高噪声整形效果,并且多位量化可以降低量化噪声。接着,文档展示了具体的Simulink建模步骤,包括创建模型、添加各个组件如积分器、量化器、DAC反馈以及连接它们。此外,还进行了参数设计与计算,特别是过采样率和信噪比的估算,并引入了动态元件匹配技术来减少DAC的非线性误差。性能验证部分则通过理想和非理想的仿真实验评估了系统的稳定性和各项指标,最终证明所设计的ADC能够达到预期的技术标准。 适用人群:电子工程专业学生、从事数据转换器研究或开发的技术人员。 使用场景及目标:适用于希望深入了解Σ-Δ调制器的工作原理及其在音频带ADC应用中的具体实现方法的人群。目标是掌握如何利用MATLAB/Simulink工具进行复杂电路的设计与仿真。 其他说明:文中提供了详细的Matlab代码片段用于指导读者完成整个设计流程,同时附带了一些辅助函数帮助分析仿真结果。

    计算机课后习题.docx### 【计算机科学】研究生入学考试计算机组成原理专项题库设计:考研复习资源集成与优化

    内容概要:该题库专为研究生入学考试计算机组成原理科目设计,涵盖名校考研真题、经典教材课后习题、章节题库和模拟试题四大核心模块。名校考研真题精选多所知名高校的计算机组成原理科目及计算机联考真题,并提供详尽解析,帮助考生把握考研命题趋势与难度。经典教材课后习题包括白中英《计算机组成原理》(第5版)和唐朔飞《计算机组成原理》(第2版)的全部课后习题解答,这两部教材被众多名校列为考研指定参考书目。章节题库精选代表性考题,注重基础知识与重难点内容,帮助考生全面掌握考试大纲要求的知识点。模拟试题依据历年考研真题命题规律和热门考点,精心编制两套全真模拟试题,并附标准答案,帮助考生检验学习成果,评估应试能力。 适用人群:计划参加研究生入学考试并报考计算机组成原理科目的考生,尤其是需要系统复习和强化训练的学生。 使用场景及目标:①通过研读名校考研真题,考生可以准确把握考研命题趋势与难度,有效评估复习成效;②通过经典教材课后习题的练习,考生可以巩固基础知识,掌握解题技巧;③通过章节题库的系统练习,考生可以全面掌握考试大纲要求的各个知识点,为备考打下坚实基础;④通过模拟试题的测试,考生可以检验学习成果,评估应试能力,为正式考试做好充分准备。 其他说明:该题库不仅提供详细的题目解析,还涵盖了计算机组成原理的各个方面,包括计算机系统概述、数据表示与运算、存储器分层、指令系统、中央处理器、总线系统和输入输出系统等。考生在使用过程中应结合理论学习与实践操作,注重理解与应用,以提高应试能力和专业知识水平。

    __UNI__DB9970A__20250328141034.apk.1

    __UNI__DB9970A__20250328141034.apk.1

    minio-rsc-Rust资源

    rust for minio

    4-4-台区智能融合终端功能模块型式规范(试行).pdf

    国网台区终端最新规范

    《基于YOLOv8的化工管道焊缝缺陷检测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    python源码-1个机器学习相关资源

    一个简单的机器学习代码示例,使用的是经典的鸢尾花(Iris)数据集,通过 Scikit-learn 库实现了一个简单的分类模型。这个代码可以帮助你入门机器学习中的分类任务。

    pyqt离线包,pyqt-tools离线包

    pyqt离线包,pyqt-tools离线包

    《基于YOLOv8的船舶机舱灭火系统状态监测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    SQL常用日期和时间函数整理及使用示例

    SQL常用日期和时间函数整理及在sqlserver测试示例 主要包括 1.查询当前日期GETDATE 2.日期时间加减函数DATEADD 3 返回两个日期中指定的日期部分之间的差值DATEDIFF 4.日期格式转换CONVERT(VARCHAR(10),GETDATE(),120) 5.返回指定日期的年份数值 6.返回指定日期的月份数值 7.返回指定日期的天数数值

    GSDML-V2.3-Turck-BL20-E-GW-EN-20160524-010300.xml

    GSDML-V2.3-Turck-BL20_E_GW_EN-20160524-010300.xml

    T_CPCIF 0225-2022 多聚甲醛.docx

    T_CPCIF 0225-2022 多聚甲醛.docx

    《基于YOLOv8的智能仓储货物堆码倾斜预警系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    《基于YOLOv8的智能仓储货物堆码倾斜预警系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计

    蚕豆脱壳机设计.zip

    蚕豆脱壳机设计.zip

    附件2-2:台区智能融合终端入网专业检测单位授权委托书.docx

    台区终端电科院送检文档

    Y6一39一No23.6D离心通风机 CAD().zip

    Y6一39一No23.6D离心通风机 CAD().zip

    django自建博客app

    django自建博客app

Global site tag (gtag.js) - Google Analytics