2009年10月9日

利用 jQuery 替 GridView 加上點擊高亮顯示

在 GridView 上要做到 highlight 效果
通常會利用 mouseover mouseout 兩個事件去修改背景色
之前坎尼在 MSDN 論譠看到有人想點擊後再改背景色
且點擊下一列之後,前一列要回復原來的背景色,這要怎麼做呢?

I. 畫面設定

首先,在畫面上加入個 GridView,並給予樣式
<asp:GridView ID="GridView1" runat="server" Width="450px"
CellPadding="4" ForeColor="#333333" GridLines="None">
    <RowStyle CssClass="rowstyle" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True"
        ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" 
        HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True"
        ForeColor="#333333" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True"
        ForeColor="White" />
    <EditRowStyle BackColor="#2461BF" />
    <AlternatingRowStyle CssClass="alterrowstyle" /> 
</asp:GridView>
可以看到,奇偶行的 RowStyle 分別有自己 class
樣式內容如下 (含 highlight 的樣式
.highlight
{
    background-color: Yellow;
}
.rowstyle
{
    background-color: #CCF3FB;
}
.alterrowstyle
{
    background-color: White;
}

II. jQuery 程式碼

接著在 javascript 區段內加入下列的 code
<script type="text/javascript">
    //記錄前一個 jQuery 物件及原class
    var preElement;
    var preClass;
    $(function() {
        //替 GridView1 的所有 tr 加入 click 事件
        $("#GridView1 tr").click(function() {
            //回復上一個物件的樣式
            if (preElement != null)
                preElement.removeClass().addClass(preClass);
            //取得目前點選物件
            var nowElement = $(this);
            //記錄物件,等待下次使用
            preElement = nowElement;
            preClass = nowElement.attr("class");
            //修改目前點選物件樣式
            nowElement.removeClass().addClass("highlight");
        });
    });
</script> 
只要在點擊下一列時,把記錄下來的上一列樣式給回復就好
是不是很簡單呢?  來看一下成果




















此時有人可能會有疑問:
既然只抓取 GridView1 內的 tr,那點到 Header 不會變色嗎?

以這個範例來講,並不會有那種情況
雖然點下 header 時,仍會把 class 附加上去

但 header 本身已有 inline-style,優先權會高於 class
所以 background-color 會維持原來的顏色

III.小結

其實以上範例也可以用單純的 DOM 加上 javascipt 來達成
(配合 GridView 的 RowDataBound)
實際做起來不難,坎尼這邊就賣個關子,有興趣的人可以自己試試 ^^

1 則留言:

匿名 提到...

$("tr:not(:first)")
這樣也可以避掉header

Google Spreadsheet 裡用規則運算式

最近因為工作關係,遇到要用 Google Form 及 Google Sheet 所以研究了 Google Sheet 裡的一些 function 怎麼用 首先,分享一下如何在 Google Sheet 裡用規則運算 :D