最近在項目中用到了樹形結構。本來事EasyUi的框架，使用的都是EasyUI的控件。但是由於這個樹形結構，EasyUI的功能相對較少，不能滿足需求。比如說，結點前添加複選框。所以，選擇了ZTree。
借鑑了同學的Demo，使用了ZTree2.5，實現了權限系統中組織的樹形結構。實現的效果圖如下：
實現思路：
前臺代碼：
<html>
<head>
<meta charset="UTF-8">
<title>Nested Layout - jQuery EasyUI Demo</title>
<link href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
<link href="../../Content/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
<link href="../../Content/jquery-easyui-1.3.2/demo/demo.css" rel="stylesheet" />
<script src="../../Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<link href="../../Content/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<link href="../../Content/zTreeStyle/zTreeIcons.css" rel="stylesheet" />
<script src="../../Content/jquery-ztree-2.5.js"></script>
<script src="../../Content/MyTree.js"></script>
<script src="../../Content/AutoComplete.js"></script>
<script type="text/javascript">
var setting = {
isSimpleData: true,
treeNodeKey: "id",
treeNodeParentKey: "pId",
showLine: true,
checkable: false,
//異地增加數據
async: true,
//獲取數據的url地址
asyncUrl: '/Organization/LoadItemsAll/',
callback: {
//beforeClick: zTreeBeforeClick,
//expand: zTreeOnExpand
click: zTreeOnClick,
asyncSuccess: zTreeOnAsyncSuccess
}
};
//異步刷新成功，將樹的第一級展開，並選中根節點
function zTreeOnAsyncSuccess(event, treeId, msg) {
zTree.selectNode(zTree.getNodes()[0]);
zTree.expandNode(zTree.getNodes()[0], true, false);
$("#editOrganization").disabled = false;
document.getElementById('operationOrganization').value = zTree.getNodes()[0].id;
//alert(document.getElementById('operationOrganization').value);
}
//調用ZTree的click事件，取得ID，並放到隱含域中
function zTreeOnClick(event, treeId, treeNode) {
var pId = zTree.getSelectedNode().pId;
var id = treeNode.id;
alert(id);
if (pId != null) {
$("#editOrganization").disabled = false;
}
document.getElementById('operationOrganization').value = treeNode.id;
$.ajax({
type: "get",
url: "/User/LoadDataGrid?OrgId=" + id + "&t= " + new Date().getTime(),
success: function (loadResult) {
}
});
};
</script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',split:true,border:false" style="width:200px;">
<div style="width:auto;margin-top:20px;margin-left:10px;">
<input id="addOrganization" type="button" value="添加組織" οnclick="AddOrganization()" />
<input id="editOrganization" type="button" value="編輯組織" οnclick="EditOrganization()" />
<input id="operationOrganization" type="hidden" />
<input id="operationOrganizationName" type="hidden" />
<div style="width:auto;margin-top:10px;">
<ul id="tree" class="tree" ></ul>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var zTree = $("#tree").zTree(setting);
</script>
</html>後臺代碼（OrganizationController）：
#region 查詢組織表，將獲得的結果，轉化成Json數據，以樹形結構顯示
/// <summary>
/// 查詢組織表，將獲得的結果，轉化成Json數據，以樹形結構顯示
/// </summary>
/// <returns>JsonResult</returns>
public JsonResult LoadItemsAll()
{
List<Organization> organizationList = new List<Organization>();
organizationList = iorganization.LoadItemsAll();
return Json(ConvertList(organizationList),JsonRequestBehavior.AllowGet);
}
#endregion實現效果:從數據庫中讀取數據，轉換成Json，前臺通過Ajax調用，解析返回的結果，加載成樹。默認將根節點選中，並展開第一級。
