透過 jQuery 實現 可 縮合/展開 的資料表

ludo 寫了一個 jQuery 的外掛元件 treeTable (http://plugins.jquery.com/project/treeTable)，可以很容易的將 table 以縮合/展開的樣式來呈現。上圖即是我想要呈現的結果。關於這外掛元件的詳細說明，請參考 ludo 的線上文件(http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html)。

在 treeTable 的定義裡， Table 裡面的每一個 <TR> 都必須要有一個唯一的 ID。如果某個 <TR> 他有個父親，則只需要在這個 <TR> 的 class 屬性加上以"child-of-"字首開頭，並接續著父親 ID 的屬性名稱，就可以將這個 <TR> 視為是某一個 <TR> 的兒子。

舉例來說，
<TR ID="Father"><TD>爸爸</TD></TR>
<TR ID="Son" class="child-of-Father"><TD>兒子</TD></TR>
只需在 ID="Son" 的 <TR> 中，加上 class="child-of-Father" ，就可以完成父子關係的描述。

最後，只需要使用 .treeTable() 就可以將縮合/展開的效果呈現出來。
假如我的 Table ID 是 treeTable ，則呈現縮合/展開的語法如下：
$("#treeTable").treeTable();


以下是實際將 treeTable 元件下載，整合到 .Net 專案的步驟：

0.下載 treeTable(v2.2.3) :
    http://plugins.jquery.com/files/treeTable-2.2.3.zip
1.解開 treeTable 壓縮檔
2.將 /treeTable/doc/javascripts 資料夾複製到自己專案的 /javascripts 下
3.將 /treeTable/doc/stylesheets 資料夾複製到自己專案的 /stylesheets 下
4.將 /treeTable/doc/images 資料夾複製到自己專案的 /images 下
5.將 /treeTable/src/javascripts 資料夾複製到自己專案的 /javascripts 下
6.將 /treeTable/src/stylesheets 資料夾複製到自己專案的 /javascripts 下
7.將 /treeTable/src/images 資料夾複製到自己專案的 /images 下
8.修改 /stylesheets/master.css ，將 body 的 font-family 改成
font-family: Verdana, Arial, Helvetica, sans-serif; (自己覺得預設的字型醜醜ㄉ)
9.在 <head> 裡定義好所引用的 .css 與 .js 。在這裡要特別強調，不要忘了將 master.css
引用進來，否則會無法正確顯示。

<head runat="server">
    <title>treeTable Demo</title>
    <link href="stylesheets/master.css" rel="stylesheet" type="text/css" />
    <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script>
    <script language="javascript" src="javascripts/jquery.treeTable.js" type="text/javascript"></script>
    <link href="stylesheets/jquery.treeTable.css" rel="stylesheet" type="text/css" />

    <script  type="text/javascript">
    $(function(){
        $("#treeTable").treeTable();       
    })
    </script>    
</head>

10.將測試的 Table 放到 <body> 裡：

<body>
<table id="treeTable" >
    <thead>
    <th>office</th><th>帳號</th><th>中文姓名</th>
    </thead>
    <tbody>
    <tr id="p1" ><td>3F</td><td></td><td></td></tr>
    <tr id="c1" class="child-of-p1"><td>3F</td><td>paladin</td><td>李志堅</td></tr>
    <tr id="c2" class="child-of-p1"><td>3F</td><td>hugo</td><td>馮世華</td></tr>
    <tr id="p2"><td>5F</td><td></td><td></td></tr>
    <tr id="c3" class="child-of-p2"><td>5F</td><td>panda</td><td>許世宗</td></tr>
    <tr id="c4" class="child-of-p2"><td>5F</td><td>polly</td><td>陳珮茹</td></tr>
    </tbody>
</table>
</body>

將 XML 資料轉到 DataTable

using System.Xml;

來源 xml :

string oriXML = @"<?xml version='1.0' encoding='UTF-8'?>
<people>
<user office='3F' />
<user office='3F' name='paladin' cname='李志堅' />
<user office='3F' name='hugo' cname='馮世華' />
<user office='5F' />
<user office='5F' name='panda' cname='許世宗' />
<user office='5F' name='polly' cname='陳珮茹' />
</people>";

主要程式：

protected void Page_Load(object sender, EventArgs e)
    {
        BindGV();
    }

    private void BindGV()
    {
        XmlDocument doc = new XmlDocument();

        //將 xml 讀到 XmlDocument
        doc.LoadXml(oriXML);

        //透過 XmlReader 將 XmlDocument 內容取出
        XmlReader XR = XmlReader.Create(new System.IO.StringReader(doc.OuterXml));

        DataSet ds = new DataSet();
        //指定DataSet 的來源是透過  ReadXml 方式取得
        ds.ReadXml(XR);

        //取出 DataSet 裡的  DataTable  , 這行不執行也可以，只要將 gv.DataSource 設為 ds
        DataTable dt = ds.Tables[0];
        gv.DataSource = dt;

        //重新繫結網頁上所放置的 GridView
        gv.DataBind();
    }

程式執行結果如下：

程式參考：
http://www.dotblogs.com.tw/tworhouse/archive/2009/11/18/12044.aspx
http://gemmarecord.blogspot.com/2008/12/datatsetxml.html （gemma 這篇更精簡些）

思考即能量

在湛若水先生所寫的「內經呼吸養生法」一書中提到「天地萬物皆為陰陽組成」，以一個人為例，這個人的體內就會同時有陰的能量與陽的能量存在。那麼人體裡面到底是陰比較多，還是陽比較多呢？這就是問己的功夫，是由你自己來決定的。「思考即能量」，您對一件事情的反應，如果是正面的，即是替自己注入陽性的能量，相反地，如果你選擇的反應是負面的，則是為自己注入陰性的能量。

不論是陽性的能量亦或陰性的能量，經過長期地累積，當其強度超過某個臨界點後，就會由原先陰陽平衡的狀態朝向兩極而發展。因此，每個人自身的正氣或邪氣都是自己創造出來的。換句話說，所謂的正氣，就是一個人品行端正所培養出來的陽性磁場；邪氣則是一個人長期怨恨、憂傷、恐懼或長期為病所苦而產生的陰性磁場。

人在安靜的時候，比較能夠累積能量，至於是累積陽性的能量，還是陰性的能量，則會形成不同的人格特質。孔夫子勸人「慎獨」，孟子、王陽明提倡「良知」，他們的目的都是在提醒世人：心念所產生的陽性能量與陰性能量可以左右我們的身心健康。正如佛家所言：要在動心起念處下功夫。

T-SQL 剔除重複資料

去除重複資料，在資料庫的查詢語法裡，算是很常見的一種需求，用膝蓋想，Distinct 這名詞就浮出來了。然而，T-SQL 沒辦法讓你指針對某個欄位去作 Distinct ，舉例說，如果你有三個欄位，則 T-SQL 的 Distinct 就會針對這三個欄位一起去作判斷，你不能限定他針對某一個或某幾個欄位來判斷。如果遇到這種情況時，我的膝蓋就想不出直接的方法了。

我用一段程式來說明：

create table #tmp 
( t_id int IDENTITY(1,1) NOT NULL,
t_name nvarchar(50),
t_login_date nvarchar(8))

insert into #tmp (t_name,t_login_date) values ('paladin','20091201')
insert into #tmp (t_name,t_login_date) values ('paladin','20091201')
insert into #tmp (t_name,t_login_date) values ('paladin','20091205')
insert into #tmp (t_name,t_login_date) values ('hugo','20091001')
insert into #tmp (t_name,t_login_date) values ('hugo','20091001')
insert into #tmp (t_name,t_login_date) values ('hugo','20091021')

我建立了一個暫存表 #tmp , 有三個欄位 t_id , t_name, t_login_date
同時塞了6筆預設值給他。

今天我希望查詢結果能夠包含這三個欄位的資訊，但如果 t_name, t_login_date 有重複時，只要保留一筆就好。

遇到這情況時，最簡潔的方式，就是使用 group by 來完成。我們可以把 t_name, t_login_date 當成 group by 的選項，這樣挑選後的結果，就不會有 t_name 與 t_login_date 重複現象發生。但為了要能夠讓 t_id 欄位資訊也能夠保留，剛好目前也還欠 group by 一個交待，就是使用 group by 時要包含一個彙總函數 ，所以可以用 max( t_id ) 或 min( t_id ) 來使用，而查詢語法如下：

select max(t_id) t_id,t_name,t_login_date from #tmp
group by t_name,t_login_date

因為彙總函數結果欄位的欄位名稱會被視為[沒有資料行的名稱]，所以我又再透過 alias 別名方式重新指定他的資料行名稱為 t_id。而執行後的結果正是我所需要的方式。

使用 jQuery 的 trigger

撰寫 javascript 時，有時只是很單純的希望能夠在某些條件下，接下來要做的動作跟觸發某個按鈕一樣。其實重覆寫個一模一樣的程式並不是不行，只是違反了自己「懶」的原則。

在 jQuery 的線上文件裡，找到 trigger 這個事件，正巧是描述著可以透過程式去觸發某個控制項的事件。自己也順便練習了一下這個使用方法。

首先，在頁面放了兩個按鈕 btn1， btn2。分別會觸發 Do1() ，Do2()

<input id="btn1" type="button" value="btn1" onclick="Do1()" />
<input id="btn2" type="button" value="btn2" onclick="Do2()" />

<script language="javascript" src="js/jquery-1.3.2.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    function Do1()
    {
        alert("是的!");
    }    
    
    function Do2()
    {
        alert('吃過飯了ㄇ？');
        
        $("#btn1").trigger('click');
    }
    </script>

在 Do1()，很簡單的只是 alert 一句話。而 Do2()裡，除了 alert 「吃過飯了ㄇ？」，還順便去觸發 btn1 原本的 click 事件。所以，當 user 壓下 btn2 時，就會依序跳出兩個訊息：「吃過飯了ㄇ？」，「是的!」

ref：http://docs.jquery.com/Events/trigger

window.open 最大化

近來一直在拜求如何讓 window.open 所跳出的新視窗能夠一開始就最大化，不需讓 user 還要再去點選一次瀏覽視窗的最大化，可惜，一直沒找到真正的解決方案。

有人透過

window.open(url,"","fullscreen=yes");

雖然是把畫面變大了，但它是屬於全螢幕的呈現方式，對於一般瀏覽器操作比較不熟的 user ，可能無法很順利的處理如何解除全螢幕的設定。

最後找到比較接近需求的方式，是透過 JavaScript 去控制新開啟的視窗，把它的寬高放大到與 user 目前的螢幕相同。
他的 code 如下所示：

sc=window.open(url,"","resizable=yes,scrollbars=yes");
sc.resizeTo((screen.availWidth),(screen.availHeight));
sc.moveTo(0,0);

參考：http://www.lslnet.com/linux/f/docs1/i57/big5380574.htm

/dev/null 的功用

在 Linux ，/dev/null 目前想到的功用有兩個：

1. 清除 Log
    ex:   /home/paladin/List.log   (是某一個應用程式的 Log 檔)

            cat   /dev/null  >>  /home/paladin/List.log

             這行指令就可以簡單的清除掉目前的 Log 紀錄
          


2.開一個空白的檔案

           cat   /dev/null   >>   /home/paladin/newFile.txt

           這行指令可以新增一個空白檔案 (檔案名稱: newFile.txt )