LuLu UI Edge版中文文档 » 表格列表
教程

表格列表

安装与调用

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

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Table.css">

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

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/comp/Table.css">

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

作为包文件引入：

import 'lu2/theme/edge/css/common/ui/Table.css';
import 'lu2/theme/edge/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://unpkg.com/lu2/theme/edge/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结构，按需调整列的数量，绑定交互。具体可参考“表格解决方案”中的JS代码。

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>
     <ui-loading rows="15"></ui-loading>
</div>
  2. 数据为空（普通提示文字，仅分页）
    标题1 标题2
    暂无数据

    HTML代码如下：

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

    回收站为空

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

    共0名成员, 每页显示15

    HTML代码如下：

    <div class="table-x" is="ui-table">
    <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" data-type="total">0</output>名成员，每页显示<ui-drop class="table-page-per" data-type="per">15</ui-drop>
        </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" width="100%">
        <tr>
            <th><input type="checkbox" is="ui-checkbox"></th>
            <th>粉丝</th>
            <th width="30%">评论内容</th>
            <th>评论时间</th>
            <th">所有评论</th>
        </tr>
        <tr>
            <td><input type="checkbox" is="ui-checkbox"></td>
            ...
        </tr>
        ...
    </table>
    <!-- 底部分页 -->
    <div class="table-page-x">
        <div class="table-page-data">
            共<output class="table-page-total" data-type="total">2</output>名成员, 每页显示<ui-drop class="table-page-per" data-type="per">15</ui-drop>
        </div>
        <div class="table-page"></div>
    </div>
</div>

    Chrome浏览器下设置width为外部尺寸无法让溢出的文字点点点显示，这是有问题的，此时需要在<table>元素上设置width="100%"进行外部尺寸重置。

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

本页贡献者：

zhangxinxu