2010年8月12日


思路来源  用return this;来写FluentInterface ,结合我之前写过一些方法进行整理写出来的,主要的功能是进行排序字段的样式处理,如果用js+dom操作更容易实现。 

 

用此方法在后台拼table的时候,可以大量减少tr,td,th标签的使用,相对来说,代码量简洁了很多,比用系统的table要简单的多。

 

代码风格类似jquery,所有代码是基于服务器生成。

 

建立一个表格对象

var  t = new HtmlControls.Table()

添加一行

t.NewRow();//新建一行
t.NewRow().AddTH("序号").AddTH("第一行");//在此行中添加对应的表头单元格
t.NewRow().AddTD("序号").AddTD("第一行");//在此行中添加对应的行单元格
t.NewRow().AddTH("序号").AddTH("第一行").EndRow();//结束本行

其他函数

Class(string classname)//设置css样式,相当于jq中的addClass函数
Css(string properties)//设置style属性,相当于jq中的css函数
ColumnSpan(int value)//设置单元格的colspan属性,仅对单元格有效
RowSpan(int value)// 设置单元格的rowspan属性,仅对单元格有效
CellPadding(int value)//设置表格的cellspacing属性
CellSpacing(int value) //设置表格的cellpadding属性

扩展用法,针对表格排序后各个单元格的变化情况

构造函数

 

public Table(string field, FieldSort sort) //设置当前的排序字段,与排序方法(Asc,Desc)

 

所有单元格可以使用如下方法

 

Compare(string compare)  //要对比排序字段
Compare(string compare, FieldSort defaultsort)  //默认的排序方法

 

如:

 

t.NewRow().AddTH("序号").AddTH("第一行").Compare("lineA", Table.FieldSort.Asc)
t.NewRow().AddTD("序号").AddTD("A").Compare("lineA")

 

同时要指定排序响应的事件OrderingEvent,javascript或url

如:javascript:pOrdering('{0}',{1}) //0代表排序字段,1代表排序方向

 

部分使用代码及效果

简单添加表格

使用代码如下:

 

t = new WebDemo.HtmlControls.Table();
t.NewRow().AddTH("序号")//添加表头
          .AddTH("第一行")
          .AddTH("第二行")
          .AddTH("第三行")
          .AddTH("第四行")
          .AddTH("第五行")
          .EndRow();
for (int i = 1; i <= 5; i++)
{
    t.NewRow().AddTD(i.ToString())//添加行单元格
              .AddTD("A")
              .AddTD("B")
              .AddTD("C")
              .AddTD("D")
              .AddTD("E")
              .EndRow();
}

 

稍复杂的表格

使用代码如下:

 

t = new WebDemo.HtmlControls.Table().CellPadding(1).CellSpacing(1).Class("t_data");
t.NewRow()
          .AddTH("序号").RowSpan(2)//设置rowspan属性
          .AddTH("行号").ColumnSpan(5)//设置colspan属性
          .EndRow();
t.NewRow().Class("sub")
          .AddTH("第一行")
          .AddTH("第二行")
          .AddTH("第三行")
          .AddTH("第四行")
          .AddTH("第五行").Css("color:#f00")//对最后一个表头添加CSS样式
          .EndRow();
for (int i = 1; i <= 5; i++)
{
    t.NewRow().Class(i % 2 == 0 ? "odd" : "eve")//添加隔行变色
              .AddTD(i.ToString())//添加行单元格
              .AddTD("A")
              .AddTD("B")
              .AddTD("C")
              .AddTD("D")
              .AddTD("E").Css("color:#f00")
              .EndRow();
}

 

排序表格生成, 所有表头都可以进行相应的排序(正序,反序)

使用代码如下:

 

table = new Table(filed, sort).CellPadding(1).CellSpacing(1);
table.OrderingEvent = "javascript:pOrdering('{0}',{1})";
table.DefaultSort = Table.FieldSort.Desc;
table.NewRow()
     .AddTH("序号")
     .AddTH("股票代码").Compare("code", Table.FieldSort.Asc)
     .AddTH("股票名称")
     .AddTH("最新价").Compare("price")
     .AddTH("最新涨幅").Compare("ratio")
     .AddTH("昨收价").Compare("prev")
     .AddTH("最高价").Compare("high")
     .AddTH("最低价").Compare("low")
     .AddTH("成交量").Compare("volume")
     .AddTH("成交额").Compare("money")
     .EndRow();
foreach (var info in data)
{
    table.NewRow().Class((index++) % 2 == 0 ? "e" : "o")
        .AddTD(index.ToString())
        .AddTD(info.StockCode).Compare("code")
        .AddTD(info.StockName)
        .AddTD(info.LastestPrice.ToString("F2").Color(info.RaiseDownRatio,0f)).Compare("price")
        .AddTD(info.RaiseDownRatio.ToString("P2").Color(info.RaiseDownRatio, 0f)).Compare("ratio")
        .AddTD(info.PrevClosePrice.ToString("F2")).Compare("prev")
        .AddTD(info.HighPrice.ToString("F2")).Compare("high")
        .AddTD(info.LowPrice.ToString("F2")).Compare("low")
        .AddTD(info.Volume.ToString("N0")).Compare("volume").Class("right")
        .AddTD(info.Money.ToString("N2")).Compare("money").Class("right")
        .EndRow();
}

 

原代码和DEMO

 

-------------------------------------------------------------------------------------

凡客之程序员娱乐一下(转)

--------------------------------------------------------------------------------------

posted @ 2010-08-12 19:52 liy 阅读(1035) 评论(2) 编辑

2009年11月4日

摘要: 原文出处:http://www.cnblogs.com/QLeelulu/archive/2008/04/21/1163021.htmljQuery Ajax 全解析 本文地址: jQuery Ajax 全解析本文作者:QLeelulu转载请标明出处!jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。废话少说,直接...阅读全文
posted @ 2009-11-04 13:51 liy 阅读(55) 评论(0) 编辑

2009年7月8日

摘要: 一些常用的正则表达式阅读全文
posted @ 2009-07-08 13:06 liy 阅读(60) 评论(1) 编辑

2008年4月25日

摘要: JQuery操作一个表格 阅读全文
posted @ 2008-04-25 19:52 liy 阅读(13012) 评论(1) 编辑

2008年4月17日

摘要: 从一个网上找到的Web2经典配色 阅读全文
posted @ 2008-04-17 19:10 liy 阅读(1151) 评论(4) 编辑

2008年4月2日

摘要: C#下一个SQL SERVER数据库操作类 阅读全文
posted @ 2008-04-02 18:20 liy 阅读(1925) 评论(0) 编辑
摘要: JQuery:单选框,复选框取值 阅读全文
posted @ 2008-04-02 11:33 liy 阅读(4515) 评论(1) 编辑

2008年3月18日

摘要: asp.net中客户端保持与服务器时间一致 阅读全文
posted @ 2008-03-18 16:02 liy 阅读(364) 评论(0) 编辑

公告

昵称:liy
园龄:3年10个月
粉丝:2
关注:2

导航

<2012年2月>
2930311234
567891011
12131415161718
19202122232425
26272829123
45678910

统计

  • 随笔 - 8
  • 文章 - 0
  • 评论 - 8
  • 引用 - 1

搜索

 

常用链接

我的标签

随笔分类(1)

随笔档案(8)

积分与排名

  • 积分 - 32118
  • 排名 - 3313

最新评论

阅读排行榜

评论排行榜

推荐排行榜