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);
});