layui 以界面简洁美观而吸引了不少开发人员，在使用table组件时，需要能编辑表格内容，动态增加数据行。编辑功能组件已支持。但动态增加数据行好像没有支持，网上提供的方式是，获得组件的数据集再加入一个空记录或默认记录，以这个新的数据集作为表格组件的数据源重新渲染表格。
方法是行得通，但毕竟不是原生支持，有局限。因为我用表格组件是来实现在线设计数据库表的，需要动态增加数据行，编辑数据行，如果采用上面的方式就算是刷新，编辑的内容就会丢掉，不符合需求。看了下表格模块的源码，好像单靠扩展还不行，并且要扩展还需要学习下，扩展的语法。直接改源码来得更快些。
源码中有获得后台数据后进行渲染的方法，就以此方法为基础进行提取，单独新建个方法：addData.原渲染方法在727行：
,render = function(){ //后续性能提升的重点
var thisCheckedRowIndex;
....
以此方法为基础，创建一个新的方法，每次增加一行记录.
Class.prototype.addData=function(record){
record=record||{}; //**********1 无参数时，默认增加空白行
var that = this
,curr=that.page
,options = that.config;
var trs = []
,trs_fixed = []
,trs_fixed_r = [];
var tds = [], tds_fixed = [], tds_fixed_r = []
,numbers = 1 + options.limit*(curr - 1) + 1; //序号
that.key = options.id || options.index;
if(!table.cache[that.key]){ //**********2 表格打开时如果没有加载到数据，则创建数据缓存对象，避免后面无法增加新数据
table.cache[that.key]=[];
}
var i1=table.cache[that.key].length; //********** 3 行索引,加载了数据且数据不为空才会设置 table.cache[that.key]，设置为已有数据记录数
record[table.config.indexName] = i1; //数据中加入行索引属性
record["LAY_RECORD_STATUS"] = 1; //********** 4 表明是前台生成的，删除时可以直接删除 0:后台获取的原数据，1：客户端增加的，-1：等待删除的；2：已修改的；
that.eachCols(function(i3, item3){
var field = item3.field || i3
,key = options.index + '-' + item3.key
,content = record[field];
if(content === undefined || content === null) content = '';
if(item3.colGroup) return;
//td内容
var td = ['<td data-field="'+ field +'" data-key="'+ key +'" '+ function(){ //追加各种属性
var attr = [];
if(item3.edit) attr.push('data-edit="'+ item3.edit +'"'); //是否允许单元格编辑
if(item3.align) attr.push('align="'+ item3.align +'"'); //对齐方式
if(item3.templet) attr.push('data-content="'+ content +'"'); //自定义模板
if(item3.toolbar) attr.push('data-off="true"'); //行工具列关闭单元格事件
if(item3.event) attr.push('lay-event="'+ item3.event +'"'); //自定义事件
if(item3.style) attr.push('style="'+ item3.style +'"'); //自定义样式
if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); //单元格最小宽度
return attr.join(' ');
}() +' class="'+ function(){ //追加样式
var classNames = [];
if(item3.hide) classNames.push(HIDE); //插入隐藏列样式
if(!item3.field) classNames.push('layui-table-col-special'); //插入特殊列样式
return classNames.join(' ');
}() +'">'
,'<div class="layui-table-cell laytable-cell-'+ function(){ //返回对应的CSS类标识
return item3.type === 'normal' ? key
: (key + ' laytable-cell-' + item3.type);
}() +'">' + function(){
var tplData = $.extend(true, {
LAY_INDEX: numbers
}, record)
,checkName = table.config.checkName;
//渲染不同风格的列
switch(item3.type){
case 'checkbox':
return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+ function(){
//如果是全选
if(item3[checkName]){
item1[checkName] = item3[checkName];
return item3[checkName] ? 'checked' : '';
}
return tplData[checkName] ? 'checked' : '';
}() +'>';
break;
case 'radio':
if(tplData[checkName]){
thisCheckedRowIndex = i1;
}
return '<input type="radio" name="layTableRadio_'+ options.index +'" '
+ (tplData[checkName] ? 'checked' : '') +' lay-type="layTableRadio">';
break;
case 'numbers':
return numbers;
break;
};
//解析工具列模板
if(item3.toolbar){
return laytpl($(item3.toolbar).html()||'').render(tplData);
}
return item3.templet ? function(){
return typeof item3.templet === 'function'
? item3.templet(tplData)
: laytpl($(item3.templet).html() || String(content)).render(tplData)
}() : content;
}()
,'</div></td>'].join('');
tds.push(td);
if(item3.fixed && item3.fixed !== 'right') tds_fixed.push(td);
if(item3.fixed === 'right') tds_fixed_r.push(td);
});
trs.push('<tr data-index="'+ i1 +'">'+ tds.join('') + '</tr>');
trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
if(that.layMain.find('tbody').length==0){ //********** 5 表格没有加载到数据时，不会有<table><tbody>节点,该节点使用原有的模板渲染：TPL_BODY，入参必须有data属性，模板中会用到
that.layMain.html($(laytpl(TPL_BODY).render({data:{}})));
}
that.layMain.find('tbody').append(trs.join(''));
that.layFixLeft.find('tbody').append(trs_fixed.join(''));
that.layFixRight.find('tbody').append(trs_fixed_r.join(''));
that.renderForm();
//typeof thisCheckedRowIndex === 'number' && that.setThisRowChecked(thisCheckedRowIndex);
that.syncCheckAll();
//滚动条补丁
that.haveInit ? that.scrollPatch() : setTimeout(function(){
that.scrollPatch();
}, 50);
that.haveInit = true;
layer.close(that.tipsIndex);
//同步表头父列的相关值
options.HAS_SET_COLS_PATCH || that.setColsPatch();
options.HAS_SET_COLS_PATCH = true;
table.cache[that.key].push(record); //********** 5 最后将新增的记录加入数据缓存中
};注释中标记有：//*********** 的就是需要调整的地方。 其中 第4处 可以不要（用于表格其他增强功能的，layui的表格组件在编辑功能方面还有不足）
在54行表格实例中增加对外接口：
,addData:function(record){
that.addData.call(that,record);
}这样就可以使用了，但只能以表格实例对象调用，不能用table.addData方式调用。如需要还要在table全局接口中注册
实现效果：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
