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 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
在node中如何使用 ES6
Apr 22 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
JavaScript错误处理
2015/02/03 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
构建一个JavaScript插件系统
2020/10/20 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
python网络爬虫学习笔记(1)
2018/04/09 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
python3.7调试的实例方法
2020/07/21 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
保洁公司服务承诺书
2014/05/28 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
初二学生评语大全
2014/12/26 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技