// myTbl插件
// 定义容器中表格
;(function($, window, document, undefined) {
/**
* @description 表格插件的定义
* @param jquery ele jquery选择器选中元素
* @param object options 插件的配置项
*/
var MyTbl = function(ele, options) {
this.ele = ele.eq(0);
this.opts = options;
this.init();
};
MyTbl.prototype = {
init: function() {
this.regData(); // 验证数据格式
this.ele.find('.no-data').remove(); // 清除无数据图标
this.ele.addClass('tbl-container');
this.ele.find('.tbl-body').fullContainer();
},
create: function() {
var opts = this.formatOpts();
// 根据数据生成表格元素
var table = $('
');
var thead = $('');
var tr = $('
');
for(var i=0; i'+opts.thead[i]+'');
tr.append(td);
}
thead.append(tr);
table.append(thead);
var tbody = $('');
for(var i=0; i');
for(var k=0; k'+opts.tbody[i][k]+'');
tr.append(td);
}
tr.data().attr = opts.attr[i];
// 是否全部选中
if(opts.isAllActive) {
tr.addClass('active');
}
tbody.append(tr);
}
table.append(tbody);
this.ele.find('.tbl-body').text("");
this.ele.find('.tbl-body').append(table);
this.ele.find('.tbl-header').html(this.ele.find('.tbl-body').html());
if(this.opts.tbody.length == 0 && this.opts.noData) {
this.ele.append(this.noData());
}
this.resize();
var scrollLeft = this.ele.find('.tbl-body').scrollLeft();
this.ele.find('.tbl-body').siblings('.tbl-header').find('table').css('left', -scrollLeft+'px');
this.ele.find('.tbl-body').scroll(function() {
var scrollLeft = $(this).scrollLeft();
$(this).siblings('.tbl-header').find('table').css('left', -scrollLeft+'px');
});
},
// 添加一行数据
add: function() {
var isOne = true;
// 判断为二维数组
if(typeof this.opts.add[0] == 'object') {
isOne = false;
}
// 根据isOne的值执行
if(isOne) {
this.opts.tbody.push(this.opts.add);
this.opts.add = [];
}else {
for(var i=0; i
');
return noData;
},
resize: function() {
var tblWidth = this.ele.find('.tbl-body table').width();
this.ele.find('.tbl-header').children('table').width(tblWidth);
var tbl = this;
},
regData: function() { // 格式化表格的状态数组
var opts = this.opts;
var thead = opts.thead;
var status = opts.status;
// 遍历thead数据对status的数据进行校验和补齐
for(var i=0;i