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