layui+jfinal实现表格编辑功能。后台批量接受请求参数。

前台界面:

前台js脚本:

var tableData = data.data;
			table.render({
			    elem: '#listTableJtcy'
			    //,url:'/#(appName)/dangan/jtcy/listForJbxx?jbxxJlxh=' + jbxxJlxh
			    ,data:tableData  
			    ,sortType:'server'
			    ,height: 570
			    ,limit: 1000  //如果不设置limit,则默认最多10行数据。
			    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
			    ,toolbar: '<div><a class="layui-btn layui-btn-xs addJtcy" onclick="addRow(\'listTableIdJtcy\',{jtcyJlxh:-1})" #(printStyle(session,"/dangan/jtcy/save"))>新增</a></div>'
			    ,cols: [[
			       {type:'numbers', title: '序号',width:80,align:'center' }
			    	   ,{field:'jtcyJlxh', title: '记录id',sort:false,hide:true} 
			    	   ,{field:'jtcyGxmc', title: '关系名称',sort:false,edit:"text"} 
			    	   ,{field:'jtcyXm', title: '姓名',sort:false,edit:"text"} 
			    	   ,{field:'jtcyGzdz', title: '工作单位及职务',sort:false,edit:"text"} 
			    	   ,{field:'jtcyLxfs', title: '联系方式',sort:false,edit:"text"} 
			    	   ,{field:'jtcyZzmm', title: '政治面貌',sort:false,edit:"text"} 
			    	   ,{field:'jtcyCsny', title: '出生年月',sort:false,edit:"text"} 
			    	   ,{field:'jtcyJbxxJlxh', title: '档案id',sort:false,hide:true,edit:"text"} 
			      ,{fixed: 'right', width:178, align:'center', width:80,title: '操作'
			    	  ,templet: function(row){
		  	  			var barBtnsHTML = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delJtcy" #(printStyle(session,"/dangan/jtcy/delete"))>删除</a>';
					   return barBtnsHTML;
		    	  	}
			      } //单元格内容水平居中
			    ]]
			  	,id: 'listTableIdJtcy'
			  	//,page: true
			  });
			//监听新增和删除时间
//			$('.addJtcy').on('click', function(){
//				addRow("listTableIdJtcy");
//			});
			table.on('tool(listMainTableJtcy)', function(obj){
				var data = obj.data;
			    if(obj.event === 'delJtcy'){
			    	obj.del();
			    } 
			});
/***
 * layui table新增一行数据
 * 实现的思路是:当点击新增一行时,把之前的数据保存下来,并在数据尾部增加一行空数据,然后将新数据重新载入表格
 */
function addRow(tableId, rowObj){
	rowObj = rowObj || {};
	//定义一个空数组,用来存储之前编辑过的数据已经存放新数据
	var dataBak = [];   
	//获取之前编辑过的全部数据,前提是编辑数据是要更新缓存,stock_add_table 为表格的id
	var tableBak = table.cache[tableId]; 
	for (var i = 0; i < tableBak.length; i++) {
		//将之前的数组备份
	    dataBak.push(tableBak[i]);     
	}
	//在尾部新增一行空数据,实现增行效果
	dataBak.push(rowObj);

	table.reload(tableId,{
	    data:dataBak   // 将新数据重新载入表格
	})
}

/***
 * 格式化请求参数,数组转换为一个对象
 * list 数据列表,例如 [{id:1,name:"test1",email:"11111@qq.com"},{id:2,name:"test2",email:"222222@qq.com"}}
 * beanName 数据实体名称,例如: user
 * 返回结果:{userArrSize:2,user0.id:1,user0.name:"test1",user0.email:"11111@qq.com",user1.id:2,user1.name:"test2",user1.email:"222222@qq.com"}
 */
function formatParams(list, beanName){
	var rs = {};
	var beanNameArrSize = 0;
	for(var i = 0;i<list.length;i++ ){
		var tempObj = list[i];
		if(tempObj.length == 0){
			continue;
		}
		for (var key in tempObj){
			rs[beanName + beanNameArrSize + "." + key] = tempObj[key];
	    }
		beanNameArrSize++;
	}
	rs[beanName + "ArrSize"] = beanNameArrSize;
	return rs;
}

表单提交js:

form.on('submit(edit-lay-filter)', function(data){
		    			 	var requestParams = data.field;
		    			 	var jtcyList = table.cache["listTableIdJtcy"]; 
		    			 	$.extend( requestParams, formatParams(jtcyList,"jtcy") );
			      	    	$.post(_url, requestParams,function(data){
				      	        if(data.code == 0){
				      	        	layer.closeAll();
				      	        	var curPage = $(".layui-laypage-next").attr("data-page") - 1;
				      	        	tableReload($,"#frm",table,curPage);
				      	        }
				      	        layer.msg(data.msg == "" ? _title +"成功!" : data.msg);
			      	    	});
			      	    	return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
						});

后台jfinal接受代码:

/**
	 * 更新操作
	 */
	public void updateAll() {
		Jbxx obj = getBean(Jbxx.class,"");
		int jtcyArrSize = getParaToInt("jtcyArrSize");
		List<Jtcy> jtcyList = new ArrayList(jtcyArrSize);
		for (int i = 0; i < jtcyArrSize; i++) {
			Jtcy jtcy = getBean(Jtcy.class,"jtcy" + i);
			jtcyList.add(jtcy);
		}
		Map map = service.updateAll(obj,jtcyList);
		renderJson(map);
	}

几个关键点:

1.获取表格的数据:table.cache[tableId]

2.表格新增行:table.render必须使用data传数据,不能使用url。

3.设置limit值,尽量设置一个大一点的值,我这里是设置了1000,应该不是有人的家庭成员写1000多个吧。limit默认为10.如果不设置的话添加10条记录就添加不了了(这个应该是layui的问题,没有开启分页,应该不考虑limit值的)。

4.表单提交时,巧妙的构造请求参数,便于jfinal解析。参考formatParams行数。

5.通过getBean(Jtcy.class,"jtcy" + i)批量封装请求参数。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值