去哪網實習總結：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" />

最後，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',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）