sTable - 一个支持子表、单元格合并、链式调用、事件代理功能的Mini表格组件

因为项目开发需要，所以开发了此Mini表格组件，暂时不依赖第三方库，比较轻量级，并且支持子表、单元格合并、链式调用、事件代理功能。

演示地址：http://sandbox.runjs.cn/show/ihwmi3yt

在线源码：http://runjs.cn/code/ihwmi3yt

Github：https://github.com/guananddu/sTable

网盘：http://dl.vmall.com/c0aw4lauhu

感兴趣的话可以直接拿来使用。：） 演示见下：

1，子表：

现在只支持一级子表，如下截图：

需要更多的子表的话，只能扩展函数本身了。

2，单元格合并：

单元格合并要在初始化的时候进行设置，详见源代码：

// 设置子表单元格合并等信息
    sFormatMore: [
        {
            // 第一列为竖向和并列
            rowSpan: true
        }, 
        {
            // 第二列横跨父表格2个格
            colSpan: '2'
        }, 
        {}, 
        {
            rowSpan: true
        }
    ]

3，链式调用和事件代理：

// 生成构造函数
var myTableConstructor = sTable(preOpt);
// 表格初始化
var meTable = new myTableConstructor(conOpt);
// 渲染
meTable.setData(data).render()

/**
 * 表格的事件代理机制
 */

// 可以通过自身的on函数进行特殊的事件绑定
// 1，为展开/闭合子表格添加自定义事件
.on('click', 'sub-icon', function() {
    var target = this;
    // 可以通过target中的data属性得到当前表格的索引
    var data   = target.getAttribute('data');
    var x      = data.split('-')[0];
    var y      = data.split('-')[1];

    // x 行数索引，y 列说索引（都是从0开始）
    console.log(x, y);
})

// 2，在位其它目标元素添加事件代理的时候需要为其加上'_stabletarget_'属性，表明事件target是什么
.on('mouseover', 'linecheckbox', function() {
    this.setAttribute('title', '点我吧！');
    this.parentNode.style.backgroundColor = 'pink';
})
.on('mouseout', 'linecheckbox', function() {
    this.setAttribute('title', '');
    this.parentNode.style.backgroundColor = '#EFEFEF';
})
.on('click', 'linecheckbox', function() {
    // 去掉全选
    if(!this.checked) {
        meTable.getStableTargetEles('lefttopcheckbox', function(item, inx, arr) {
            item.checked = false;
        })
    }
    else {
        // 注意全选
        var allChecked = true;
        this.checked 
            && meTable.getStableTargetEles('linecheckbox', function(item, inx, arr) {
                !item.checked && (allChecked = false);
            });
        allChecked 
            && meTable.getStableTargetEles('lefttopcheckbox', function(item, inx, arr) {
                item.checked = true;
            });
    }
})

// 3，通过表格的getStableTargetEles方法，获取指定'_stabletarget_'值的元素列表
.on('click', 'lefttopcheckbox', function() {
    var target       = this;
    // 使用内置迭代器
    // meTable.getStableTargetEles('linecheckbox', function(item, inx, arr) {
    //     console.log(inx);
    //     item.checked = target.checked;
    // });
    
    // 不使用内置迭代器
    meTable.getStableTargetEles('linecheckbox', function(all) {
        console.log(all);
        // 不使用内置迭代器的话，自定义循环语句
        for(var i = 0, len = all.length; i < len; all[i ++].checked = target.checked){}
    }, false);
});