LuLu UI pure版中文文档 » 表格列表
Fork Me

表格列表

作为插件单独使用

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

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Table.css">

如果还有其他状态样式、分页结构布局样式等，还需要引入：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/comp/Table.css">

详见：综合实例-表格解决方案

纯表格列表

例如：

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

HTML代码如下：

<table class="ui-table">
    <thead>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
    </thead>
    <tbody>
        <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>
    </tbody>
</table>

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

复合表格列表

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

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

首先，需要引入下面CSS：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/comp/Table.css">

然后……

基本HTML结构

表格列表的完整结构为：

<!-- 若有表格第一列为复选框，添加类名table-checkbox -->
<div class="table-x">
    <!-- 列表 -->
    <table class="ui-table"></table>
    <!-- 列表无数据的占位 -->
    <div class="table-null-x"></div>
    <!-- 列表加载loading，依赖Loading.css -->
    <div class="ui-loading"></div>
    <!-- 底部分页 -->
    <div class="table-page-x"></div>
</div>

.ui-table中的一般结构就是上面演示的“纯表格列表”结构。

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

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

实际项目开发，直接复制上面固定的HTML结构即可，然后<table>中<thead>需要按需求自己补全，最后参考“表格解决方案”中的JS代码new Table()处理下即可。

HTML结构与效果展示

  1. loading加载效果
    标题1 标题2

    HTML代码如下：

    <div class="table-x">
    <table class="ui-table">
      <tr>
        <th>标题1</th>
        <th>标题2</th>
      </tr>
      <tbody></tbody>
     </table>
     <div class="ui-loading"></div>
</div>

    IE9浏览器下上面的图标是不旋转的，如果想要让IE9浏览器图标也旋转，则可以上面loading相关HTML替换成下面这个：

    <div class="ui-loading"></div>
↓
<ui-loading rows="15"></ui-loading>

    并引入Loading.js。

  2. 数据为空（普通提示文字，仅分页）
    标题1 标题2
    暂无数据

    HTML代码如下：

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

    回收站为空

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

    共0名成员, 每页显示15

    上面“每页显示 15”只是静态演示，并没有绑定交互效果。使用“表格解决方案”中的Table.js提供的方法绑定下就有效果了。

    HTML代码如下：

    <div class="table-x">
    <table class="ui-table">
        <tr>
            <th>标题1</th>
            <th>标题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>系统将在用户删除成员一个工作日后，<br>自动彻底清理</p>
        </div>
    </div>
    <!-- 底部分页 -->
    <div class="table-page-x">
        <div class="table-page-data">
            共<output class="table-page-total">0</output>名成员, 每页显示<a href="javascript:" class="table-page-per">15</a>
        </div>
        <div class="table-page"></div>
    </div>
</div>
  4. 包含复选（需要Checkbox.css）和标题

    用户评论

    粉丝 评论内容 评论时间 所有评论
    烦人的小妖精娜娜酱
    [已置顶]不错，赞一个以后天天关注。
    		 2015-06-26 12:34 通过
    司徒中
    对于估值近期的大幅下跌，证监会新闻发言人张晓军26日表示：这是市场前期过快上涨的自然调整，是市场自身运行规律的结果，有流动性波动，投资去杠杆等因素叠加的原因。
    		 2015-06-26 18:11 不通过
    共2名成员, 每页显示15 
    <div class="table-x table-checkbox">
    <!-- 列表标题头 -->
    <div class="table-header">
        <h2 class="table-title">用户评论</h2>
    </div>
    <table class="ui-table">
        <tr>
            <th><input type="checkbox" id="chkAll"><label class="ui-checkbox" for="chkAll"></label></th>
            <th>粉丝</th>
            <th width="30%">评论内容</th>
            <th>评论时间</th>
            <th">所有评论</th>
        </tr>
        <tr>
            <td><input type="checkbox" id="chk"><label class="ui-checkbox" for="chk"></label></td>
            ...
        </tr>
        ...
    </table>
    <!-- 底部分页 -->
    <div class="table-page-x">
        <div class="table-page-data">
            共<output class="table-page-total">2</output>名成员, 每页显示<a href="javascript:" class="table-page-per">15</a>
        </div>
        <div class="table-page"></div>
    </div>
</div>

复杂Table表格常规列表以外的样式通常与业务关系比较密切，属于UI组件体系以外的东西，因此相关CSS资源不在common/ui目录下，而是在common/comp目录下，需要额外CSS请求。

本页贡献者：

zhangxinxu