html部分,是个动态的表格
<form method="post" id="nform" action="shywpt/team/ryxxNew">
<input name="fzfwStr" id="fzfwStr" type="hidden"/>
<h3>人员信息新增</h3>
<table cellpadding="5">
<tr>
<td>负责范围(采油厂):</td>
<td>
<!-- <input id="sccj" class="easyui-combobox" name="sccj" readonly=true
data-options="valueField:'code',textField:'name',url:''" /> -->
<input id="cyc" name="cyc"
class="easyui-combobox" data-options="
url:'shywpt/team/getCaiyouchang',
valueField:'id',
textField:'name',
onSelect: function(rec){
var url = encodeURI('shywpt/team/getGuanliqu?id='+rec.id+'&name='+rec.name);
$('#glq').combobox('reload', url);
},
onChange:function(newValue,oldValue){
$('#glq').combobox('clear');
}
"/>
</td>
<td>负责范围(管理区):</td>
<td>
<input id="glq" name="glq" class="easyui-combobox" multiple=true data-options="
valueField:'glqid',
textField:'glqmc',
formatter:function(row){
var html=row.glqmc;
return html;
}
"/>
</td>
</tr>
<tr>
<td colspan=3>
<table id="fzfw" style="width:550px;"></table>
<br/>
</td>
</tr>
</table>
</form>
js部分
//对管理区绑定选择事件
$("#glq").combobox({
onSelect: function (record) {
//添加行
$('#fzfw').datagrid('appendRow', {
cycid: record.cycid,
cycmc: record.cycmc,
glqid: record.glqid,
glqmc: record.glqmc,
ryid: '${id}',
oper: '<input type="button" value="删除" onclick="delRow(this)"/>'
});
}
})
//初始化管理区
function initGlq() {
//初始化fzfw
$("#fzfw").datagrid({
url: "",
striped: true,
singleSelect: true,
autoRowHeight: true,
nowrap: false,
columns: [[
{field: 'cycid', title: '采油厂ID', hidden: true, halign: 'center'},
{field: 'cycmc', title: '采油厂', width: 180, halign: 'center'},
{field: 'glqid', title: '管理区ID', hidden: true, halign: 'center'},
{field: 'glqmc', title: '管理区', width: 140, halign: 'center'},
{field: 'ryid', title: '人员ID', hidden: true, width: 130, halign: 'center'},
{field: 'oper', title: '操作', width: 100, halign: 'center'},
]],
});
}
//删除负责范围表格的行记录
function delRow(obj) {
//删除一行记录,因为是easyui的样式,所以向上找3层才是tr
var tr = obj.parentNode.parentNode.parentNode;
$("#fzfw").datagrid("deleteRow", tr.rowIndex);
var rows = $('#fzfw').datagrid('getRows');
$('#fzfw').datagrid('loadData', rows);
}
//保存
function doSave(dialog) {
if($("#ywsxm").combobox("getValue")!=null){
$("#id").val($("#ywsxm").combobox("getValue"));
$("#ywsxm").combobox('setValue', $("#ywsxm").combobox("getText"));
}
//负责范围
var fzfwData = $('#fzfw').datagrid('getData');
for (var i = 0; i < fzfwData.rows.length; i++) {
$('#fzfw').datagrid('endEdit', i);
}
var fzfwDataObj = fzfwData.rows;
$("#fzfwStr").val($.toJSON(fzfwDataObj));
$("#dwmc").val($("#dwid").combobox('getText'));
//获得父页面datagrid,用于刷新页面
var datagrid = dialog.getData("datagrid");
$('#nform').form('submit', {
success: function (data) {
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.meta.success) {
$.messager.alert('', '创建成功', 'info', function () {
dialog.getData('datagrid').datagrid('reload');
dialog.close();
});
} else {
$.messager.alert('error', data.meta.message);
}
}
});
}
controller层就是直接用实体类传参,实体类中的定义:private String fzfwStr;
@RequestMapping(path = "ryxxNew", method = RequestMethod.POST, produces = "text/html;charset=UTF-8")
@ResponseBody
public String doRyxxNew(Dwryxx dwryxx) {
dwxxService.insertRyxx(dwryxx);
return "{'meta':{'success':true,'message':'ok'},'data':null}";
}
service层
@Transactional
public void insertRyxx(Dwryxx dwryxx) {
mybatisRepository.insert(INSERTRYXX, dwryxx);
String rystr = dwryxx.getFzfwStr();
List<Map<String, String>> ryList = JsonUtils.fromJson(rystr,
new TypeReference<List<Map<String, String>>>() {
});
if (ryList != null && ryList.size() > 0) {
for (int i = 0; i < ryList.size(); i++) {
Map<String, String> map = ryList.get(i);
Ryfzfw ryfzfw = new Ryfzfw();
ryfzfw.setId(UUID.randomUUID().toString());
ryfzfw.setCycid(map.get("cycid"));
ryfzfw.setCycmc(map.get("cycmc"));
ryfzfw.setGlqid(map.get("glqid"));
ryfzfw.setGlqmc(map.get("glqmc"));
ryfzfw.setRyid(dwryxx.getId());
mybatisRepository.insert(INSERTFZFW, ryfzfw);
}
}
}