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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 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
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
初识Node.js
2015/03/20 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
解决python 文本过滤和清理问题
2019/08/28 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
keras中的backend.clip用法
2020/05/22 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
2014年创先争优活动总结
2014/05/04 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
群众路线表态发言材料
2014/10/17 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript