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)
實際做起來不難,坎尼這邊就賣個關子,有興趣的人可以自己試試 ^^

2009年10月4日

[Tips] 讓 Visual Studio 自動解析要引用的 namespace

本篇來介紹個算蠻實用的小技巧:讓 Visual Studio 自動解析該使用的 namespace

I. 問題描述

當要宣告或使用其他 namespace 的類別時,忘了是哪個 namespace 該怎麼辦呢?
(尤其是像坎尼這種老人記憶力的...

下圖旁白「啊,我忘了 Color 的 namespace該怎麼辦?」





II. 解決方式

使用 Visual Studio 的 解析 (resolve) 功能,讓 vs 自動解析要用的 namespace在上圖的 Color 字尾有出現個紅底線,把滑鼠移過去之後會出現選單 (如下圖







或是在 Color 上點右鍵選 resolve (解析) 也會出現相同的選單








此時會有兩個選項,上面選項是自動加入 using namespace




下面選項則是直接在原類別關鍵字前加入 namespace




如此一來就可以使用該類別囉 :)

III.小結

Visual Studio 真是很好用的開發工具不要再罵它開啟時為什麼會那麼慢,要多體諒陪大家熬夜加班的這位好朋友

2009年10月3日

輕鬆學會 Chart Control - 替 chart 加上 javascript 事件

之前坎尼介紹過 如何用 postbackvalue 來與使用者互動
但每次都要 postback 很麻煩,有些動作其實用 javascript 來做就好
今天就來教如何加入 javascript 事件

I.實戰

首先要在畫面上佈置 Chart (如下圖


















接著就是撰寫 javascript function,本次範例是把訊息 alert 出來






最後是今天的主角,Series 裡的 MapAreaAttributes 屬性
這個屬性可以替每個 DataPoint (也就是每一條長條圖) 加上可支援的屬性
如 Url、Target、javascript 事件

坎尼在範例中把每個長條加上 onclick 事件
來呼叫前面所寫的 javascript function

















另外再提醒一點,這個屬性也可支援 Chart Keywords
所以坎尼把 X 軸關鍵字 #VALX 傳給 javascript function
接著把DataSource繫結到 Chart 後,就趕緊來看一下成果吧!!!
















點了第一個 Column,果然跳出了該店家的訊息
以上,能簡簡單單地把 javascript function 送給 Chart 執行

II. 小結

MapArea 是 Chart 中很好用的屬性,小平叔贏牌還要靠它呢!!!
而且不只資料點有,其他像 Label、Legend、Title 都有 MapAreaAttributes 屬性
所以想要簡單打造出豐富的互動式圖表已經不是遙遠的夢想

還沒學 MS Chart Control 嗎? 快點來學吧 ^^

III.本次範例下載及參考資料

Google Spreadsheet 裡用規則運算式

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