目前layui的动态数据表格功能已经是否强大了,但是目前还没有动态增加行的功能,这里自己写了一个对象来实现动态增加行。
上代码
AddRow = (function(){
var addRowArray = [];
var addRowIndex = 0;
var $ = layui.$;
var addRowClass = "add-row";
/**
* 新增行
*/
function addRow(){
addRowIndex ++;
//获取table的头部行,并克隆对象
var $this_table_head = $('.layui-table-view[lay-id="testadd"] .layui-table-header .layui-table thead tr:last').clone();
//获取 行的 dom 结构
var this_table_head_str = $this_table_head.html();
// 将th 替换为 td
$this_table_head.html( this_table_head_str.replace(/<th/g,"<td").replace(/th>/g,"td>") );
// 清空 td 下的多余dom,并使 新增的列可以编辑
$this_table_head.find('td').each(function(){
$(this).find('.layui-table-cell').html('<input style="border:none;height:100%;width:100%;" type="text"/>');
});
// 获取共多少列
var td_sum = $this_table_head.find('td').size();
//合并列
var edit_td = '<td style="text-align: center;" colspan="'+td_sum+'" ></td>';
// 声明 对新增行的操作
var editbtn =' <a class="layui-btn layui-btn-primary layui-btn-xs handle-detail-action" index="'+addRowIndex+'">查看</a>'
+ ' <a class="layui-btn layui-btn-xs handle-save-action" index="'+addRowIndex+'">保存</a> '
+ ' <a class="layui-btn layui-btn-danger layui-btn-xs handle-delete-action" index="'+addRowIndex+'">删除</a>';
//克隆一份 当前行
var $edit_tr = $this_table_head.clone();
$edit_tr.html($(edit_td).html(editbtn));
//为新增的行添加 特定的class
$edit_tr.addClass(addRowClass+addRowIndex);
$this_table_head.addClass(addRowClass+addRowIndex);
var $this_table = $('.layui-table-view[lay-id="testadd"] .layui-table-body .layui-table tbody');
$this_table.append($edit_tr);
$this_table.append($this_table_head);
$('.layui-table-view').on('click','.handle-detail-action',function(){
handleDetailAction($(this));
})
}
/**
* 内部封装方法
*/
function handleDetailAction($dom ,callback){
var _row_index = $dom.attr('index');
var input_data ={};
$('.'+addRowClass+_row_index+':eq(1)').find('td').each(function(){
input_data[$(this).attr('data-field')] = $(this).find('input').val();
});
callback(input_data);
}
/**
* 闭包开放区域
*/
return{
addRow:function(){
if(typeof $ == "undefined"){
$ = layui.$;
}
addRow();
},
detail:function(){
}
}
})();
还缺一些监听事件回调,日后完善。