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

Fork Me

表格解决方案

典型案例演示

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

文章标题 发布时间 评论数  

文章列表为空

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

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。可选参数,具体见下表(置灰表示不常用):
参数名称 支持类型 默认值 释义
ajaxOptions Object {} Ajax请求参数。支持下面这些参数。
url
必需。String。Ajax请求地址。
data
可选。Object|Function。Ajax请求附带参数,支持Function类型,适合需要发送实时数据的场景。
success
可选。Function。Ajax成功的回调,支持一个参数,为后端返回的JSON对象。
error
可选。Function。Ajax失败的回调,请求成功但返回错误码也会触发。
complete
可选。Function。Ajax完成的回调,无论成功失败都会触发。
pageOptions Object {/*见释义*/} 分页相关的一些参数。

默认值如下:

{
  // 总数据量
  total: 0,
  // 每页数目
  per: 15,
  // 当前页数
  current: 1
  // 接口映射关系
  keyMap: {
    key: '',
    total: 'total',
    per: 'per',
    current: 'current'
  }
}
本参数可以用来指定默认每页个数以及指定LuLu UI分页字段和后端分页字段的映射关系,其中后面的作用,也就是keyMap属性更常用,例如后端返回分页信息如下:
{
  "code": 0,
  "data": {
    "pageInfo": {
      "pageIndex": 1,
      "pageSize": 20,
      "pageMax": 6,
      "totalCount": 99
    }
  }
}

则此时,keyMap参数设定为:

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

其中key指放置分页相关数据的接口关键字名称。如果直接在data下,则为空即可。

pageList Array [15,30,50] 分页下拉的列表数据。
parse Function function () {} 对Ajax返回的数据进行解析,并返回对应列表的HTML字符串,如果没有数据,返回空字符串。此参数虽然名义上可选,参数实际开发必定会用到。

其中上下文this是当前实例对象,支持一个参数,为后端返回的最原始的JSON数据对象。

onShow Function function () {} 列表显示时候的回调方法。其中,上下文this为当前实例对象,没有支持的参数。
onPage Function null 点击分页的回调方法。就是Pagination组件的onClick回调。本组件内置分页点击行为(请求与列表刷新),如果您使用了自定义事件,会覆盖内置的事件。注意,是覆盖。因此,本参数,适用于一些高级应用场景。

上下文this为当前实例对象,支持两个参数,分别表示点击的分页元素,以及点击的页码数值。

onCheck Function function () {} 点击复选框时候的回调。

其中,上下文this为当前实例对象。支持4个参数isAllChecked, isAllUnchecked, eleCheckbox, eleAllTdCheckbox,第1个参数为布尔值,表示是否全部选中,第2个参数也是布尔值,表示是否所有都没选中,第3个参数为元素对象,表示当前点击的复选框元素,第4个参数是数组,表示所有可用的复选框元素集合。

关于实例对象

实例对象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);
});
本页贡献者:

zhangxinxu