LuLu UI组件中文文档 » 列表
Fork Me
关于
命名与设计
使用与发布
组件
颜色
按钮
文本框
搜索框
文本域
表格
loading效果
占位符
单复选框
Switch开关
Select下拉框
Datalist数据列表
Range范围选择
Color颜色选择
Dialog弹框
Tips等提示
LightTip轻提示
Pagination分页
Drop等下拉
Validate表单验证
DateTime日期选择
Tab选项卡切换
综合实例
富交互列表
表单解决方案

列表

一、纯列表

例如：

标题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 返回顶部