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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
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实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python和shell监控linux服务器的详细代码
2018/06/22 Python
详解Python打包分发工具setuptools
2019/08/05 Python
关于python中remove的一些坑小结
2021/01/04 Python
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
公务员职业生涯规划书范文  
2014/01/19 职场文书
模范教师事迹材料
2014/02/10 职场文书
综合内勤岗位职责
2014/04/14 职场文书
工作所在部门证明
2014/09/21 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
入党政审材料范文
2014/12/24 职场文书
公诉意见书范文
2015/06/05 职场文书
团委副书记工作总结
2015/08/14 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
Golang实现可重入锁的示例代码
2022/05/25 Golang