LuLu UI中文文档和演示 » 列表使用综合示意

一、富交互列表解决方案

典型案例演示

主要展示js/comp/Table.js的使用。重点在分页与列表交互，复选框选中与列表交互，tips效果与列表交互等，以及外部的搜索啊，删除如何影响列表的显示。

删除文章(只要点击，无论选中几个选项，都是清空，演示目的)

	文章标题	发布时间	评论数

文章列表为空

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

共0名成员, 每页显示15

上面就是一个相对比较真实的列表交互演示。下面的问题是，如何实现呢？

别担心，目前从分页、到列表交互等都已经封装，我们使用很简单。

语法和API

var Table = require(common/comp/Table);
var myTable = new Table(el, options);

如上所示，引入Table模块，然后就可以愉快的使用了。其中：

el为jQuery包装器对象，可以指代<table>元素，也可以是祖先元素.table-x, 组件自己做了智能判断. options为可选参数，如下表（置灰的为不常用参数，可以不用特别关注）：

参数名称	支持类型	默认值	释义
ajaxOptions	Object	`{}`	ajax请求附带的参数。和jQuery `$.ajax()`方法支持的参数几乎完全一致，除了`data`参数支持Function类型，已发送实时动态请求数据。这里设置的参数作用于当前实例下的所有请求，如果需要传递额外的参数，使用`myTable.ajax()`方法。本组件默认Ajax请求数据类型是`'json'`, 内置一些回调处理。如果您自定义了`success`, `error`等回调，会和组件内置回调合并。其中，`url`也就是Ajax地址是必不可少的的。
pageOptions	Object	`{ // 总数据量 length: 0, // 每页显示数目 every: 15, // 当前的页数 current: 1 // 前后端接口隐射关系 keyMap: { key: '', length: 'total', every: 'every', current: 'current' } }`	分页相关的一些参数。按照实际使用情况来看，用的到的参数是其中的`keyMap`，因为后端分页命名可能是其他的，例如： { "code": 0, "data": { "pageInfo": { "pageIndex": 1, "pageSize": 20, "pageMax": 6, "totalCount": 113 } } } 则此时，keyMap参数设定为： keyMap: { key: 'pageInfo', length: 'totalCount', every: 'pageSize', current: 'pageIndex' } 其中`key`指放置分页相关数据的接口关键字名称。如果直接在`data`下，则为空即可。
parse	Function	`function(data) { if (typeof data == 'string') { return data; } return ''; }`	对Ajax返回的数据进行解析，并返回对应列表的HTML字符串，如果没有数据，返回空字符串。此参数基本上必须使用的。由于本组件多团队使用，每个团队使用的模板技术不一样，因此，数据解析没有内置，大家根据自己团队情况自行处理。如果Ajax类型是`'html'`，并直接返回了对应的HTML，则大家无需设置该参数。
events	Object	`{}`	表格元素委托的事件。例如，列表最后一项的删除、关闭等图标按钮的点击行为。规则如下：键包含选择器以及事件，值为对应的事件。例如，点击一个类名为`icon`的`a`元素，打个log. 则为： { "a.icon:click": function() { console.log('clicked!'); } }
onShow	Function	`$.noop`	列表显示时候的回调方法。函数的上下文`this`为当前实例对象，没有支持的参数。
onPage	Function	`null`	点击分页的回调方法。就是Pagination组件的onClick回调。被组件内置分页点击行为（请求与列表刷新），如果您使用了自定义事件，会覆盖内置的事件。注意，是覆盖。因此，本参数，适用于一些高级应用场景。
onCheck	Function	`$.noop`	点击复选框时候的回调。函数的上下文`this`为当前点击的原生复选框元素，支持三个参数(`isAllChecked`, `isAllUnchecked`, `table`)，第一个参数为布尔值，表示是否全部选中，第二个参数也是布尔值，表示是否所有都没选中，第三个参数为表格元素。

实例对象myTable含有以下方法和数据：

myTable: {
    el: {
        // 列表中的各个元素
    },
    num: {
        // 分页需要的些数据
    },
    callback: {
        // 一些回调方法
    },
    // 分页实例
    pagination: myPage,
    // 非常常用的Ajax方法，用来刷新列表
    ajax: function(options) {},
    // 列表显示，这个不常用
    show: function() {}
}

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

综合案例完整使用

1. 需要comp/Table.css

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

2. 列表HTML占位

<div class="table-x table-checkbox">
    <div class="table-size">
        <table id="testtable-mix" class="ui-table">
            <thead>
              <tr>
                <th scope="col"><input type="checkbox" id="chkAll_mix"><label class="ui-checkbox" for="chkAll_mix"></label></th>
                <th scope="col">文章标题</th>
                <th scope="col" width="200">发布时间</th>
                <th scope="col" width="100">评论数</th>
                <th scope="col" width="80" class="tc">&nbsp;</th>
              </tr>
            </thead>
            <tbody></tbody>
        </table>
        <!-- 列表无数据的占位 -->
        <div class="table-null-x dn">
            <div class="table-null">
                <img src="delete.png" width="69" height="80">
                <h2>文章列表为空</h2>
                <p>系统将在用户删除文章一个工作日后，<br>自动彻底清理</p>
            </div>
        </div>
        <!-- 列表加载loading -->
        <div class="ui-loading"><i class="ui-loading-icon"></i></div>
    </div>
    <!-- 底部分页 -->
    <div class="table-page-x">
        <div class="table-page-data dn">
            共<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"></div>
    </div>
</div>

3. Table方法相关JS代码

// 列表综合实例
var mixTable = new Table($('#testtable-mix'), {
    ajaxOptions: {
        url: '/table',
        data: function() {
            // 列表外的动态Ajax参数
            return {
                key: encodeURIComponent($('#mixSearchForm input').val())
            }
        }
    },
    parse: function(json) {
        // 返回对应的HTML
        // 这里应该使用模板技术
        // 然不同团队使用模板方式不一样
        // 我这里就按照比较传统的遍历方式拼接演示
        var html = '';
        $.each(json.data.data, function(index, obj) {
            html = html + '\
                <tr>\
                    <td><input type="checkbox" id="mixChk'+ obj.id +'"><label class="ui-checkbox" for="mixChk'+ obj.id +'"></label></td>\
                    <td><div class="ell">'+ obj.title +'</div></td>\
                    <td>'+ obj.time +'</td>\
                    <td>'+ obj.comment +'</td>\
                    <td class="tc"><a href="javascript:;" class="icon icon_del ui-tips" title="删除评论"></a></td>\
                </tr>\
            ';
        });
        return html;
    },
    events: {
        'a.icon_del:click': function() {
            new Dialog().confirm('确认删除该评论？');
        }
    },
    onCheck: function(allChecked, allUnchecked, container) {
        var opt = $('#testOpt_mix');
        if (allUnchecked == true) {
            opt.addClass('disabled');
        } else {
            opt.removeClass('disabled');
        }
    }
});

// 删除全部评论
$('#delAllComment').click(function() {
    var self = this;

    if ($(this).parent().hasClass('disabled')) return false;

    var dialog = new Dialog().confirm('确认删除选中的这些评论？', {
        buttons: [{
            value: '删除',
            events: {
                click: function() {
                    mixTable.ajax({
                        data: {
                            action: 'empty',
                            current: 1
                        },
                        success: function() {
                            $(self).parent().addClass('disabled')
                        }
                    });
                    dialog.remove();
                }
            }
        }, {}]
    });
});

// 搜索示意
new Validate($('#mixSearchForm'), function() {
    mixTable.ajax({
        data: {
            action: 'search',
            current: 1
        }
    });
});

重要：Table.js大部分情况下无欲无求，唯独有一个意外，就是Ajax请求返回的数据，必须要告知总前的数据总量。因为列表左下的数据总量和右下分页是动态刷新的。总数的关键字是total, 格式可以是：

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

或者：

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

LuLu UI组件中文文档 » 列表使用综合示意

列表使用综合示意