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