去哪网实习总结：easyui在JavaWeb中的使用，以datagrid为例（JavaWeb）

本来是以做数据挖掘的目的进去哪网的，结构却成了系统开发。

。

。

只是还是比較认真的做了三个月。老师非常认同我的工作态度和成果。。

。

实习立即就要结束了，总结一下几点之前没有注意过的变成习惯和问题，分享给大家。

同一时候打个广告：去哪网内审部招JavaWeb开发实习生，时间很自由，每周一天、周六周日甚至都能够，时间充裕的小伙伴给我留言啊，挣个零花钱，还能长点经验。。

。。

（保研的、想工作的大四狗最合适只是了。。。）

首先，CSS结构：

其次，页面引用方式：

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css"  href="../css/easyui.css" />
<link rel="stylesheet" type="text/css"  href="../css/icon.css" />

最后，datagrid为例：

<span style="white-space:pre">		</span><table id="dg" class="easyui-datagrid" title="流程效率监測管理平台"
			data-options="rownumbers:true,singleSelect:true,striped:true,collapsible:true">
			<!--显示行,单选行,隔行深浅交换,是否让收缩（右上角）-->
			<thead>
				<tr>
			    	<th colspan="7">
			    		<a style="float:right;" href="newMonitorPoint.jsp?
id=" target="_blank">新增监測点</a>
			    	</th>
				</tr>
				<tr>
					<th data-options="field:'name',align:'left',resizable:'false','10%'">监測点名称</th>
					<th data-options="field:'owner',align:'left',resizable:'false','10%'">创建者</th>
					<th data-options="field:'updatedDate',align:'center',resizable:'false','15%'">创建时间</th>
					<th data-options="field:'del',align:'center',resizable:'false','10%'">删除监測点</th>
					<th data-options="field:'upd',align:'center',resizable:'false','15%'">编辑监測点信息</th>
					<th data-options="field:'new',align:'center',resizable:'false','20%'">新增或编辑监測点实例</th>
					<th data-options="field:'sel',align:'center',resizable:'false','18%'">查看监測点实例清单</th>
				</tr>
			</thead>
			<tbody>
			<%
			Index index = new Index();
			TreeMap resultMap = index.getMonitorPoint();
			String[] id = resultMap.get("id").toString().split(";");
    		<span style="white-space:pre">	</span>String[] name = resultMap.get("name").toString().split(";");
    		<span style="white-space:pre">	</span>String[] owner = resultMap.get("owner").toString().split(";");
    		<span style="white-space:pre">	</span>String[] updateDate = resultMap.get("updateDate").toString().split(";");
    		<span style="white-space:pre">	</span>for(int i=0;i<name.length&&!name[i].equals("");i++){
			%>
				<tr>
			    	<td>
			    		<%=name[i]%>
			    	</td>
			    	<td>
			    		<%=owner[i]%>
			    	</td>
			    	<td>
			    		<%=updateDate[i]%>
			    	</td>
			    	<td>
			    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="del('<%=id[i]%>')" >删除监測点</a>
			    	</td>
			    	<td>
			    		<a target="_blank" href="newMonitorPoint.jsp?id=<%=id[i]%>" class="easyui-linkbutton" >编辑监測点信息</a>
			    	</td>
			    	<td>
			    		<a target="_blank" href="newMonitorPointInstance.jsp?
id=<%=id[i]%>" class="easyui-linkbutton" >新增或编辑监測点实例</a>
			    	</td>
			    	<td>
			    		<a target="_blank" href="viewMonitorPointInstanceDetails.jsp?id=<%=id[i]%>" class="easyui-linkbutton" >查看监測点实例清单</a>

			    	</td>
				</tr>
			</tbody>
			<%}%>
		</table>

最后几点说明：

1）<thead>标签必须使用<th>标签，否则标题不会正常显示；

2）<tbody>标签必须使用<td>标签（不能使用<th>标签），否则body不会正常显示；

3）关于怎样排序、怎样使用toolbar等问题，请參考官方文档（学会阅读官网文档做开发是非常必要的能力，事实上我已经看过jquery、easyui、scikit-learn、activiti等非常多官方文档了。。。。

）：

http://www.jeasyui.com/tutorial/app/crud.php

http://www.jeasyui.com/tutorial/app/crud2.php

http://www.jeasyui.com/tutorial/index.php