最近花了不少時間在重構和進一步提煉我的Web開發框架上，力求在用戶體驗和界面設計方面，和Winform開發框架保持一致，而在Web上，我主要采用EasyUI的前端界面處理技術，走MVC的技術路線，在重構完善過程中，很多細節花費不少時間進行研究和提煉，一步步走過來，也0積累了不少經驗，本系列將主要介紹我在進一步完善我的Web框架基礎上積累的經驗進行分享，本隨筆主要介紹使用EasyUI的樹控件構建Web界面的相關經驗。
在很多界面設計上，我們可能都需要引入樹列表控件，這個控件可以用zTree來實現，也可以用EasyUI的內置樹控件進行展示，由于歷史原因，我原來傾向于使用zTree，最新把它全部修改為EasyUI的樹控件，并進行了完善優化，發現代碼更加簡潔明快，非常不錯。
1、在界面上使用EasyUI的樹控件
一般情況下，使用EasyUI的樹控件，代碼很簡單，腳本代碼如下所示，主要就是通過調用url來獲得Json數據，然后就可以顯示了，通過onClick就可以響應用戶單擊節點的操作，每個節點有id, text, iconCls, checked,state,children等屬性。
1）樹控件的Json數據綁定
$('#treeDept').tree({
url: '/User/GetMyDeptTreeJson?userId=@Session["UserId"]',
onClick: function (node) {
loadData(node.id);
}
});
2）樹控件的折疊和展開
樹控件的展開和折疊，可以通過定義兩個通用的腳本進行處理，如下所示。
function expandAll(treeName) {
var node = $('#' + treeName).tree('getSelected');
if (node) {
$('#' + treeName).tree('expandAll', node.target);
}
else {
$('#' + treeName).tree('expandAll');
}
}
function collapseAll(treeName) {
var node = $('#' + treeName).tree('getSelected');
if (node) {
$('#' + treeName).tree('collapseAll', node.target);
}
else {
$('#' + treeName).tree('collapseAll');
}
}
然后，在頁面加載完畢后，綁定指定的按鈕控件就可以了嗎，如下代碼所示。
//初始化對象
$(document).ready(function () {
//初始化機構分類
initOUCategorys();
//機構基礎信息
initDeptTreeview();
$("#deptExpand").bind("click", function () {
expandAll("treeDept");
});
$("#deptCollapse").bind("click", function () {
collapseAll("treeDept");
});
$("#loading").center(); //loading的圖片顯示居中
});
3）樹控件的復選框顯示
樹控件默認是沒有復選框的，它可以通過屬性checkbox設置讓它進行展示的，如下代碼是我項目里面的代碼。
其中cascadeCheck是否讓樹控件級聯的，默認是級聯，也就是只要父控件被選中，所有其子控件都會被選中，我們可以設置它為false，讓它不級聯，這樣在很多情況下是需要的。
$('#treeFunctionView').tree({
checkbox: true,
cascadeCheck: false,
url: '/Function/GetRoleFunctionByUser?userId=@Session["UserId"]',
onClick: function (node) {
//
}
});
4）樹控件的全選和全不選擇
這個全部不選的特性，我找了很多文章，都沒有找到，其實后來才發現，我們對樹的節點理解有偏差，認識到后，實現起來也很容易。
如取消全部節點的選中狀態，代碼如下所示。它的方法getChecked是返回所有的節點，而不是一個節點。它們把全部選中的節點放到一個結合里面，不像Winform里面，樹節點需要遞歸查詢，這里只需要一個for循環就可以展開了，我這里把所有勾選的節點，設置為非勾選狀態就可以實現取消全部樹節點勾選狀態了。
function unCheckTree(tree) {
var nodes = $('#' + tree).tree('getChecked');
if (nodes) {
for (var i = 0; i < nodes.length; i++) {
$('#' + tree).tree('uncheck', nodes[i].target);
}
}
}
我們知道，很多樹控件，為了方便操作，都提供了一個全選或者全部不選的操作，這個在EasyUI的樹控件里面，也是很容易實現的。這里的getChildren和上面的意思類似，也是返回所有的子節點，不需要在進行遞歸，用一個for循環就可以遍歷全部節點和其下面的多級子節點了。也就是說，它是一個二維的數據，不用遞歸查詢。
function checkAllTree(tree, checked) {
var children = $('#' + tree).tree('getChildren');
for (var i = 0; i < children.length; i++) {
if (checked) {
$('#' + tree).tree('check', children[i].target);
} else {
$('#' + tree).tree('uncheck', children[i].target);
}
}
}
5）下拉列表的樹控件初始化
除了普通的樹列表，還有一種比較特殊的樹控件，就是在ComboTree,也就是在下拉列表中集成樹控件，它的操作和普通的樹控件差不多，很多事件屬性都一樣，它的使用代碼如下所示。
//初始化公司
function initCompany() {
$('#txtCompany_ID').combotree({
url: '/User/GetMyCompanyTreeJson?userId=@Session["UserId"]',
valueField: 'id',
textField: 'text',
required: true,
onClick: function (node) {
//
}
});
}
2、樹控件的優化
1）普通的Json數據生成
前面說了，我們為了方便，一般使用Json數據和javascript打交道，而EasyUI的樹控件支持很好地的Json鏈接綁定，因此我們只需要在對應的控制器里面實現json數據的生成即可，如果是一開始想要確定的Json數據，一般也是通過手工生成的居多，如下代碼所示。
public ActionResult GetTreeJson()
{
string folder = "/Content/JqueryEasyUI/themes/icons/customed/" + "organ.png";
string leaf = "/Content/JqueryEasyUI/themes/icons/customed/" + "organ.png";
string json = GetTreeJson(-1, folder, leaf);
json = json.Trim(',');
return Content(string.Format("[{0}]", json));
}
/// <summary>
/// 遞歸獲取樹形信息
/// </summary>
/// <param name="PID"></param>
/// <returns></returns>
private string GetTreeJson(int PID, string folderIcon, string leafIcon)
{
string condition = string.Format("PID={0}", PID);
List<OUInfo> nodeList = BLLFactory<OU>.Instance.Find(condition);
StringBuilder content = new StringBuilder();
foreach (OUInfo model in nodeList)
{
int ParentID = (model.PID == -1 ? 0 : model.PID);
//string tempMenu = string.Format("{{ id:{0}, pId:{1}, name:\"{2}\",icon:\"{3}\" }},", model.ID, ParentID, model.Name, imgsrc);
string subMenu = this.GetTreeJson(model.ID, folderIcon, leafIcon);
string parentMenu = string.Format("{{ \"id\":{0}, \"pId\":{1}, \"name\":\"{2}\" ", model.ID, ParentID, model.Name);
if (string.IsNullOrEmpty(subMenu))
{
if (!string.IsNullOrEmpty(leafIcon))
{
parentMenu += string.Format(",\"icon\":\"{0}\" }},", leafIcon);
}
else
{
parentMenu += "},";
}
}
else
{
if (!string.IsNullOrEmpty(folderIcon))
{
parentMenu += string.Format(",\"icon\":\"{0}\" }},", folderIcon);
}
else
{
parentMenu += "},";
}
}
content.AppendLine(parentMenu.Trim());
content.AppendLine(subMenu.Trim());
}
return content.ToString().Trim();
}
上面的代碼很好實現了根據數據庫結構的關系，生成Json數據，但是感覺部分硬編碼，湊出來的數據，始終感覺不太理想，如果我們要簡化，該如何操作呢？
2）簡潔美觀的Json數據生成
本小節繼續上面的議題，看如何簡化json的生成，因為我們需要很多這樣的json操作，如果采用上面的方法，我感覺很容易出錯，而且也不太美觀。為了解決這個問題，我們可以通過定義一個json數據的實體類，用來承載相關的信息，如下定義所示。
/// <summary>
/// 定義EasyUI樹的相關數據，方便控制器生成Json數據進行傳遞
/// </summary>
[DataContract]
[Serializable]
public class EasyTreeData
{
/// <summary>
/// ID
/// </summary>
[DataMember]
public string id { get; set; }
/// <summary>
/// 節點名稱
/// </summary>
[DataMember]
public string text { get; set; }
/// <summary>
/// 是否展開
/// </summary>
[DataMember]
public string state { get; set; }
/// <summary>
/// 圖標樣式
/// </summary>
[DataMember]
public string iconCls { get; set; }
/// <summary>
/// 子節點集合
/// </summary>
[DataMember]
public List<EasyTreeData> children { get; set; }
/// <summary>
/// 默認構造函數
/// </summary>
public EasyTreeData()
{
this.children = new List<EasyTreeData>();
this.state = "open";
}
/// <summary>
/// 常用構造函數
/// </summary>
public EasyTreeData(string id, string text, string iconCls = "", string state = "open")
: this()
{
this.id = id;
this.text = text;
this.state = state;
this.iconCls = iconCls;
}
/// <summary>
/// 常用構造函數
/// </summary>
public EasyTreeData(int id, string text, string iconCls = "", string state = "open")
: this()
{
this.id = id.ToString();
this.text = text;
this.state = state;
this.iconCls = iconCls;
}
}
然后，我們在需要生成Json數據的地方，使用這個實體類進行承載，然后把它列表生成Json就可以了，很簡單了，呵呵。
/// <summary>
/// 根據用戶獲取對應人員層次的樹Json
/// </summary>
/// <param name="deptId">用戶所在部門</param>
/// <returns></returns>
public ActionResult GetUserTreeJson(int deptId)
{
List<EasyTreeData> treeList = new List<EasyTreeData>();
treeList.Insert(0, new EasyTreeData(-1, "無"));
List<UserInfo> list = BLLFactory<User>.Instance.FindByDept(deptId);
foreach (UserInfo info in list)
{
treeList.Add(new EasyTreeData(info.ID, info.FullName, "icon-user"));
}
string json = ToJson(treeList);
return Content(json);
}
如果需要遞歸的操作，一樣的方式處理就可以了。
/// <summary>
/// 獲取用戶的部門樹結構(分級需要）
/// </summary>
/// <param name="userId">用戶ID</param>
/// <returns></returns>
public ActionResult GetMyDeptTreeJson(int userId)
{
StringBuilder content = new StringBuilder();
UserInfo userInfo = BLLFactory<User>.Instance.FindByID(userId);
if (userInfo != null)
{
OUInfo groupInfo = GetMyTopGroup(userInfo);
if (groupInfo != null)
{
List<OUNodeInfo> list = BLLFactory<OU>.Instance.GetTreeByID(groupInfo.ID);
EasyTreeData treeData = new EasyTreeData(groupInfo.ID, groupInfo.Name, GetIconcls(groupInfo.Category));
GetTreeDataWithOUNode(list, treeData);
content.Append(base.ToJson(treeData));
}
}
string json = string.Format("[{0}]", content.ToString().Trim(','));
return Content(json);
}
上面使用EasyTreeData來承載數據，然后構建列表，其本身就是一個多層級的樹對象，然后一個ToJson的方法就可以把列表對象完美轉換為Jason數據了。
這里的ToJson，主要就是調用JavaScriptSerializer 對象進行的操作，如下所示。
/// <summary>
/// 把對象為json字符串
/// </summary>
/// <param name="obj">待序列號對象</param>
/// <returns></returns>
protected string ToJson(object obj)
{
string jsonData = (new JavaScriptSerializer()).Serialize(obj);
return jsonData;
}
3、樹控件效果展示
在介紹如何使用它之后，我們來看看我幾個場景中使用樹控件進行的展示效果，方便我們加深上面EasyUI樹控件使用的了解。
1）組織機構列表如下所示：
2）角色樹列表展示
3）功能樹列表展示
4）菜單樹列表展示
5）登陸日志樹列表展示
6）下拉列表樹展示
