layui表格组件中实现动态增加数据⾏的⼀种⽅式
layui 以界⾯简洁美观⽽吸引了不少开发⼈员，在使⽤table组件时，需要能编辑表格内容，动态增加数据⾏。编辑功能组件已⽀持。
但动态增加数据⾏好像没有⽀持，⽹上提供的⽅式是，获得组件的数据集再加⼊⼀个空记录或默认记录，以这个新的数据集作为表格组件的
数据源重新渲染表格。
⽅法是⾏得通，但毕竟不是原⽣⽀持，有局限。因为我⽤表格组件是来实现在线设计数据库表的，需要动态增加数据⾏，编辑数据
⾏，如果采⽤上⾯的⽅式就算是刷新，编辑的内容就会丢掉，不符合需求。看了下表格模块的源码，好像单靠扩展还不⾏，并且要扩展还需
要学习下，扩展的语法。直接改源码来得更快些。
源码中有获得后台数据后进⾏渲染的⽅法，就以此⽅法为基础进⾏提取，单独新建个⽅法：addData.原渲染⽅法在727⾏：
,render = function(){ //后续性能提升的重点
var thisCheckedRowIndex;
....
以此⽅法为基础，创建⼀个新的⽅法，每次增加⼀⾏记录.
Class.prototype.addData=function(record){
record=record||{};  //**********1 ⽆参数时，默认增加空⽩⾏
var that = this
,curr=that.page
,options = fig;
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]，设置为已有数据记录数
fig.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 = '';
lGroup) 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 +'"'); //对齐⽅式
plet) attr.push('data-content="'+ content +'"'); //⾃定义模板
lbar) attr.push('data-off="true"'); //⾏⼯具列关闭单元格事件
if(item3.event) attr.push('lay-event="'+ item3.event +'"'); //⾃定义事件
if(item3.style) attr.push(''); //⾃定义样式
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'); //插⼊特殊列样式
if(!item3.field) classNames.push('layui-table-col-special'); //插⼊特殊列样式
return classNames.join(' ');
}() +'">'
,'<div class="layui-table-cell laytable-cell-'+ function(){ //返回对应的CSS类标识
pe === 'normal' ? key
: (key + ' laytable-cell-' + pe);
}() +'">' + function(){
var tplData = $.extend(true, {
LAY_INDEX: numbers
}, record)
,checkName = fig.checkName;
//渲染不同风格的列
pe){
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;
};
/
/解析⼯具列模板
lbar){
return laytpl($(lbar).html()||'').render(tplData);
}
plet ? function(){
return plet === 'function'
: laytpl($(plet).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，⼊参必须有d        that.layMain.html($(laytpl(TPL_BODY).render({data:{}})));
}
htmlradio传输数据that.layMain.find('tbody').append(trs.join(''));
that.layFixLeft.find('tbody').append(trs_fixed.join(''));
that.layFixRight.find('tbody').append(trs_fixed_r.join(''));
//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全局接⼝中注册
实现效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。