Dev 2Share

有了 jQuery, 我們在撰寫 JavaScript 時可以省下許多力氣。由於在 jQuery 中, 它提供了各式各樣的方法, 可以讓我們很快的找到網頁中的各種元素, 而且不用撰寫很長的程式碼, 所以我們可以利用它來達成以前不容易辦到的事情。(如果你完全不熟 jQuery, 你可以看看 MSDN 上的 jQuery 邊做邊學系列教學, 這個系列真的做得很棒!)

在這裡我要示範一個很有趣的方法, 把一個 ASP.NET 的 GridView 控制項進行著色, 並加上光棒效果。當然, 同樣的功能也可以以其它簡單的方法達到, 並不一定需要透過 jQuery。我已經說過這只是個示範而已。事實上, 只要我們看懂 jQuery 的運作方式, 就可以了解我們將可以把它運用在其它方面。

在範例網頁中, 我先建立一個 GridView 控制項。這個 GridView 要怎樣讀到資料都無所謂, 只要它能顯示兩個以上的資料列就行了; 也不需要對它進行自動格式化, 更不需要事先設定 Skin。

現在假設這個 GridView 的 ID 叫做 gv。在網列上端加入以下代碼之後, 就可以替這個 GridView 加入幾個功能:

1. 每間隔列加上不同的底色, 而底色是在 CSS 中定義
2. 加上光棒效果, 而光棒顏色也是在 CSS 中定義
3. 為標題列加上特殊的底色或圖樣, 其格式在 CSS 中定義
4. 為標題列在 PostBack 時加上一個淡入效果 (Fade In)
5. 為頁碼列加上特殊的底色或圖樣, 同樣地, 其格式也是在 CSS 中定義
6. 光棒效果不會在標題列和頁碼列生效
7. 加上 jQuery 之後, 程式中自動具有 AJAX 效果
8. 當滑鼠移過頁碼列的各個頁碼時字會變大

 程式碼如下:

<%@ Page Title="首頁" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="TestWeb._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

    <title>為 GridView/表格 加上光棒效果</title>
    <style type="text/css">
        .titleBar
        {
         background-color: #a0ffdd;
         background-image: url("../Images/bg.gif");
         padding: 6px;
        }
        .itemBar {}
        .alternativeBar
        {
         background-color: #e3e3e3;
        }
        .lightBarH
        {
         background-color: #ffe3e3;
        }       
        .lightBarV
        {
         background-color: #e3ffff;
        }       
        .lightBarCenter
        {
         background-color: #1a1a1a;
         color: #ffffaa;
        }       
        .pagerBar
        {
         background-color: #ddff99;
            height: 44px;
            text-align: center;
            padding-left: 6px;
            padding-right: 6px;
        }
        .pageIndexesLarge
        {
         font-size: xx-large;
         font-family: Arial, MS Sans Serif;
         background-color: Yellow;
         color: Blue;
         border: ridge 1px Gray;
        }
    </style>
        <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.fn.delay = function (time, callback) {
            jQuery.fx.step.delay = function () { };
            return this.animate({ delay: 1 }, time, callback);
        }

        var gv = "#gv";
        $(function () {
            var titleBar = $(gv + " tr:first"); // 找到表格中第一個 tr, 也就是 GridView 的 Title Row
            titleBar.attr("type", "titleBar"); // 將 titleBar 本身加上 type 屬性並指定為 titleBar
            var titleBarCells = titleBar.children("th").add(titleBar.children("td"));
            titleBarCells.addClass("titleBar");
            titleBarCells.attr("type", "titleBar"); // 將 titleBar 中所有 td 加上 type 屬性並指定為 titleBar
            titleBarCells.hide().fadeIn("slow"); // 當網頁載入時, 讓 titleBar 顯示淡入效果

            var itemBars = titleBar.siblings().not(":last"); // 找到 Item Rows
            itemBars.attr("type", "itemBars"); // 將 itemBars 本身加上 type 屬性並指定為 itemBars
            var itemBarsOdd = itemBars.filter(":even"); // 找到 Item Rows 中單數行
            itemBarsOdd.addClass("itemBar");
            var itemBarsEven = itemBars.filter(":odd"); // 找到 Item Rows 中偶數行
            itemBarsEven.addClass("alternativeBar");
            var itemBarCells = itemBars.children("td");
            itemBarCells.attr("type", "itemBars"); // 將 itemBars 以下各 td 也加上 type 屬性並指定為 itemBars
            itemBarCells.mouseover(function (e) { // 指定滑鼠移入時的觸發事件
                var td = $(this);
                var tr = td.closest("tr");
                tr.addClass("lightBarH");
                var colIndex = tr.children().index(td) + 1; // 計算事件所在是第幾行
                var cols = itemBarsOdd.find("td:nth-child(" + colIndex + ")");
                cols.addClass("lightBarV");
                td.addClass("lightBarCenter");
            });
            itemBarCells.mouseout(function (e) { // 指定滑鼠移出時的觸發事件
                var td = $(this);
                var tr = td.closest("tr");
                tr.removeClass("lightBarH");
                itemBarCells.removeClass("lightBarH").removeClass("lightBarV").removeClass("lightBarCenter");
            });

            var pagerBar = titleBar.siblings(":last"); // 找到 Pager Row
            pagerBar.addClass("pagerBar");
            var pageIndexes = pagerBar.find("a"); // 找到各頁碼數字
            pageIndexes.mouseover(function (e) { $(e.target).addClass("pageIndexesLarge"); }); // 指定滑鼠移入時的觸發事件
            pageIndexes.mouseout(function (e) { $(e.target).removeClass("pageIndexesLarge"); }); // 指定滑鼠移出時的觸發事件

        });

    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        歡迎使用 ASP.NET!
    </h2>
    <p>&nbsp;</p>
    <table id="gv" border="1" width="100%">
        <tr>
            <td colspan="2">
                This is header
            </td>
        </tr>
        <tr>
            <td>
                This is content line 1
            </td>
            <td>
                This is content line 1
            </td>
        </tr>
        <tr>
            <td>
                This is content line 2
            </td>
            <td>
                This is content line 2
            </td>
        </tr>
        <tr>
            <td>
                This is content line 3
            </td>
            <td>
                This is content line 3
            </td>
        </tr>
        <tr>
            <td>
                This is content line 4
            </td>
            <td>
                This is content line 4
            </td>
        </tr>
        <tr>
            <td colspan="2">
                This is footer - Page <a>1</a> <a>2</a> <a>3</a> <a>4</a>
            </td>
        </tr>
    </table>
    <p>
        &nbsp;</p>
</asp:Content>

你可以自己把這個範例程式再加以改善或擴充。基本上, 這個範例可以運用在任何使用 Table 元件的控制項 (並不一定得是 ASP.NET 控制項; HTML 也行)。而對於 ListView 這種完全是以樣版組成的控制項, jQuery 會更有發揮的空間。

回到這個範例, 如果把程式改一下, 我們應該可以很容易的為網頁加上動態變更 Theme 的效果 (不是使用 ASP.NET 所提供的 Theme)。我們只需要套用不同的 CSS 設定, 就可以把網頁中所有的 GridView 同時變更外觀。還有, 如果你把這個程式放在 Master Page 裡, 應該可以為網站內第一個表格加上相同的效果 (把程式中 var gv = "#gv"; 改成 var gv = "table"; 即可, 不過程式可能需要看情況稍改一下)。

---

Dev 2Share @ 點部落