layui table 动态增加行

目前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(){
			
		}
		
	}
	
	
	
	
})();

还缺一些监听事件回调,日后完善。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页