jeesite实战(八)——对象选择器

系列文章目录

---

---

前言

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

---

一、目标

1.点击按钮，弹出对应的弹窗，见下图

2.选择任意一条数据，双击，将内容传入对应的人员选择其中


3.将返回的数据通过form表单返回到后台服务器

---

二、实现目标

1.form页面主要代码

listselect的主要属性说明

form页面主要代码

<div class="col-xs-6">
	<div class="form-group">
		<label class="control-label col-sm-4" title=""> 
		<span class="required hide">*</span> 
		${text('人员选择')}：<i class="fa icon-question hide"></i></label>
		<div class="col-sm-8">
			<#form:listselect id="trackerWorker" title="人员选择" path="bindingCode" labelPath="worker.name" 
				url="${ctx}/lbst/trackerWorker/workerSelect" allowClear="true" 
				checkbox="false"  itemCode="id" itemName="name"  class="form-control required" />
		</div>
	</div>
</div>

2.control层的主要java代码

代码如下（示例）：

@RequiresPermissions("lbst:trackerWorker:view")
	@RequestMapping(value = "trackerWorkerSelect")
	public String trackerWorkerSelect(Tracker tracker, String selectData, Model model) {
		String selectDataJson = EncodeUtils.decodeUrl(selectData);
		if (JsonMapper.fromJson(selectDataJson, Map.class) != null) {
			model.addAttribute("selectData", selectDataJson);
		}
		model.addAttribute("tracker", tracker);
		return "modules/lbst/trackerWorkerSelect";
	}

3.创建trackerWorkerSelect页面

trackerWorkerSelect页面的内容就是目标中弹窗的显示内容
注意事项：
1.trackerWorkerSelect页面代码的html部分与list页面相同，不同的时js部分，具体见script标签部分
页面代码如下：

<% layout('/layouts/default.html', {title: '定位标签表管理', libs: ['dataGrid']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header">
			<div class="box-title">
				<i class="fa icon-notebook"></i> ${text('定位标签表管理')}
			</div>
			<div class="box-tools pull-right">
				<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
				<a href="#" class="btn btn-default" id="btnSetting" title="${text('设置')}"><i class="fa fa-navicon"></i></a>
			</div>
		</div>
		<div class="box-body">
			<#form:form id="searchForm" model="${tracker}" action="${ctx}/lbst/tracker/listData" method="post" class="form-inline hide"
					data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
				<#form:hidden path="trackerIdle" defaultValue="0" />
				<#form:hidden path="type" defaultValue="1" />
				<div class="form-group">
					<label class="control-label">${text('标签编号')}：</label>
					<div class="control-inline">
						<#form:input path="trackerCode" maxlength="64" class="form-control width-120"/>
					</div>
				</div>
				
				<div class="form-group">
					<label class="control-label">${text('状态')}：</label>
					<div class="control-inline width-120">
						<#form:select path="status" dictType="sys_search_status" blankOption="true" class="form-control isQuick"/>
					</div>
				</div>
				<!-- <div class="form-group">
					<label class="control-label">${text('备注信息')}：</label>
					<div class="control-inline">
						<#form:input path="remarks" maxlength="500" class="form-control width-120"/>
					</div>
				</div> -->
				<div class="form-group">
					<button type="submit" class="btn btn-primary btn-sm">${text('查询')}</button>
					<button type="reset" class="btn btn-default btn-sm">${text('重置')}</button>
				</div> 
			</#form:form>
			<table id="dataGrid"></table>
			<div id="dataGridPage"></div>
		</div>
	</div>
</div>
<% } %>
<script>
var selectData = ${isNotBlank(selectData!) ? selectData! : "{\}"},
selectNum = 0, dataGrid = $('#dataGrid').dataGrid({
	searchForm: $("#searchForm"),
	columnModel: [
		{header:'${text("标签编号")}', name:'trackerCode', index:'a.tracker_code', width:150, align:"center"},
		{header:'${text("所属机构名称")}', name:'officeName', index:'a.office_name', width:150, align:"center"},
		{header:'${text("标签类型")}', name:'type', index:'a.type', width:150, align:"center", formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('lbst_tag_type')}, val, '${text("未知")}', true);
		}},
		
		{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"},
		{header:'行数据', name:'rowData', hidden:true, formatter: function(val, obj, row, act){
			return JSON.stringify(row);
		}}
	],
	autoGridHeight: function(){
		var height = $(window).height() - $('#searchForm').height() - $('#dataGridPage').height() - 75;
		$('.tags-input').height($('.ui-jqgrid').height() - 10);
		return height;
	},
	showCheckbox: '${parameter.checkbox}' == 'true',
	multiboxonly: false, // 单击复选框时再多选
	ajaxSuccess: function(data){
		$.each(selectData, function(key, value){
			dataGrid.dataGrid('setSelectRow', key);
		});
	},
	onSelectRow: function(id, isSelect, event){
		if ('${parameter.checkbox}' == 'true'){
			if(isSelect){
				selectData[id] = JSON.parse(dataGrid.dataGrid('getRowData', id).rowData);
			}else{
				delete selectData[id];
			}
		}else{
			selectData = {};
			selectData[id] = JSON.parse(dataGrid.dataGrid('getRowData', id).rowData);
		}
	},
	onSelectAll: function(ids, isSelect){
		if ('${parameter.checkbox}' == 'true'){
			for (var i=0; i<ids.length; i++){
				if(isSelect){
					selectData[ids[i]] = JSON.parse(dataGrid.dataGrid('getRowData', ids[i]).rowData);
				}else{
					delete selectData[ids[i]];
				}
			}
		}
	},
	ondblClickRow: function(id, rownum, colnum, event){
		if ('${parameter.checkbox}' != 'true'){
			js.layer.$('#' + window.name).closest('.layui-layer')
				.find(".layui-layer-btn0").trigger("click");
		}
	}
});
function getSelectData(){
	return selectData;
}
</script>

4.实现listData接口

trackerWorkerSelect页面中需要实现分页查询，接口为listData，见下图

Java代码如下

/**
	 * 查询列表数据
	 */
	@RequiresPermissions("lbst:trackerWorker:view")
	@RequestMapping(value = "listData")
	@ResponseBody
	public Page<TrackerWorker> listData(TrackerWorker trackerWorker, HttpServletRequest request, HttpServletResponse response) {
		trackerWorker.setPage(new Page<>(request, response));
		//根据用户所属的机构或者公司进行过滤
		trackerWorkerService.addDataScopeFilter(trackerWorker);
		Page<TrackerWorker> page = trackerWorkerService.findPage(trackerWorker);
		return page;
	}

至此，整个对象选择器完成了，后面就是一些对form表单属性的处理

---

总结

至此，本文章结束