LuLu UI组件中文文档 » 列表

列表

一、纯列表

例如:

标题1 标题2 标题3
第1行项目1 第1行项目2 第1行项目3
第2行项目1 第3行项目2 第4行项目3

HTML代码如下:

<table class="ui-table">
    <tr>
      <th scope="col">标题1</th>
      <th scope="col">标题2</th>
      <th scope="col">标题3</th>
    </tr>
    <tr>
      <td>第1行项目1</td>
      <td>第1行项目2</td>
      <td>第1行项目3</td>
    </tr>
    <tr>
      <td>第2行项目1</td>
      <td>第3行项目2</td>
      <td>第4行项目3</td>
    </tr>
</table>

通过给<table>元素设置类名.ui-table实现。

二、复合列表

实际项目开发时候,列表通常和分页一起出现,有时候甚至还有大大的表格头甚至搜索框,此时列表结构就相对复杂些。

同时还会存在数据为空以及加载出错等常见等。LuLu ui基于实践经验,进行了这方面的支持。

首先,需要引入下面CSS:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/comp/Table.css">

然后……

  • 基本HTML结构

    表格列表的完整结构为:

    <!-- 外框投影,若有第一列为复选框,添加类名table-checkbox -->
    <div class="table-x">
        <!-- 尺寸控制,主要是高度 -->
        <div class="table-size">
            <!-- 列表 -->
            <table class="ui-table"></table>
            <!-- 列表无数据的占位 -->
            <div class="table-null-x"><span class="table-null">暂无数据</span></div>
            <!-- 列表加载loading -->
            <div class="ui-loading"><i class="ui-loading-icon"></i></div>
         </div>
         <!-- 底部分页 -->
         <div class="table-page-x"></div>
    </div>
    

    .ui-table中的一般结构为:

    .table-page-x中的一般结构为:

    <!-- 控制每页列表数目,若无此需求,缺省即可 -->
    <div class="table-page-data">
        共<span class="table-num-length">0</span>名成员, 每页显示<a href="javascript:" class="table-page-every"><span class="table-num-every">15</span><i class="ui-droplist-arrow"></i></a>
    </div>
    <div class="table-page"><!-- 分页由JS动态创建 --></div>

    按照实际项目使用情况来看,基本上要使用列表就是复制上面固定的HTML结构(<table><thead>需要按需求自己补全),然后应用“富交互列表”解决方案即可。

  • HTML结构与效果展示

    1. 数据为空(普通提示文字,仅分页)
      标题1 标题2
      暂无数据

      HTML代码如下:

      <div class="table-x">
          <div class="table-size">
              <table class="ui-table">
                <tr>
                  <th scope="col">标题1</th>
                  <th scope="col">标题2</th>
                </tr>
                <tbody></tbody>
               </table>
               <div class="table-null-x">
                  <div class="table-null">暂无数据</div>
               </div>
           </div>
           <!-- 底部分页 -->
           <div class="table-page-x">
              <div class="table-page"></div>
           </div>
      </div>
    2. 数据为空(精致提示)
      标题1 标题2

      回收站为空

      系统将在用户删除成员一个工作日后,
      自动彻底清理

      0名成员, 每页显示15

      HTML代码如下:

      <div class="table-x">
          <div class="table-size">
              <table class="ui-table">
                <tr>
                  <th scope="col">标题1</th>
                  <th scope="col">标题2</th>
                </tr>
                <tbody></tbody>
               </table>
               <div class="table-null-x">
                  <div class="table-null">
                      <img src="delete.png" width="69" height="80">
                      <h2>回收站为空</h2>
                      <p class="table-null-desc">系统将在用户删除成员一个工作日后,<br>自动彻底清理</p>
                  </div>
               </div>
           </div>
           <!-- 底部分页 -->
           <div class="table-page-x">
              <div class="table-page-data">
                  共<span class="table-num-length">0</span>名成员, 每页显示<a href="javascript:" class="table-page-every dropPageEvery"><span class="table-num-every">15</span><i class="ui-droplist-arrow"></i></a>
              </div>
              <div class="table-page"></div>
           </div>
      </div>
    3. 包含搜索与复选
      文字内容 时间
      【澳大堡礁加速衰亡】澳大利亚旅游业正面临一击重创,其标志性自然“国宝”大堡礁加速衰亡,联合国教科文组织正考虑将其列入“危险”名录。大堡礁拥有世界上最大的珊瑚礁,生活着1500种鱼类和4000多类软体动物。然而过度开发、污染和气候变化威胁,让大堡礁的健康陷入危境。 2015-06-26 12:34
      对于估值近期的大幅下跌,证监会新闻发言人张晓军26日表示:这是市场前期过快上涨的自然调整,是市场自身运行规律的结果,有流动性波动,投资去杠杆等因素叠加的原因。 2015-06-26 18:11
      2名成员, 每页显示15
    4. 内标题列表

      用户评论

      粉丝 评论内容 评论时间 所有评论
      烦人的小妖精娜娜酱
      [已置顶]不错,赞一个以后天天关注。
      2015-06-26 12:34 通过
      司徒中
      对于估值近期的大幅下跌,证监会新闻发言人张晓军26日表示:这是市场前期过快上涨的自然调整,是市场自身运行规律的结果,有流动性波动,投资去杠杆等因素叠加的原因。
      2015-06-26 18:11 不通过
      2名成员, 每页显示15

补充说明:以上所展示的复杂Table列表(除去列表本身)都是UI组件体系以外的东西,因为通常与业务关系比较密切,因此相关CSS资源不在common/ui目录下,而是和表格组件JS对应的common/comp文件夹,因此CSS需要额外请求。关于列表综合效果演示,可参见“富交互列表”。

三、列表样式单独使用

如果想以插件形式单独使用列表的UI,而不是所有UI组件集合commom/ui.css,也是支持的,直接引入:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Table.css">

单独使用Demo演示

如果还有分页等样式,还需要引入:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/comp/Table.css">

详见:综合实例-富交互列表

Fork Me 返回顶部