Jeesite中的小窗口实现

<% 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 fa-list-alt"></i> ${text('选择学校')}
			</div>
		</div>
		<#form:form id="searchForm" action="${ctxm}/comprehensive/school/tschool/orgListData" method="post" class="form-inline hide"
				data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
				<#form:hidden path="pageSize" value="15" class="form-control width-120"/>
				<#form:hidden path="orgType" value="5" class="form-control width-120"/>
		</#form:form>
		<div class="row">
			<div class="col-xs-10 pr10">
				<table id="dataGrid"></table>
				<div id="dataGridPage"></div>
			</div>
			<div class="col-xs-2 pl0">
				<div id="selectData" class="tags-input"></div>
			</div>
		</div>
	</div>
</div>
<% } %>
<script>
var selectData = ${isNotBlank(selectData!) ? selectData! : "{\}"},
// 初始化DataGrid对象
selectNum = 0, dataGrid = $('#dataGrid').dataGrid({
	searchForm: $("#searchForm"),
	columnModel: [
		{header:'主键', name:'id', editable:true, hidden:true},
		{header:'${text('学校名称')}', name:'orgName', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'32', 'class':'form-control'}},
		{header:'${text('教育类别')}', name:'orgSchoolLevel', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'68', 'class':'form-control'}},
		{header:'${text('办学性质')}', name:'orgSchoolType', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'32', 'class':'form-control'}},
		{header:'${text('地址')}', name:'address', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'32', 'class':'form-control'}},
// 		{header:'${text('操作')}', name:'origin', index:'a.origin', width:150, align:"left"},
		{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() - 73;
		$('.tags-input').height($('.ui-jqgrid').height() - 10);
		return height;
	},
	// 加载成功后执行事件
	ajaxSuccess: function(data){
		$.each(selectData, function(key, value){
			dataGrid.dataGrid('setSelectRow', key);
		});
		initSelectTag();
	},
//获取单选行的数据
	onSelectRow: function(id, isSelect, event){
		selectData = {};
		selectData[id] = JSON.parse(dataGrid.dataGrid('getRowData', id).rowData);
		initSelectTag();
	}
});
function initSelectTag(){
	selectNum = 0;
	var html = [];
	$.each(selectData, function(key, value){
		selectNum ++;
		html.push('<span class="tag" id="'+key+'_tags-input"><span>'+value.orgName+' </span>'
			+ '<a href="#" onclick="removeSelectTag(\''+key+'\');" title="取消选择">x</a></span>');
	});
	html.unshift('<div class="title">当前已选择<span id="selectNum">'+selectNum+'</span>项：</div>');
	$('#selectData').empty().append(html.join(''));
}
function removeSelectTag(key){
	delete selectData[key];
	dataGrid.dataGrid('resetSelection', key);
	$('#selectNum').html(--selectNum);
	$('#'+key+'_tags-input').remove();
}
function getSelectData(){
	return selectData;
}
</script>

此处充分利用到jeesite官网中的 DataGrid 组件、jqGrid 文档的介绍的方法