// 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