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

2016-02-19 13:54 1 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

但在这个模型中,由于不能利用这些控件,我们需要借助纯Javascript和html静态代码来实现,感觉好像挺麻烦的?其实呢......
分页代码既然由Webservice接口服务端中间层处理好回传回来,那么我们的排序代码也可以这样的,只是在回传前进行排序就ok了,下面就分析一下。
  看过上篇的文章,可以知道在Webservice接口服务端中间层处理数据是操纵泛型的List对象
代码

代码如下:

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

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

代码如下:

(本文来源于图老师网站,更多请访问https://www.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://www.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://www.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://www.tulaoshi.com/webkaifa/)

按降序排列

来源:https://www.tulaoshi.com/n/20160219/1605577.html

延伸阅读
标签: 办公软件
  大家知道,在Word中,为字符添加的下划线,默认情况下是紧靠字符下方的。能不能调整一下字符和下划线之间的距离呢?答案是肯定的。     1. 启动Word2003(其它版本请仿照操作),输入字符“分离下划线的制作”。     2. 选中“下划线”及前后各一个(多个也可以)字符(即“离下划线的”),...
标签: Web开发
用$.ajax()时我设置了超时时间为3秒: 代码如下: $.ajax({ url: "ajaxTable1.aspx", cache: false, error: function(XMLHttpRequest, textStatus, errorThrown) { // }, success: function(html) { // }, timeout: 3000 }); ajaxTable1.aspx页面中我通过Thread.Sleep(1000 * 5); 使页面延迟5秒后再继续执行,所以ajax请求会超...
标签: Web开发
JavaScript中sort函数方法是返回一个元素已经进行了排序的 Array 对象。 使用方法: 其中arrayObj是必选项。任意 Array 对象。 sortFunction是可选项。是用来确定元素顺序的函数的名称。如果这个参数被省略,那么元素将按照 ASCII 字符顺序进行升序排列。 JavaScript中sort函数方法将 Array 对象进行适当的排序;在...
解析手机摄影中的焦光分离   最初看到焦光分离这个词,是在华为官微对P7拍摄性能的介绍上,一个连我听起来都觉得无比别扭的词,对于广大没有摄影经验的用户来说也许根本不知道是什么意思,官方给出的解释是焦光分离通常用于光线明暗对比强烈的场面,通过分离焦点和测光点使画面最接近真实场景,翻译成摄影术语就是非联动测光, 究竟...
标签: Web开发
jQuery事件模型的功能有: 提供建立事件处理程序的统一方法; 允许在每个元素上为每个时间类型建立多个处理程序; 采用标准的事件类型名称,例如click或mouseover; 使用Event实例可用作处理程序的参数; 对Event实例的最常用的属性进行规范化; 为取消事件和阻塞默认操作提供统一方法。 jQuery绑定事件处理程序: bind()命令 $('img')...

经验教程

247

收藏

62
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部