DataGrid数据绑定

第一种：直接绑定数据源。

<table id="dgbuild" title="" class="easyui-datagrid"
		url="${pageContext.request.contextPath}/queryAllDormitory"
		style="width: 100%; height: 450px; overflow: scroll;"
		toolbar="#toolbar" pagination="true" rownumbers="true"
		fitColumns="true" singleSelect="true">
		<thead>
			<tr>
				<th field="id" hidden="true"></th>
				<th field="buildName" style="width: 20%;">宿舍楼名称</th>
				<th field="sex" style="width: 15%;">类型名称</th>
				<th field="total" style="width: 20%;">宿舍容量</th>
				<th field="remainder" style="width: 20%;">剩余量</th>
				<th style="width: 20%;"
					data-options="field:'aaa',width:50,align:'center',formatter:formatOper">分配宿舍</th>

			</tr>
		</thead>
	</table>

通过Url获取json串的数据源，然后将json中对应的字段，绑定到field对应的字段上。

结果图：

第二种：通过js绑定数据源

<table id="schoolDg" class="easyui-datagrid" name="schoolDg"
				<%-- 				url="${pageContext.request.contextPath}/queryLeftSchool?buildType=女" --%>
				pagination="true"
				rownumbers="true" fitColumns="true" toolbar="#reToolbar"
				singleSelect="true">
				<thead>
					<tr>
						<th>学院</th>
						<th>学生类型</th>
						<th>未分配人数</th>
						<th>分配宿舍</th>
					</tr>
				</thead>
			</table>

我们通过js给上面的table绑定数据：

	//宿舍楼列表   (查询所有  + 有空缺的宿舍     的宿舍楼列表)
		function formatOper(val, row, index) {
			return '<span  class="icon-edit"   plain="true"  οnclick="setInstitution('
					+ index + ')">      </span>';
		}	
//弹出分配学院的页面     (查询所有     +未分配宿舍人员+ 性别   的学院列表信息)
	//弹出分配学院的页面     (查询所有     +未分配宿舍人员+ 性别   的学院列表信息)
		function setInstitution(index) {
			$('#dgbuild').datagrid('selectRow', index);
			var row = $('#dgbuild').datagrid('getSelected');
		
				$('#schoolDg')
						.datagrid(
								{
									'url' : "${pageContext.request.contextPath}/queryLeftSchool?buildType="
											+ row.sex + "&buildId=" + row.id,
									columns : [ [ {
										field : 'institutionName',
										title : '学院',
										width : '25%'
									}, {
										field : 'sex',
										title : '学生类型',
										width : '18%'
									}, {
										field : 'studentsCont',
										title : '未分配人数',
										width : '20%'
									}, {
										field : 'aaa',
										title : '分配宿舍',
										formatter : formatReOper,
										width : '20%'
									}, ] ]
								}

						);

			
		}	

结果图 ：

3.小结

从两种获取的重点就是url。当我们url不够完整，也就是说还需要携带一些参数，而这种参数，往往能直接获取，这种情况我们不妨采用第二种方式。第二种方式较繁琐，但实用性更强。

 

DataGrid获取数据的两种方式，不通情况选择不通的方式，从而实现我们想要的。也正验证了提高班的一句话：方法总比困难多。