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 用cloneNode方法克隆节点的代码
Oct 15 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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
MySQL相关说明
2007/01/15 PHP
php中cookie的作用域
2008/03/27 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
php文件包含的几种方式总结
2019/09/19 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Python连接Impala实现步骤解析
2020/08/04 Python
动物科学专业毕业生的自我评价
2013/11/29 职场文书
中国央视网签名寄语
2014/01/18 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
python munch库的使用解析
2021/05/25 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS