91精品高清在线,亚洲欧美97,成人免费片

ExtAspNet應用技巧（二十二） - Ext4JSLint之JSON文件創建樹控件

原創|其它|編輯：郝浩|2009-09-24 09:38:14.000|閱讀 1197 次

概述：Ext4JSLint是使用ExtAspNet來展示JSLint-Toolkit檢查結果的開源項目。 JSLint-Toolkit是一個使用Rhino和JSLint的開源項目，可以對一個文件夾中的所有JavaScript進行語法檢查，并顯示友好的檢查結果。

引子

Ext4JSLint是使用來展示JSLint-Toolkit檢查結果的開源項目。
是一個使用Rhino和JSLint的開源項目，可以對一個文件夾中的所有JavaScript進行語法檢查，并顯示友好的檢查結果。

下面是JSLint-Toolkit生成的檢查結果：

[{ 
    "name": "source",  
    "type": "folder",  
    "kids": [ 
     { 
      "name": "config.js",  
      "type": "file",  
      "errors": [0, 0, 0] 
     },  
     { 
      "name": "lint.js",  
      "type": "file",  
      "errors": [3, 0, 3] 
     },  
     { 
      "name": "main.js",  
      "type": "file",  
      "errors": [0, 0, 0] 
     },  
     { 
      "name": "util.js",  
      "type": "file",  
      "errors": [0, 0, 0] 
     } 
    ],  
    "basePath": "scripts/source",  
    "fileCount": 4,  
    "errors": [3, 0, 3] 
},  
{ 
    "name": "jquery-1.3.2.js",  
    "type": "file",  
    "basePath": "scripts/jquery-1.3.2.js",  
    "errors": [51, 43, 8] 
}] 

這樣一個JSON字符串其實描述了一個如下的文件結構：

+scripts/source
     -config.js
     -lint.js
     -main.js
     -util.js
    -scripts/jquery-1.3.2.js

特別注意的是，根節點多了一個屬性basePath用來表示根路徑。
errors表示此JavaScript文件中的錯誤數（這是一個數組，第一個表示總數，第二個表示嚴重錯誤的個數）。

頁面效果：

ASPX標簽定義

<ext:Tree runat="server" ID="Tree1" ShowBorder="false" ShowHeader="false" AutoScroll="true"
    EnableArrows="true" OnNodeCommand="Tree1_NodeCommand"> 
</ext:Tree> 

標簽定義非常簡單，因為所有的邏輯都在后臺實現了。
同時定義了點擊樹節點的事件處理OnNodeCommand="Tree1_NodeCommand"，因為我們要在點擊樹節點時更新中間的Grid，也即是當前JavaScript的錯誤列表。

樹與遞歸

只要有樹的地方就少不了遞歸函數，因此這段代碼對于我們理解遞歸也很有幫助。

首先看看頁面初始化代碼：

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!IsPostBack) 
    { 
        LoadData(true); 
    } 
} 
#region LoadData 
private void LoadData(bool showAllErrors) 
{ 
    btnExpandAll.OnClientClick = Tree1.GetExpandAllNodesReference(); 
    btnCollapseAll.OnClientClick = Tree1.GetCollapseAllNodesReference(); 
    string treestr = GetFileContent("~/data/json/tree.json"); 
    List<string> treePathList = new List<string>(); 
    ResolveMenuTree(new JSONArray(treestr), treePathList, showAllErrors, Tree1.Nodes); 
} 
private string GetFileContent(string path) 
{ 
    string treestr = String.Empty; 
    using (StreamReader sr = new StreamReader(Server.MapPath(path))) 
    { 
        treestr = sr.ReadToEnd(); 
    } 
    return treestr; 
} 
private void ResolveMenuTree(JSONArray ja, List<string> treePathList, bool showAllErrors, ExtAspNet.TreeNodeCollection nodes) 
{ 
    // TODO 遞歸生成樹 
} 
private string GetTreePath(List<string> treePath) 
{ 
    string path = String.Empty; 
    foreach (string node in treePath) 
    { 
        path += node + "/"; 
    } 
    return path.TrimEnd('/'); 
} 

我們通過Nii.JSON這個開源類庫（已經包含在ExtAspNet中），來將JSON字符串轉換為JSONArray對象，以便在遞歸中使用：

1.JSONArray ja = new JSONArray(treestr);

遞歸生成樹

為了讓大家看清問題的本質，我首先放出一個簡單的遞歸，只完成基本功能：

private void ResolveMenuTree2(JSONArray ja, List<string> treePathList, bool showAllErrors, ExtAspNet.TreeNodeCollection nodes) 
{ 
    for (int i = 0; i < ja.Count; i++) 
    { 
        JSONObject kid = ja[i] as JSONObject; 
        string name = kid.getString("name"); 
        // 當前路徑，如果basePath存在說明是根目錄 
        if (kid.has("basePath")) 
        { 
            treePathList.Add(kid.getString("basePath")); 
        } 
        else
        { 
            treePathList.Add(name); 
        } 
        string currentPath = GetTreePath(treePathList); 
        string type = kid.getString("type"); 
        // 如果文件夾中沒有文件，則不添加此文件夾 
        if (type == "folder" && kid.getInt("fileCount") == 0) 
        { 
            treePathList.RemoveAt(treePathList.Count - 1); 
            continue; 
        } 
        ExtAspNet.TreeNode node = new ExtAspNet.TreeNode(); 
        nodes.Add(node); 
        node.Text = name; 
        node.Text = String.Format("<span qtip=\"{0}\">{1}</span>", currentPath, node.Text); 
        if (type == "folder") 
        { 
            node.SingleClickExpand = true; 
            ResolveMenuTree2(kid.getJSONArray("kids"), treePathList, showAllErrors, node.Nodes); 
        } 
        else
        { 
            node.Leaf = true; 
        } 
        treePathList.RemoveAt(treePathList.Count - 1); 
    } 
} 

在這段代碼中，我們通過treePathList來記錄當前節點的路徑，這也是一個關鍵點。

此時生成的頁面截圖：

完整的代碼（根據錯誤設置節點顏色，同時為有錯誤的節點可回發）：

private void ResolveMenuTree(JSONArray ja, List<string> treePathList, bool showAllErrors, ExtAspNet.TreeNodeCollection nodes) 
{ 
    for (int i = 0; i < ja.Count; i++) 
    { 
        JSONObject kid = ja[i] as JSONObject; 
        string name = kid.getString("name"); 
        // 當前路徑，如果basePath存在說明是根目錄 
        if (kid.has("basePath")) 
        { 
            treePathList.Add(kid.getString("basePath")); 
        } 
        else
        { 
            treePathList.Add(name); 
        } 
        string currentPath = GetTreePath(treePathList); 
        // 獲取JSLint錯誤數 
        JSONArray errors = kid.getJSONArray("errors"); 
        int errorCount = errors.getInt(0); 
        int criticalErrorCount = errors.getInt(1); 
        if (showAllErrors) 
        { 
            if (errorCount > 0) 
            { 
                name += String.Format(" ({0})", errorCount); 
            } 
        } 
        else
        { 
            if (criticalErrorCount > 0) 
            { 
                name += String.Format(" ({0})", criticalErrorCount); 
            } 
        } 
        string type = kid.getString("type"); 
        // 如果文件夾中沒有文件，則不添加此文件夾 
        if (type == "folder" && kid.getInt("fileCount") == 0) 
        { 
            treePathList.RemoveAt(treePathList.Count - 1); 
            continue; 
        } 
        ExtAspNet.TreeNode node = new ExtAspNet.TreeNode(); 
        nodes.Add(node); 
        node.Text = name; 
        //node.ToolTip = currentPath; 
        // 節點的顯示顏色 
        string style = ""; 
        if (showAllErrors) 
        { 
            if (errorCount == 0) 
            { 
                style = "color:green;"; 
            } 
            else
            { 
                if (criticalErrorCount == 0) 
                { 
                    style = "color:#FF9900;"; 
                } 
                else
                { 
                    style = "color:#FF0000;"; 
                } 
            } 
        } 
        else
        { 
            if (criticalErrorCount != 0) 
            { 
                style = "color:#FF0000;"; 
            } 
            else
            { 
                style = "color:green;"; 
            } 
        } 
        node.Text = String.Format("<span qtip=\"{2}\" style=\"{0}\">{1}</span>", style, node.Text, currentPath); 
        if (type == "folder") 
        { 
            node.SingleClickExpand = true; 
            ResolveMenuTree(kid.getJSONArray("kids"), treePathList, showAllErrors, node.Nodes); 
        } 
        else
        { 
            node.Leaf = true; 
            if (showAllErrors) 
            { 
                if (errorCount != 0) 
                { 
                    node.EnablePostBack = true; 
                    node.CommandName = currentPath; 
                } 
            } 
            else
            { 
                if (criticalErrorCount != 0) 
                { 
                    node.EnablePostBack = true; 
                    node.CommandName = currentPath; 
                } 
            } 
        } 
        treePathList.RemoveAt(treePathList.Count - 1); 
    } 
} 