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

标签：easyui   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" />

<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',width:'10%'">监测点名称</th>
					<th data-options="field:'owner',align:'left',resizable:'false',width:'10%'">创建者</th>
					<th data-options="field:'updatedDate',align:'center',resizable:'false',width:'15%'">创建时间</th>
					<th data-options="field:'del',align:'center',resizable:'false',width:'10%'">删除监测点</th>
					<th data-options="field:'upd',align:'center',resizable:'false',width:'15%'">编辑监测点信息</th>
					<th data-options="field:'new',align:'center',resizable:'false',width:'20%'">新增或编辑监测点实例</th>
					<th data-options="field:'sel',align:'center',resizable:'false',width:'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

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

标签：easyui   datagrid   javaweb   

原文地址：http://blog.csdn.net/mmc2015/article/details/47685979