日本不卡中文字幕,欧美亚洲下一页,日韩视频精品一区二区在线观看

ExtAspNet應用技巧（二十三） - Ext4JSLint之Grid的使用

原創|其它|編輯：郝浩|2009-09-24 09:40:40.000|閱讀 1363 次

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

引子

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

下面是JSLint-Toolkit為JavaScript生成的錯誤列表：

[ 
    [3, 39, 20, "Expected a number and instead saw '''.", "/Expected '{' and instead saw '.+'\\./,"], 
    [3, 39, 21, "Expected '}' and instead saw ' '.", "/Expected '{' and instead saw '.+'\\./,"], 
    [3, 68, 18, "Be careful when making functions within a loop. Consider putting the function in a closure.", "})();"] 
] 

這是一個類似二位數組的結構，每個數組有4列，分別表示錯誤級別，第幾行，第幾列，錯誤信息，錯誤代碼。

界面截圖

使用SyntaxHighlighter顯示JavaScript源代碼

首先看下右側IFrame中，如何使用SyntaxHighlighter來顯示JavaScript源代碼。

<html> 
<head> 
    <title>Untitled Page</title> 
    <link href="js/syntax/styles/shCore.css" rel="stylesheet" type="text/css" /> 
    <link href="js/syntax/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css""> 
        html, body 
        { 
            font-size: 12px; 
            margin: 0px; 
            padding: 0px; 
        } 
        .syntaxhighlighter 
        { 
            margin: 0 !important; 
        } 
    </style> 
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script src="js/syntax/scripts/shCore.js" type="text/javascript"></script> 
    <script src="js/syntax/scripts/shBrushJScript.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        // TODO 
    </script> 
</head> 
<body> 
</body> 
</html> 

我們引入了jQuery，來完成AJAX操作以及頁面的平滑滾動，來看下JavaScript代碼：

SyntaxHighlighter.config.clipboardSwf = 'js/syntax/scripts/clipboard.swf'; 
window.highlight = function(number) { 
    $(".line, highlighted").removeClass("highlighted"); 
    var top = $(".line:eq(" + (number - 1) + ")").addClass("highlighted").offset().top - 150; 
    $("html, body").animate({ 
        scrollTop: top 
    }, 500); 
}; 
window.loadJS = function(url, fn) { 
    $.get(url, function(data) { 
        data = data.replace(/</g, "<").replace(/>/g, ">").replace(/\/r\/n/g, "<br />"); 
        $("body").html(""); 
        $("<pre class=\"brush: js\">" + data + "</pre>").appendTo("body"); 
        SyntaxHighlighter.highlight(); 
        if (fn) { 
            fn(); 
        } 
    }, "text"); 
}; 

其中window.loadJS用來讀取一個url的內容（這里是JavaScript文件），并使用SyntaxHighlighter高亮顯示在頁面。
window.highlight用來高亮顯示某一行源代碼，同時這里使用jQuery的animate函數來完成頁面的平滑滾動。

由于這個頁面是嵌入在父頁面中的，所以接下來你會看到如何在父頁面中操作這兩個JavaScript函數。

父頁面中的JavaScript定義

<script type="text/javascript"> 
    function onReady() { 
      
        selectGridRow(); 
    } 
    function selectGridRow() { 
        var grid = Ext.getCmp("<%= Grid1.ClientID %>"); 
        grid.getSelectionModel().on("rowselect", function(sm, rowIndex, record) { 
            getMainWindow().highlight(parseInt(record.json[0].replace(/<.*?>/g, ""))); 
        }); 
    } 
    function getMainWindow() { 
        return Ext.query("iframe[name=main]")[0].contentWindow; 
    } 
  
</script> 

其中getMainWindow用來獲取IFrame的window實例。
而selectGridRow會在頁面加載完畢后立即執行，用來在選中Grid的某一行時高亮顯示右側IFrame中的對應行的源代碼（這里用到了上面提到的highlight函數）。

點擊樹節點的事件處理

還記得在上一章中，我們為Tree注冊了OnNodeCommand="Tree1_NodeCommand"，下面來看下此函數：

protected void Tree1_NodeCommand(object sender, ExtAspNet.TreeCommandEventArgs e) 
{ 
    string fileName = e.CommandName.Replace("/", "_"); 
    if (ViewState["CurrentFileName"] != null && ViewState["CurrentFileName"].ToString() == fileName) 
    { 
        return; 
    } 
    ViewState["CurrentFileName"] = fileName; 
    string errorstr = GetFileContent(String.Format("~/data/errors/{0}.json", fileName)); 
    JSONArray ja = new JSONArray(errorstr); 
    DataTable table = new DataTable(); 
    table.Columns.Add("level", typeof(Int32)); 
    table.Columns.Add("line", typeof(Int32)); 
    table.Columns.Add("character", typeof(Int32)); 
    table.Columns.Add("reason", typeof(String)); 
    table.Columns.Add("evidence", typeof(String)); 
    foreach (JSONArray error in ja.getArrayList()) 
    { 
        DataRow row = table.NewRow(); 
        table.Rows.Add(row); 
        row[0] = Convert.ToInt32(error[0]); 
        row[1] = Convert.ToInt32(error[1]); 
        row[2] = Convert.ToInt32(error[2]); 
        row[3] = error[3].ToString(); 
        row[4] = error[4].ToString(); 
    } 
    Grid1.DataSource = table; 
    Grid1.DataBind(); 
    string showSourceScript = "(function(){getMainWindow().loadJS('data/source/" + fileName + "');}).defer(100);"; 
    ExtAspNet.PageContext.RegisterStartupScript(showSourceScript); 
} 

這里面有兩個應用技巧：

點擊樹節點時，需要在后臺獲取此節點的相關信息怎么辦？通過TreeNode的CommandName或者CommandArgument來傳遞。
點擊樹節點時，除了要綁定Grid1外，還需要加載IFrame中JavaScript的內容，這通過ExtAspNet.PageContext.RegisterStartupScript來執行一段腳本。

注：ExtAspNet.PageContext.RegisterStartupScript是一個常用的函數，以后你會經常遇到。
在注冊的腳本中，我們使用defer(100)來讓這段腳本延遲一段執行，這是為了防止瀏覽器卡（因為同時綁定Grid和發起AJAX可能很耗資源）。

根據錯誤級別為Grid每一項添加文字顏色

對于非常嚴重的錯誤，需要標示文字顏色為紅色，而對于不要嚴重的錯誤只需文字顏色為淡黃色就行了。

為了實現這一效果，我們有兩種不同的方法都可以達到相同的目的。

1. 方法一，在Grid的RowDataBound事件做文章（這也是Asp.net的GridView控件常用的技巧）

protected void Grid1_RowDataBound(object sender, ExtAspNet.GridRowEventArgs e) 
{ 
    // DataItem是行的數據源， 
    // 如果數據源是DataTable/DataView/DataSet，則e.DataItem是DataRow 
    // 如果數據源是List<MyClass>，則e.DataItem是MyClass 
    // e.Values 是實際賦予此行每列的值，可以修改 
    DataRow row = e.DataItem as DataRow; 
    if (row != null) 
    { 
        int level = Convert.ToInt32(row["level"]); 
        string style = String.Empty; 
        if (level == 1) 
        { 
            style = "color:#FF0000;"; 
        } 
        else
        { 
            style = "color:#FF9900;"; 
        } 
        for (int i = 0; i < e.Values.Length; i++) 
        { 
            e.Values[i] = String.Format("<span style=\"{0}\">{1}</span>", style, e.Values[i]); 
        } 
    } 
} 

2. 方法二，在Grid的PreRowDataBound事件做文章（這是ExtAspNet特有的事件）

需要特別注意的是，這里改變的是一列的屬性（請細細品味是列的屬性，不是某一行的屬性）。

protected void Grid1_PreRowDataBound(object sender, ExtAspNet.GridPreRowEventArgs e) 
{ 
    DataRow row = e.DataItem as DataRow; 
    if (row != null) 
    { 
        int level = Convert.ToInt32(row["level"]); 
        string style = String.Empty; 
        if (level == 1) 
        { 
            style = "color:#FF0000;"; 
        } 
        else
        { 
            style = "color:#FF9900;"; 
        } 
        foreach (ExtAspNet.GridColumn column in Grid1.Columns) 
        { 
            ExtAspNet.BoundField field = column as ExtAspNet.BoundField; 
            field.DataFormatString = "<span style=\"" + style + "\">{0}</span>"; 
        } 
    } 
} 