用repeater列数据，我想达到csdn中的贴子列表中的效果

用repeater列数据，我想达到csdn中的贴子列表中的效果，大家看一下，在csdn这个窗口中，如果拖动窗口改变窗口宽度，贴子的标题如果超出了，标题会截断并在后面加上一个...。请问下这是如何实现的。能给个小例子最好。另谁有jquery 下的 table ui的插件，能达到extjs中那种可以拖表头，复合表头效果的？

解决方案 »

  1.   

    本帖最后由 net_lover 于 2012-04-25 10:45:50 编辑
      

  2.   


    贴子的标题如果超出了，标题会截断并在后面加上一个...。
    方法很多，http://blog.csdn.net/chinajiyong/article/details/7389998
      

  3.   

    例子
    <%@ Page Language="C#" EnableViewState="false" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
      // 计算数据，完全可以从数据库取得
      System.Data.DataTable CreateDataSourceByXianhuiMeng()
      {
        System.Data.DataTable dt = new System.Data.DataTable();
        System.Data.DataRow dr;
        dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String)));
        dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String)));    for (int i = 0; i < 8; i++)
        {
          dt.Rows.Add(new Object[] { 
                                  "孟子章" + i.ToString(), 
                                  "学生姓名学生姓名学生姓名学生姓名学生姓名学生姓名学生姓名" + i.ToString()
                       });
        }
        return dt;
      }  protected void Page_Load(object sender, EventArgs e)
      {
        Repeater1.DataSource = this.CreateDataSourceByXianhuiMeng();
        Repeater1.DataBind();
      }
    </script>
    <html>
    <head>
      <title></title>
      <style>
        td
        {
          font-size: 12px;
          overflow: hidden;
          padding-left: 5px;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
        }
        table
        {
          table-layout: fixed;
        }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
          <table width="100%" cellspacing="0" cellpadding="0" border="0">
        </HeaderTemplate>
        <FooterTemplate>
          </table></FooterTemplate>
        <ItemTemplate>
          <tr><td style="width: 100px">
            <%#Eval("学生班级")%></td><td>
              <%#Eval("学生姓名")%></td></tr>
        </ItemTemplate>
      </asp:Repeater>
      </form>
    </body>
    </html>
      

  4.   

    text-overflow: ellipsis;
    这句样式就是告诉你 如果超出容器宽度怎么显示