JQuery 构建客户/服务分离的链接模型中Table中的排序分析


Posted in Javascript onJanuary 22, 2010

但在这个模型中,由于不能利用这些控件,我们需要借助纯Javascript和html静态代码来实现,感觉好像挺麻烦的?其实呢......
分页代码既然由Webservice接口服务端中间层处理好回传回来,那么我们的排序代码也可以这样的,只是在回传前进行排序就ok了,下面就分析一下。

看过上篇的文章,可以知道在Webservice接口服务端中间层处理数据是操纵泛型的List对象
代码

List<TB_WEB_NZ_INVESTMENT> list = new List<TB_WEB_NZ_INVESTMENT>(); 
list = objBusinessFacade.GetTB_WEB_NZ_INVESTMENT_CollectionByFlowID(FlowID); 
return new JavaScriptSerializer().Serialize(list);

那么我们的排序代码就嵌在 蓝色行 和 红色行 之间。
如何排序呢?List这个对象里面有个Sort()方法
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
显然我们不能使用默认比较器来进行排序,因为如果这样就达不到目的(我们需要在页面点击某列就按该列进行排序,而默认比较器就达不到这种精准的控制),注:这里并未采用在数据库上进行排序,为什么?因为通过List泛型对象可以处理的事情就没必要又要通过数据库来解决。
List.Sort (泛型 IComparer)
IComparer 是接口由 System.Collections.Generic.List.Sort 和 System.Collections.Generic.List.BinarySearch 方法使用。它提供一种自定义集合排序顺序的方法。
该接口有一个需要重载的方法 int Compare(a,b)
通过调整参数a,b的顺序实现升序和降序排列
public int Compare(obj x , obj y) 
{ 
//如果比较的列所对应的表字段的数据类型是DateTime,不同的数据类型对应不同的 
return DateTime.Compare(x,y); -- 升序 
//return DateTime.Compare(y,x); -- 降序 
}

开始构建中间层比较器对象
代码
/// <summary> 
/// 对象【出资人】比较器 
/// </summary> 
public class ContributivePerson_INV_Comparer : IComparer<TB_WEB_NZ_INVESTMENT> 
{ 
private ESortType m_ESortType = ESortType.ASC; 
public ContributivePerson_INV_Comparer(ESortType eSortType) 
{ 
m_ESortType = eSortType; 
} 
public int Compare(TB_WEB_NZ_INVESTMENT x, TB_WEB_NZ_INVESTMENT y) 
{ 
int rtnCompare = 0; ; 
switch (m_ESortType) 
{ 
case ESortType.ASC: 
rtnCompare = string.Compare(x.INV, y.INV); 
break; 
case ESortType.DESC: 
rtnCompare = string.Compare(y.INV, x.INV); 
break; 
}//switch 
return rtnCompare; 
} 
}//class 
/// <summary> 
/// 【余额缴付期限】比较器 
/// </summary> 
public class ContributivePerson_BALDEPER_Comparer : IComparer<TB_WEB_NZ_INVESTMENT> 
{ 
private ESortType m_ESortType = ESortType.ASC; 
public ContributivePerson_BALDEPER_Comparer(ESortType eSortType) 
{ 
m_ESortType = eSortType; 
} 
public int Compare(TB_WEB_NZ_INVESTMENT x, TB_WEB_NZ_INVESTMENT y) 
{ 
int rtnCompare = 0; ; 
DateTime xDateTime = DateTime.Parse(x.BALDEPER.ToString()); 
DateTime yDateTime = DateTime.Parse(y.BALDEPER.ToString()); 
switch (m_ESortType) 
{ 
case ESortType.ASC: 
rtnCompare = DateTime.Compare(xDateTime, yDateTime); 
break; 
case ESortType.DESC: 
rtnCompare = DateTime.Compare(yDateTime, xDateTime); 
break; 
}//switch 
return rtnCompare; 
} 
}//class

从以上代码中,我们构造了两个比较器,分别是【出资人】,【余额缴付期限】
我们构造一个工厂方法,来方便调用
代码
/// <summary> 
/// 对象排序比较器工厂 
/// </summary> 
public class ContributivePerson_SortComparerFactory 
{ 
/// <summary> 
/// 
/// </summary> 
/// <param name="FieldName"></param> 
/// <returns></returns> 
public IComparer<TB_WEB_NZ_INVESTMENT> GetSortComparer(string FieldName, ESortType eSortType) 
{ 
IComparer<TB_WEB_NZ_INVESTMENT> IComparer = null; 
switch (FieldName) 
{ 
case "BALDEPER"://余额缴付期限 
IComparer = new ContributivePerson_BALDEPER_Comparer(eSortType); 
break; 
case "INV"://投资人 
IComparer = new ContributivePerson_INV_Comparer(eSortType); 
break; 
}//switch 
return IComparer; 
} 
}//class

下面我们进行运用,这个方法是一个Webservice接口端的新写的方法,我们看见红色代码段是排序块,绿色注解是过滤代码块(代码已经略去)
代码
/// <summary> 
/// 分页功能的表格填充服务端(带排序) 
/// </summary> 
/// <param name="FlowID"></param> 
/// <param name="PageCount">每页数目</param> 
/// <param name="CurrentPage">当前页</param> 
/// <param name="SortType">排序类型:"ASC" ,"DESC"</param> 
/// <returns></returns> 
[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
public string Load_ContributivePerson_Table_Sort(string FlowID, int PageCount, 
int CurrentPage, string SortType, string SortFieldName) 
{ 
List<TB_WEB_NZ_INVESTMENT> list = new List<TB_WEB_NZ_INVESTMENT>(); 
list = objBusinessFacade.GetTB_WEB_NZ_INVESTMENT_CollectionByFlowID(FlowID); 
ContributivePerson_SortComparerFactory objFactory = new ContributivePerson_SortComparerFactory(); 
IComparer<TB_WEB_NZ_INVESTMENT> objSort = null; 
if (SortType.ToUpper().Trim() == "ASC") 
{ 
objSort = objFactory.GetSortComparer(SortFieldName,ESortType.ASC); 
} 
else if (SortType.ToUpper().Trim() == "DESC") 
{ 
objSort = objFactory.GetSortComparer(SortFieldName, ESortType.DESC); 
} 
list.Sort(objSort); 
//部分代码略去,略去代码可参看上篇文章 
return new JavaScriptSerializer().Serialize(list); 
}

通过添加比较器,我们达到了在泛型list对象上的随心所欲的排序,而不需要通过SQL语句进行排序。在客户端的页面只要添加必要的参数就可以实现了,中间层服务端已经实现了全部的核心,客户端代码只需要判别是哪个列要进行排序,同时注意【首页】【下一页】等按排序的顺序翻页即可,这里客户端的代码略去
效果图:
按【余额缴付期限】列进行升序排列

JQuery 构建客户/服务分离的链接模型中Table中的排序分析

 

按【投资人】降序排列

JQuery 构建客户/服务分离的链接模型中Table中的排序分析

Javascript 相关文章推荐
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 #Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 #Javascript
jQuery 入门级学习笔记及源码
Jan 22 #Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 #Javascript
Jquery实战_读书笔记2 选择器
Jan 22 #Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 #Javascript
jquery last-child 列表最后一项的样式
Jan 22 #Javascript
You might like
Dedecms常用函数解析
2008/02/01 PHP
PHP递归创建多级目录
2015/11/05 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
AngularJS 视图详解及示例代码
2016/08/17 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
详解flask入门模板引擎
2018/07/18 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
简单了解django索引的相关知识
2019/07/17 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
酒店中秋节促销方案
2014/01/30 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫
Golang Web 框架Iris安装部署
2022/08/14 Python