CODE-用jQuery調整Sharepoint頁面

這段程式碼背後有段心酸有趣的故事...

今天同事轉達User的需求給我,程式都寫完了,才驚覺一個多月前我早就寫過同樣的程式邏輯,而且還是同一位同事提的需求。換句話說,提需求的人跟做需求的人居然他X的很有默契地一起把需求忘個精光,讓我不禁思索起: 每日忙著處理的這些需求,對我的人生,究竟存在什麼意義? (謎之聲: 意義是... 黑暗: 你給我滾!!)

回到正題(跳一下),回頭檢討,如果上次我有發文記錄一下心得,應該就不會發生此等慘事... 這,就是本文的由來。

需求是這樣的: 在Sharepoint的頁面上有一個清單WebPart(如下圖),分別列出類別、部落客名稱及連結,內建的設計,點名稱時會開啟項目檢視,我們希望能將它調整成"點名稱直接在新視窗開啟連結"。雖然透過神通廣大的ListView WebPart修改也能客製出任何我們想要的樣子,但每回編修XSL常讓我爆血管,所以我還是習慣在前端加入客製JS,請jQuery跟我一起衝鋒陷陣。

做法是在頁面上多放入一個"內容編輯器組件",其中放入以下Javascript程式碼:

<!--若MasterPage未載入jQuery,記得要補上-->
<script type="text/javascript" src="/somepath/jQuery-1.4.2.js">
</script>
<script type="text/javascript">
$(function() {
 
    var titleToFind = "部落客名人榜";
    //由WebPart標題找出WebPartID
    var webPartId = 
        $("tr.ms-WPHeader td[title=" + titleToFind + "]").attr("id")
        .replace("Title", "");
    //在WebPart DIV中取得Table
    var $tbl = 
        $("div#" + webPartId + " table.ms-listviewtable");
    //標題列tr.ms-viewheadertr
    $tbl.find("> tbody > tr").each(function() {
        var $tr = $(this);
        var $td = $tr.children(":last");
        var link = $td.children("a").attr("href");
        $td.remove();
        $tr.find(">td:last a").attr({
            //因原有onclick攔截以MOSS自己的JS開連結
            //將onclick移除及設為開在新視窗
            "href":link, "onclick":"", "target":"_blank" 
        });
    });
 
});
</script>

透過jQuery高超的元素操控能力,只需要短短幾行程式,很快就能透過標題找出組件,挖出組件中的Table,將最後一欄的連結href搬到前一欄的<a>上。由於Sharepoint寫了自己的onclick事件用客製方法開啟連結,無法控制連結開在新視窗,因此我們還得卸除onclick事件,加上target="_blank",才算大功告成。

我發誓,下回一定不會忘記我寫過用jQuery調整Sharepoint頁面的程式。

歡迎推文分享:
Published 18 March 2010 05:12 PM 由 Jeffrey
Filed under: ,
Views: 10,766



意見

# joeshow said on 21 March, 2010 09:38 PM

再次学习。。

# John said on 04 May, 2010 02:52 AM

如果List中的資料使用Group by及By default 是Collapsed .

就不能加上target="_blank",

# John said on 04 May, 2010 02:54 AM

如果使用了Groupby 和 Collapsed,

就不能加上target="_blank"

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<March 2010>
SunMonTueWedThuFriSat
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication