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

列表使用综合示意

一、富交互列表解决方案

  1. 典型案例演示

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

    删除文章(只要点击,无论选中几个选项,都是清空,演示目的)
    文章标题 发布时间 评论数  

    文章列表为空

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

    0名成员, 每页显示15

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

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

  2. 语法和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 {} 表格元素委托的事件。例如,列表最后一项的删除、关闭等图标按钮的点击行为。规则如下:键包含选择器以及事件,值为对应的事件。例如,点击一个类名为icona元素,打个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参数就可以了。

  3. 综合案例完整使用

    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": []
        }
    }
Fork Me 返回顶部