版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiaozaq/article/details/82968391
前台界面：
前台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:"[email protected]"},{id:2,name:"test2",email:"[email protected]"}}
* beanName 数据实体名称,例如： user
* 返回结果：{userArrSize:2,user0.id:1,user0.name:"test1",user0.email:"[email protected]",user1.id:2,user1.name:"test2",user1.email:"[email protected]"}
*/
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)批量封装请求参数。