LuLu UI pure版中文文档 » 表格解决方案

典型案例演示

本案例演示重点在分页与列表交互，复选框选中与列表交互，列表中动态内容的事件处理，以及外部的搜索、删除如何影响列表的显示。

	文章标题	发布时间	评论数

文章列表为空

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

共0名成员, 每页显示15

代码

1. 需要comp/Table.css

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

2. 列表HTML占位

<div class="table-x table-checkbox">
    <table id="tableMix" class="ui-table">
        <thead>
          <tr>
            <th><input type="checkbox" id="chkAll"><label class="ui-checkbox" for="chkAll"></label></th>
            <th>文章标题</th>
            <th width="22%">发布时间</th>
            <th width="15%" align="right">评论数</th>
            <th width="15%" align="center">&nbsp;</th>
          </tr>
        </thead>
        <tbody></tbody>
    </table>
    <!-- 列表无数据的占位 -->
    <div class="table-null-x" style="dislay:none;">
        <div class="table-null">
            <img src="delete.png" width="69" height="80">
            <h2>文章列表为空</h2>
            <p>系统将在用户删除文章一个工作日后，<br>自动彻底清理</p>
        </div>
    </div>
    <!-- 列表加载loading -->
    <ui-loading rows="15"></ui-loading>
    <!-- 底部分页 -->
    <div class="table-page-x">
        <div class="table-page-data" style="dislay:none;">
            共<span class="table-page-total">0</span>名成员, 每页显示<a href="javascript:" class="table-page-per">15</a>
        </div>
        <div class="table-page"></div>
    </div>
</div>

如果对文案和样式没有特别高的要求，“列表无数据的占位”元素.table-null-x可以删除，到时候会显示“暂无数据”。

如果你对样式要求不高，但对文案有要求，可以下面这样：

<div class="table-null-x" style="dislay:none;">这里是你的文案</div>

3. Table方法相关JS代码

// 搜索表单和删除按钮元素
var eleMixForm = document.querySelector('#mixSearchForm');
var eleBtnDelete = document.querySelector('#delAllComment');
// 列表实例方法
var mixTable = new Table('#tableMix', {
    // ajax请求的参数
    ajaxOptions: {
        url: '/get',
        data: function () {
            return {
                key: encodeURIComponent(eleMixForm.querySelector('input').value)
            };
        }
    },
    // 解析后端返回JSON数据为列表HTML字符串
    parse: function (json) {
        // 返回对应的HTML
        // 推荐基于模板渲染，这里使用字符拼接演示
        var html = '';
        json.data.data.forEach(function (obj, index) {
            html = html + '...';
        });
        return html;
    },
    // 点击单选框后的回调
    onCheck: function (isAllChecked, isAllUnchecked) {
        if (isAllUnchecked) {
            eleBtnDelete.removeAttribute('href');
        } else {
            eleBtnDelete.setAttribute('href', 'javascript:');
        }
    }
});
// 列表删除事件演示
// 需要走委托才行
mixTable.element.table.addEventListener('click', function (event) {
    if (event.target.matches('a.icon_del')) {
        new Dialog().confirm('确认删除该评论？');
    }
});
// 搜索
new Validate(eleMixForm, function () {
    // 触发列表重新加载，传递了部分参数
    mixTable.ajax({
        data: {
            action: 'search',
            current: 1
        }
    });
});
// 删除全部评论
eleBtnDelete.addEventListener('click', function () {
    if (!this.hasAttribute('href')) {
        return;
    }
    new Dialog().confirm('确认删除选中的这些评论？', {
        buttons: [{
            value: '删除',
            events: function (event) {
                mixTable.ajax({
                    data: {
                        action: 'empty'
                    },
                    // 请求成功之后回调
                    success: function () {
                        eleBtnDelete.removeAttribute('href');
                    }
                });
                event.dialog.remove();
            }
        }, {}]
    });
});

Ajax请求返回的数据需要包含数据总量字段，默认是total，可以使用可选参数替换成其他。例如可以是：

{
    "error": 0,   // 或者"code": 0
    "total": 50,
}

或者：

{
    "error": 0,    // 或者"code": 0
    "data": {
        "total": 50,
        "data": []
    }
}

语法和参数

语法

var myTable = new Table(element, options);

参数

element

必需。Element|String。<table>元素或者<table>元素的选择器。

options

可选。Object。可选参数，具体见下表（置灰表示不常用）：

{
  // 总数据量
  total: 0,
  // 每页数目
  per: 15,
  // 当前页数
  current: 1
  // 接口映射关系
  keyMap: {
    key: '',
    total: 'total',
    per: 'per',
    current: 'current'
  }
}

{
  "code": 0,
  "data": {
    "pageInfo": {
      "pageIndex": 1,
      "pageSize": 20,
      "pageMax": 6,
      "totalCount": 99
    }
  }
}

keyMap: {
  key: 'pageInfo',
  total: 'totalCount',
  per: 'pageSize',
  current: 'pageIndex'
}

关于实例对象

实例对象myTable含有以下属性和方法：

{
    element: {
        // 表格的父元素
        container: null,
        // 表格元素
        table: null,
        // 分别是：没有数据提示元素，loading元素，出错提示元素
        // 三个元素都可以缺省，Table.js会自己创建
        empty: null,
        loading: null,
        error: null,

        // 左侧显示总数元素
        total: null,
        // 左侧显示分页信息的元素
        per: null,
        // 左侧显示总数和分页信息的父元素
        data: null,
        // 显示分页的容器元素
        page: null
    },
    params: {
        // 分页数据
        page: {},
        // 请求数据
        ajax: {},
        // 分页数列表数据
        list: []
    },
    callback: {
        // 一些回调方法
        parse: function () {},
        page: function () {},
        check: function () {},
        show: function () {}
    },
    // 分页下拉列表实例
    dropList: myDrop,
    // 分页实例
    pagination: myPage,
    // 非常常用的Ajax方法，用来刷新列表
    ajax: function(options) {},
    // 列表显示，这个不常用
    show: function() {}
}

尤其需要注意的是上面加粗的ajax实例方法，当我们进行一些外部操作，然后希望刷新列表的时候，只要调用下这个示例方法（注意注意，无需再new一个实例），传入需要的Ajax参数就可以了。

is-table语法

设置了 is-table 属性的 <table> 元素在和页面建立联系的时候，会触发自定义的 connected 事件。

<table class="ui-table" id="tb0" is-table>
    <tbody>空表格</tbody>
</table>

tb0.addEventListener('connected', function () {
    new Table(this);
});