JQuery 构建客户/服务分离的链接模型中Table中的排序分析

smile晨飞扬

smile晨飞扬

2016-02-19 13:54

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。
但在这个模型中,由于不能利用这些控件,我们需要借助纯Javascript和html静态代码来实现,感觉好像挺麻烦的?其实呢......
分页代码既然由Webservice接口服务端中间层处理好回传回来,那么我们的排序代码也可以这样的,只是在回传前进行排序就ok了,下面就分析一下。
  看过上篇的文章,可以知道在Webservice接口服务端中间层处理数据是操纵泛型的List对象
代码

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
ListTB_WEB_NZ_INVESTMENT list = new ListTB_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的顺序实现升序和降序排列

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
public int Compare(obj x , obj y)
{
//如果比较的列所对应的表字段的数据类型是DateTime,不同的数据类型对应不同的
return DateTime.Compare(x,y); -- 升序
//return DateTime.Compare(y,x); -- 降序
}

开始构建中间层比较器对象
代码

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
/// summary
/// 对象比较器
/// /summary
public class ContributivePerson_INV_Comparer : IComparerTB_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 : IComparerTB_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

从以上代码中,我们构造了两个比较器,分别是,
我们构造一个工厂方法,来方便调用
代码

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
/// summary
/// 对象排序比较器工厂
/// /summary
public class ContributivePerson_SortComparerFactory
{
/// summary
///
/// /summary
/// param name="FieldName"/param
/// returns/returns
public IComparerTB_WEB_NZ_INVESTMENT GetSortComparer(string FieldName, ESortType eSortType)
{
IComparerTB_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接口端的新写的方法,我们看见红色代码段是排序块,绿色注解是过滤代码块(代码已经略去)
代码

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
/// 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)
{
ListTB_WEB_NZ_INVESTMENT list = new ListTB_WEB_NZ_INVESTMENT();
list = objBusinessFacade.GetTB_WEB_NZ_INVESTMENT_CollectionByFlowID(FlowID);
ContributivePerson_SortComparerFactory objFactory = new ContributivePerson_SortComparerFactory();
IComparerTB_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语句进行排序。在客户端的页面只要添加必要的参数就可以实现了,中间层服务端已经实现了全部的核心,客户端代码只需要判别是哪个列要进行排序,同时注意等按排序的顺序翻页即可,这里客户端的代码略去
效果图:
按列进行升序排列

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

按降序排列

展开更多 50%)
分享

猜你喜欢

JQuery 构建客户/服务分离的链接模型中Table中的排序分析

Web开发
JQuery 构建客户/服务分离的链接模型中Table中的排序分析

JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探

Web开发
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery控制listbox中项的移动并排序

Web开发
jquery控制listbox中项的移动并排序

SQL Server中数据仓库的构建与分析

SQLServer
SQL Server中数据仓库的构建与分析

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

解读分析服务中的数据挖掘功能

编程语言 网络编程
解读分析服务中的数据挖掘功能

针对SQL Server中业务规则链接的分析

SQLServer
针对SQL Server中业务规则链接的分析

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jquery中的sortable排序之后的保存状态的解决方法

jquery中的sortable排序之后的保存状态的解决方法

老师专做打劫的! - QQ搞笑分组

老师专做打劫的! - QQ搞笑分组
下拉加载更多内容 ↓