jeesite实战(三十四)——主子表中如何通过对象选择页面将子表数据绑定

系列文章目录

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本系列文章主要记录项目过程中重点的项目技术

---

一、背景

存在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>&nbsp;');
			}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>&nbsp;');
			}
			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

总结

至此，本文章结束