系列文章目录
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
主子表中如何通过对象选择页面将子表数据绑定
前言
本系列文章主要记录项目过程中重点的项目技术
一、背景
存在A,B表,其中B表独立存在,但是有时需要将A,B联合起来用,此时AB关系为一对多。希望可以将B表的数据通过选择的形式与A表绑定
二、实现过程
1.添加选择按钮
<div class="ml10 mr10">
<table id="tunnelBeaconDataGrid"></table>
<% if (hasPermi('bbls:tunnel:edit')){ %>
<a href="${ctx}/bbls/beacon/beaconSelect" id="tunnelBeaconSelectBtn" class="btn btn-primary btn-sm mt10 mb10 addTabPage" data-layer="true" ><i class="fa fa-check-square-o"></i> ${text('信标选择')}</a>
<% } %>
</div>
2.实现对象选择器页面
1.跳转到对象选择器页面
在control层中添加如下接口
/**
* 选择标签对话框
*/
@RequiresPermissions("bbls:beacon:view")
@RequestMapping(value = "beaconSelect")
public String beaconSelect(Beacon beacon, String selectData, Model model) {
String selectDataJson = EncodeUtils.decodeUrl(selectData);
if (JsonMapper.fromJson(selectDataJson, Map.class) != null) {
model.addAttribute("selectData", selectDataJson);
}
model.addAttribute("beacon", beacon);
return "modules/bbls/beaconSelect";
}
2.编写对象选择器页面
因为这个页面的html代码是关于查询条件的,所以我就只复制js的代码了,js代码如下
<script>
// 初始化DataGrid对象
$('#dataGrid').dataGrid({
searchForm: $("#searchForm"),
columnModel: [
{header:'信标ID', name:'id', editable:true, hidden:true},
{header:'${text("信标编码")}', name:'beaconCode', index:'a.beacon_code', width:150, align:"center"},
{header:'${text("信标UUID")}', name:'uuid', index:'a.uuid', width:150, align:"center"},
{header:'${text("信标Major")}', name:'major', index:'a.major', width:150, align:"center"},
{header:'${text("信标Minor")}', name:'minor', index:'a.minor', width:150, align:"center"},
{header:'${text("是否被使用")}', name:'beaconIdle', index:'a.beacon_idle', width:80, align:"center", formatter: function(val, obj, row, act){
return js.getDictLabel(${@DictUtils.getDictListJson('sys_yes_no')}, val, '${text("未知")}', true);
}},
/* {header:'${text("机构编码")}', name:'officeCode', index:'a.office_code', width:150, align:"center"},
{header:'${text("所属机构")}', name:'', index:'a.office_name', width:150, align:"center"}, */
{header:'${text("状态")}', name:'status', index:'a.status', width:150, align:"center", formatter: function(val, obj, row, act){
return js.getDictLabel(${@DictUtils.getDictListJson('sys_search_status')}, val, '${text("未知")}', true);
}},
{header:'${text("更新时间")}', name:'updateDate', index:'a.update_date', width:150, align:"center"}
],
showCheckbox: true,
// 加载成功后执行事件
ajaxSuccess: function(data){
}
});
</script>
<script>
$("#btnSave").click(function(){
// 选中的所有行
var selectRows = $('#dataGrid').dataGrid('getSelectRows');
for(var j = 0, len = selectRows.length; j < len; j++){
// 行ID
var rowId = selectRows[j];
// 行对象
var rowObj = $('#dataGrid').dataGrid('getRowData', rowId);
console.log(rowObj);
// 返回行数据
js.getCurrentTabPage(function (contentWindow) {
contentWindow.$('#tunnelBeaconDataGrid').jqGrid('addRow', {
position: 'last',
addRowParams: {keys: false, focusField: true},
initdata: {status:Global.STATUS_NORMAL, beaconId: rowObj.id, beaconCode:rowObj.beaconCode}
});
});
}
// 关闭当前页
js.layer.closeAll();
});
</script>
主要是第二个script,如下图
beaconid和beaconCode对应如下图,一般来说你那边有几个字段就显示几个字段
注意事项
1.form页面的js一定要有这个
<script>
//初始化隧道信标关系表DataGrid对象
$("#tunnelBeaconDataGrid").dataGrid({
data: ${toJson(tunnel.tunnelBeaconList)},
datatype: "local", // 设置本地数据
autoGridHeight: function(){return 'auto'}, // 设置自动高度
// 设置数据表格列
columnModel: [
{header:'状态', name:'status', editable:true, hidden:true},
{header:'主键', name:'id', editable:true, hidden:true},
{header:'${text("隧道编号")}', name:'tunnelId.id', editable:true, hidden:true},
{header:'${text("信标ID")}', name:'beaconId', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'64', 'class':'form-control required'}},
{header:'${text("信标编码")}', name:'beaconCode', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'100', 'class':'form-control required'}},
{header:'${text("所在深度(m)")}', name:'beaconDepth', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'10', 'class':'form-control required digits'}},
{header:'${text("操作")}', name:'actions', width:80, sortable:false, fixed:true, formatter: function(val, obj, row, act){
var actions = [];
if (val == 'new'){
actions.push('<a href="#" οnclick="js.confirm(\'${text("你确认要删除这条数据吗?")}\', function(){$(\'#tunnelBeaconDataGrid\').dataGrid(\'delRowData\',\''+obj.rowId+'\')});return false;"><i class="fa fa-trash-o"></i></a> ');
}else{
actions.push('<a href="#" οnclick="js.confirm(\'${text("你确认要删除这条数据吗?")}\', function(){$(\'#tunnelBeaconDataGrid\').dataGrid(\'setRowData\',\''+obj.rowId+'\',null,{display:\'none\'});$(\'#'+obj.rowId+'_status\').val(\''+Global.STATUS_DELETE+'\');});return false;"><i class="fa fa-trash-o"></i></a> ');
}
return actions.join('');
}, editoptions: {defaultValue: 'new'}}
],
// 编辑表格参数
editGrid: true, // 是否是编辑表格
editGridInitRowNum: 0, // 编辑表格的初始化新增行数
editGridAddRowBtn: $('#tunnelBeaconDataGridAddRowBtn'), // 子表增行按钮
editGridAddRowInitData: {id: '', status: Global.STATUS_NORMAL}, // 新增行的时候初始化的数据
// 编辑表格的提交数据参数
editGridInputFormListName: 'tunnelBeaconList', // 提交的数据列表名
editGridInputFormListAttrs: 'status, id, tunnelId.id,beaconId,beaconCode,beaconDepth,', // 提交数据列表的属性字段
// 加载成功后执行事件
ajaxSuccess: function(data){
}
});
</script>
<script>
$("#inputForm").validate({
submitHandler: function(form){
js.ajaxSubmitForm($(form), function(data){
js.showMessage(data.message);
if(data.result == Global.TRUE){
js.closeCurrentTabPage(function(contentWindow){
contentWindow.page();
});
}
}, "json");
}
});
</script>
注意事项
1,form页面中columModel中的header所在行必须要有editable:true属性,否则数据保存的时候,会默认对应的属性值不能拿到
2.因为默认是可编辑的,如果需要设置为只读,需要在header所在的行设置为readonly = true
总结
至此,本文章结束