用return this对System.Web.UI.WebControls.Table的另类简单封装

思路来源  用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

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

凡客之程序员娱乐一下（转）

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