ExtAspNet应用技巧（二十二） - Ext4JSLint之JSON文件创建树控件-控件新闻-慧都网

ExtAspNet应用技巧（二十二） - Ext4JSLint之JSON文件创建树控件

原创|其它|编辑：郝浩|2009-09-24 09:38:14.000|阅读 1188 次

概述：Ext4JSLint是使用ExtAspNet来展示JSLint-Toolkit检查结果的开源项目。 JSLint-Toolkit是一个使用Rhino和JSLint的开源项目，可以对一个文件夹中的所有JavaScript进行语法检查，并显示友好的检查结果。

引子

Ext4JSLint是使用ExtAspNet来展示JSLint-Toolkit检查结果的开源项目。
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); 
    } 
} 