1. 本章任務
機構浏覽功能與項目浏覽功能大體相似，但是由于機構擁有一個上級機構的自關聯字段，處理起來要比項目管理複雜一些。
需要注意的是，機構浏覽時需要顯示目前機構名稱和目前機構上級機構的名稱，此處需要聯表查詢。
2. 建立頁面
建立機構管理頁departManage.html，并引入easyui庫。
<head>
<meta charset="UTF-8">
<title>機構管理</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
3. 添加資料表格
頁面中添加datagrid資料表格：
<table id="mainTable" title="機構清單" class="easyui-datagrid" url="CoreServlet?method=getDepartPage" pagination="true"
singleSelect="true" fitColumns="true">
<thead>
<tr>
<th data-options="field:'id',width:50">序号</th>
<th data-options="field:'type',width:50" formatter="formatType">類型</th>
<th data-options="field:'name',width:50">名稱</th>
<th data-options="field:'parentName',width:100">上級機構</th>
</tr>
</thead>
</table>
注意：
開啟分頁
類型這一列由于資料庫中存儲的是英文，需要轉換為對應中文顯示，是以添加formatType格式化方法
上級機構資料庫中隻存了parentId，但是頁面上我們顯示的時候需要顯示上級機構名稱，此處先寫上parentName。背景給網頁傳回資料時需要添加上級機構名稱。
格式化方法代碼如下：
// 格式化類型
function formatType(val, row) {
if (val == "school") {
return "學校";
} else if (val == "college") {
return "學院";
} else {
return "班級";
}
}
4. 封裝分頁查詢方法
封裝getDepartPage方法，傳回分頁資料，需要注意的是我們要多傳回一個parentName資訊。
修改CoreServlet如下：
// 擷取機構分頁
else if (method.equals("getDepartPage")) {
DepartDao departDao = new DepartDao();
total = departDao.getCount();
result.setTotal(total);
result.setRows(departDao.getPage(page, rows));
}
修改Depart實體類如下，添加parentName資訊。
/**
* 機構
*/
public class Depart {
private String id;
private String name;
private String type;
private String parentId;
/**
* 非資料庫字段，僅用于關聯查詢
*/
private String parentName;
}
修改getPage方法，聯表查詢出parentName傳回。
/**
* 分頁查詢(聯表)
*/
public List<Depart> getPage(int page, int rows) throws Exception {
Connection conn = ConnectionUtils.getConnection();
String sql = "select son.*,parent.name as parentName from depart son left join depart parent on son.parentId=parent.id limit ?,?";
QueryRunner runner = new QueryRunner();
Object[] params = { (page - 1) * rows, rows };
List<Depart> departs = runner.query(conn, sql, new BeanListHandler<Depart>(Depart.class), params);
ConnectionUtils.releaseConnection(conn);
return departs;
}
5. 測試
建立一條測試資料 :
INSERT INTO `scholar-system`.`depart`(`id`, `name`, `type`, `parentId`) VALUES (1, '漢東大學', 'school', -1); 此時頁面效果如下，注意由于該機構沒有上級機構，是以左連接配接後上級機構名稱為NULL，顯示為空。
![項目品質管理-知識領域[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)