繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 构建客户/服务分离的链接模型中Table中的排序分析
- Javascript
- JavaScript DOM学习第八章 表单错误提示
- JavaScript DOM 学习第九章 选取范围的介绍
- JavaScript CSS修改学习第一章 查找位置
- JavaScript CSS修改学习第二章 样式
- JavaScript CSS修改学习第三章 修改样式表
- JavaScript CSS 修改学习第四章 透明度设置
- JavaScript CSS修改学习第五章 给“上传”添加样式
- JavaScript CSS修改学习第六章 拖拽
- Jquery乱码的一次解决过程 图解教程
- javascript 包裹节点 提高效率
- javascript inneHTML的地雷
- javascript 定义新对象方法
- 判定对象是否为window的js代码
- jquery validator 插件增加日期比较方法
- jquery 得到当前页面高度和宽度的两个函数
- JavaScript 编写匿名函数的几种方法
- jQuery 操作下拉列表框实现代码
- jQuery入门问答 整理的几个常见的初学者问题
- 第一个JavaScript入门基础 document.write输出
- javascript入门基础之私有变量
Javascript 中的 JQuery 构建客户/服务分离的链接模型中Table中的排序分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 38 ::
收藏到网摘: n/a
从上篇文章，我们实现了Table分页代码的高效性，咱们继续沿着这个思路，探讨Table表格数据中另外一个很常见的排序问题。说到排序，我记得在asp.net中 GridView中提供了这样的方便，只需在展示字段上加上 Sorting 这样的属性，基本就完成了，剩下就是服务端cs代码的写法了。 但在这个模型中，由于不能利用这些控件，我们需要借助纯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()方法
显然我们不能使用默认比较器来进行排序，因为如果这样就达不到目的（我们需要在页面点击某列就按该列进行排序，而默认比较器就达不到这种精准的控制），注：这里并未采用在数据库上进行排序，为什么？因为通过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语句进行排序。在客户端的页面只要添加必要的参数就可以实现了，中间层服务端已经实现了全部的核心，客户端代码只需要判别是哪个列要进行排序，同时注意【首页】【下一页】等按排序的顺序翻页即可，这里客户端的代码略去
效果图：
按【余额缴付期限】列进行升序排列
按【投资人】降序排列
评论 (0) All
