在Java腳本中嵌入Sharepoint Web部件

Question

我已經部署了一個共享點網頁，並添加了一個自定義Web部件，該部件以客戶希望的方式可視化數據。 Webpart的問題在於，當用戶需要時，我們無法縮放，修改或隱藏它。 我們考慮將Sharepoint Webpart嵌入Java包裝器中。 通常，在標准HTML頁面上這很容易。 問題是如何將Webpart嵌入到Sharepoint的Java包裝器中？

我想添加2個html按鈕，一個顯示webpart，一個隱藏webpart。 挑戰在於找到可傳遞給任一按鈕以執行hideMe或showMe Java腳本的Webpart ID。

Webpart標頭：

<WebPartPages:WebPartZone runat="server" Title="loc:FullPage" ID="FullPage" FrameType="TitleBarOnly"><ZoneTemplate>
<WpNs0:Trend runat="server" __MarkupType="xmlmarkup" WebPart="true" __WebPartId="{AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A}" >

代碼（到目前為止）

<button onclick="HideWebpart('AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A')">Hide Me</button>
<button onclick="ShowWebpart('AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A')">Show Me</button>

<script>
function HideWebpart(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A)
{
    var wp=document.getElementById(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A);
    wp.className = "hidden";
}

function ShowWebpart(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A)
{
    var wp=document.getElementById(AFA8DE0A-E7B4-4580-BFAB-038D96E72F0A);
    wp.className = "";
}
</script>

Answer 1

好的，您可以為WebPart提供一個id =“ mywebpart”，然后只需使用JavaScript函數將其隱藏即可。

例：

<style type="text/css>
    .hidden { display:none; }
</style>
<script>
function HideWebpart(id_of_webpart)
{
    var wp=document.getElementById(id_of_webpart);
    wp.className = "hidden";
}

function ShowWebpart(id_of_webpart)
{
    var wp=document.getElementById(id_of_webpart);
    wp.className = "";
}
</script>
<WebPartPages:WebPartZone>
..The SVG WebPart... <--Add WebPart with id here
</WebPartPages:WebpartZone>

<button onclick="HideWebpart('PASS WEB PART ID IN HERE')"/>

---

我相信問題是，當getElementById僅查找“ id =”屬性時，您想使用“ __WebPartId =”屬性。 因此，請通過自定義屬性查找元素，您將需要使用以下內容而不是getElementById：

function getElementByAttribute(attr, value, root) {
    root = root || document.body;
    if(root.hasAttribute(attr) && root.getAttribute(attr) == value) {
        return root;
    }
    var children = root.children, 
        element;
    for(var i = children.length; i--; ) {
        element = getElementByAttribute(attr, value, children[i]);
        if(element) {
            return element;
        }
    }

用法：

getElementByAttribute("__WebPartId",'PASS WEB PART ID IN HERE');

注意：與getElementById相比，它會慢很多，因為您無法使用任何索引

或者，如果您可以使用jQuery庫，則可以只使用$（'[__ WebPartId =“ PASS WEB PART ID IN HERE”]'）