2009年12月15日 星期二

透過 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>
張貼者： 李志堅 於 12/15/2009 07:57:00 下午 0 意見
標籤： ,

將 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 這篇更精簡些）
張貼者： 李志堅 於 12/15/2009 11:27:00 上午 0 意見
標籤：

2009年12月11日 星期五

思考即能量



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

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

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

2009年12月2日 星期三

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。而執行後的結果正是我所需要的方式。


張貼者： 李志堅 於 12/02/2009 07:29:00 下午 0 意見
標籤：
訂閱： 文章 (Atom)