国产ts人妖视频,91视频免费大全,美女在线免费观看

ExtAspNet應(yīng)用技巧（二十三） - Ext4JSLint之Grid的使用

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

概述：Ext4JSLint是使用ExtAspNet來(lái)展示JSLint-Toolkit檢查結(jié)果的開(kāi)源項(xiàng)目。 JSLint-Toolkit是一個(gè)使用Rhino和JSLint的開(kāi)源項(xiàng)目，可以對(duì)一個(gè)文件夾中的所有JavaScript進(jìn)行語(yǔ)法檢查，并顯示友好的檢查結(jié)果。

引子

Ext4JSLint是使用來(lái)展示JSLint-Toolkit檢查結(jié)果的開(kāi)源項(xiàng)目。
是一個(gè)使用Rhino和JSLint的開(kāi)源項(xiàng)目，可以對(duì)一個(gè)文件夾中的所有JavaScript進(jìn)行語(yǔ)法檢查，并顯示友好的檢查結(jié)果。

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

[ 
    [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.", "})();"] 
] 

這是一個(gè)類(lèi)似二位數(shù)組的結(jié)構(gòu)，每個(gè)數(shù)組有4列，分別表示錯(cuò)誤級(jí)別，第幾行，第幾列，錯(cuò)誤信息，錯(cuò)誤代碼。

界面截圖

使用SyntaxHighlighter顯示JavaScript源代碼

首先看下右側(cè)IFrame中，如何使用SyntaxHighlighter來(lái)顯示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，來(lái)完成AJAX操作以及頁(yè)面的平滑滾動(dòng)，來(lái)看下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用來(lái)讀取一個(gè)url的內(nèi)容（這里是JavaScript文件），并使用SyntaxHighlighter高亮顯示在頁(yè)面。
window.highlight用來(lái)高亮顯示某一行源代碼，同時(shí)這里使用jQuery的animate函數(shù)來(lái)完成頁(yè)面的平滑滾動(dòng)。

由于這個(gè)頁(yè)面是嵌入在父頁(yè)面中的，所以接下來(lái)你會(huì)看到如何在父頁(yè)面中操作這兩個(gè)JavaScript函數(shù)。

父頁(yè)面中的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> 

其中g(shù)etMainWindow用來(lái)獲取IFrame的window實(shí)例。
而selectGridRow會(huì)在頁(yè)面加載完畢后立即執(zhí)行，用來(lái)在選中Grid的某一行時(shí)高亮顯示右側(cè)IFrame中的對(duì)應(yīng)行的源代碼（這里用到了上面提到的highlight函數(shù)）。

點(diǎn)擊樹(shù)節(jié)點(diǎn)的事件處理

還記得在上一章中，我們?yōu)門(mén)ree注冊(cè)了OnNodeCommand="Tree1_NodeCommand"，下面來(lái)看下此函數(shù)：

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); 
} 

這里面有兩個(gè)應(yīng)用技巧：

點(diǎn)擊樹(shù)節(jié)點(diǎn)時(shí)，需要在后臺(tái)獲取此節(jié)點(diǎn)的相關(guān)信息怎么辦？通過(guò)TreeNode的CommandName或者CommandArgument來(lái)傳遞。
點(diǎn)擊樹(shù)節(jié)點(diǎn)時(shí)，除了要綁定Grid1外，還需要加載IFrame中JavaScript的內(nèi)容，這通過(guò)ExtAspNet.PageContext.RegisterStartupScript來(lái)執(zhí)行一段腳本。

注：ExtAspNet.PageContext.RegisterStartupScript是一個(gè)常用的函數(shù)，以后你會(huì)經(jīng)常遇到。
在注冊(cè)的腳本中，我們使用defer(100)來(lái)讓這段腳本延遲一段執(zhí)行，這是為了防止瀏覽器卡（因?yàn)橥瑫r(shí)綁定Grid和發(fā)起AJAX可能很耗資源）。

根據(jù)錯(cuò)誤級(jí)別為Grid每一項(xiàng)添加文字顏色

對(duì)于非常嚴(yán)重的錯(cuò)誤，需要標(biāo)示文字顏色為紅色，而對(duì)于不要嚴(yán)重的錯(cuò)誤只需文字顏色為淡黃色就行了。

為了實(shí)現(xiàn)這一效果，我們有兩種不同的方法都可以達(dá)到相同的目的。

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

protected void Grid1_RowDataBound(object sender, ExtAspNet.GridRowEventArgs e) 
{ 
    // DataItem是行的數(shù)據(jù)源， 
    // 如果數(shù)據(jù)源是DataTable/DataView/DataSet，則e.DataItem是DataRow 
    // 如果數(shù)據(jù)源是List<MyClass>，則e.DataItem是MyClass 
    // e.Values 是實(shí)際賦予此行每列的值，可以修改 
    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特有的事件）

需要特別注意的是，這里改變的是一列的屬性（請(qǐng)細(xì)細(xì)品味是列的屬性，不是某一行的屬性）。

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>"; 
        } 
    } 
} 