關於在SharePoint 2013（2010）中Javascript如何實現批量批准的自定義操做功能？

時間 2019-11-15

標籤關於 sharepoint javascript 如何實現批量批准自定義做功欄目 Java開源简体版

原文原文鏈接

1.概述：

SharePoint 2013(包括SharePoint 2010)提供了很方便的，多選的界面，可是不少操做仍是不能批量進行，好比：批准的功能。若是您要解決方案不關心代碼，那麼請直接聯繫做者。若是您對技術感興趣，那麼下面的組合拳就是告訴你如何在2013的Ribbon的工具欄上實現這個小功能，整個實驗必需要有SPD(SharePoint Designer 2013)，要使用到Javascript的不少知識。做者徹底從實際出發，應對了在這個過程當中可能出現的各類各樣的"情況"，好比這個按鈕在多選時可能失效的問題，記住這是一次實戰，不是無用的DEMO。這個功能，做者已經作了能夠兼容SharePoint 2010的解決方案，解決方案直接能夠做爲Feature或是網站集功能啓用在全部的列表或是文檔庫上，若是有興趣能夠留言有償索取。（QQ26959368）javascript

閒言碎語不要講，聽我講一講如何使用Javascript代碼來實現批量批准的功能。html

咱們要實現的是這麼一個樣子滴，客官請看圖：java

點擊後系統會跳出來一個對話框，以下圖：jquery

完成操做後，系統會再次刷新本頁面，您會看到，都已經變成了批准，此處略去1圖。web

2.使用SPD添加列表自定義操做的按鈕

這一步就是讓SharePoint上面的工具欄，多出一個批量審覈的按鈕，如何幹的呢？瀏覽器

一、打開SharePoint Designer 2013 (若是你沒有安裝這個軟件，能夠百度而且下載，這個軟件是無償使用的微軟組件) ，點擊"打開網站"，輸入您網站集的URL，以下圖，分別點擊"列表和庫"-> "銷售記錄"（能夠在您任何的文檔庫或是列表庫）->在自定義操做這個欄目下點擊"查看功能區"。app

二、設置這個操做的名稱爲：批量審覈，這個操做類型爲：導航至URL，而且寫上這個操做爲：javascript:void(0);實際上這個操做的意思就是：什麼也不執行！（由於具體的操做不經過什麼URL來執行，只想經過JS代碼來執行）函數

其中，還有一個比較重要的屬性就是，圖標，咱們作以下的設置，把它設置成SharePoint自帶一個圖標：工具

方便你們複製：學習

標題： 批量審覈
導航至URL： javascript:void(0);
32x32圖標：/_layouts/15/images/SMT_small.png

這個階段的成果就是造成這個操做菜單，而且點擊這個按鈕沒有反應（嘿嘿就是要造成這樣的問題）以下圖：

PS：對於列表和文檔庫，當咱們使用PSD來添加基於"查看功能區" 的自定義的操做時，所添加的默認區域是不同。

看過本文的這個章節，您能夠不用看其它任何的關於"自定義操做"的全部文章了。

列表：在操做一節。（當默認多選的時候，這個按鈕不會"失效"）。

文檔庫：在管理一節。（當默認多選的時候，這個按鈕必定會"失效"）。

功能區位置的值，如何設定的呢，請打開包涵功能的源代碼，看看li的屬性，下面一張圖也全搞定了：

三、修改母版頁，添JS程序

3.1 如何修改母版頁：添加Jquery庫

繼續打開，SPD，而後進入下面的界面，選擇母版頁-> seattle.master，雙擊打開並編輯：

固然了，若是你的網站已經打開了"發佈"功能，那麼修改的就不是.master文件而是.html文件，可是修改的地方和代碼是同樣同樣滴。

打開了以後，我以爲把Jquery庫和自定義代碼的放在哪裏好呢, 我我的建議能夠放在</body>前面，以下圖：

上一個框，就是咱們要複製進去的部份內容，下一個框是給您定位用的，您能夠在你的母版頁中找獲得，要複製代碼看後面有全面代碼。

3.2 添加按鈕Click事件（解決按鈕變灰不能用的問題）

由於在第2步的SPD自定義的操做中，SPD沒有辦法設置這個操做適用多個項仍是單個項。這會形成：全部在文檔庫中自定義的按鈕，當您選擇多個項時，按鈕會變得"灰"- 便是失效的狀態。

因此咱們要用一個定時器函數，每1秒就把這個按鈕設置成激活的樣子，這樣很"粗暴"地解決這個問題，固然這個問題有更好的解決辦法，您能夠繼續去分析：

當單擊了項目的選擇框後，到底SharePoint內部的JS庫執行了什麼函數，而後去改進這個粗暴地設計，不過做者已經很不耐煩了，對於SharePoint你只能這樣，有時候。

這個代碼就是這樣，加在上一個圖的2個框框之間:

 1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 2 
 3 <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 4 
 5 <script>
 6 
 7 $(document).ready(function (){
 8 
 9  
10 
11 //由於在自定義的操做中，SPD沒有辦法設置這個操做適用多個項仍是單個項，全部在文檔庫，當您選擇多個項時，按鈕會變得"灰"- 便是失效的狀態。
12 
13 //因此咱們要用這個函數，每1秒就把這個按鈕設置成激活的樣子
14 
15 setInterval(function (){
16 
17  
18 
19 //找到這個"自定義操做"的按鈕是一個包括了您剛纔定義的標題的span標記的上級A標記
20 
21 var buttonModeration = $("a:has(span:contains('批量審覈'))");
22 
23  
24 
25 if(buttonModeration.length>0){
26 
27  
28 
29 buttonModeration.removeClass("ms-cui-disabled"); //取消失效的樣式設置
30 
31 buttonModeration.removeAttr("aria-disabled"); //取消失效的標誌
32 
33 buttonModeration.find(">span").attr("onclick","dosboyAllPass(this);");//把這個按鈕的 onclick事件換成咱們本身定義的: dosboyAllPass()函數
34 
35 }
36 
37  
38 
39 },1000);
40 
41  
42 
43 });
44 
45 </script>

以上代碼無需複製，下面有更詳細的代碼。

代碼中間，咱們第33行有一個自定義函數，就是告訴瀏覽器，當用戶點擊這個按鈕時，咱們要執行的函數是：dosboyAllPass()。

若是你要處理的不是文檔庫而是列表庫，那麼多選狀態下按鈕變灰的問題，是不存在的能夠經過以下的方式把按鈕click事件添加上：

在3.1這個步驟裏，咱們不輸入Javascript:void(0); 直接輸入Javascript:dosboyAllPass(); 那麼這一節的代碼徹底是不須要的羅。

3.3 添加批量處理JS程序

到如今，咱們已經完成全部準備的動做，只要完成一個實際的批量審覈的JS函數dosboyAllPass就好了，對於急於進行部署的同窗其實咱們只須要把以下的代碼所有添加進當前的母版頁，就好了：

全部的代碼，都已經加了註釋，若是您想學習就去學習吧，其中涉及了很重的內容，如何斷定一個table是否是SharePoint的列表，如何斷定一行是否是已經被選中。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function (){

    //由於在自定義的操做中，SPD沒有辦法設置這個操做適用多個項仍是單個項，全部在文檔庫，當您選擇多個項時，按鈕會變得「灰」- 便是失效的狀態。
    //因此咱們要用這個函數，每1秒就把這個按鈕設置成激活的樣子
    setInterval(function (){
    
    //找到這個「自定義操做」的按鈕 是一個包括了您剛纔定義的標題的span標記的上級A標記
    var buttonModeration = $("a:has(span:contains('批量審覈'))"); 
    
    if(buttonModeration.length>0){
        
        buttonModeration.removeClass("ms-cui-disabled"); //取消失效的樣式設置
        buttonModeration.removeAttr("aria-disabled"); //取消失效的標誌
        
        buttonModeration.find(">span").attr("onclick","dosboyAllPass(this);");//把這個按鈕的 onclick事件換成咱們本身定義的: dosboyAllPass()函數
        
    
    }
    
    
    },1000);
    
});



// 本函數是讓「未批准」，這個界面已選的新聞批量地經過審覈。
function dosboyAllPass(){
try 
{

    var listviewTable = $(".ms-listviewtable:eq(0)")[0]; //當頁面中有SharePoint的列表時，這個列表必定會使用ms-listviewtable這個類做爲CSS樣式
    if(listviewTable!=undefined &&  $(listviewTable).find("tr div[aria-checked='true']").length>0){
    //當表格中的一行tr有aria-checked='true'這個div時，咱們就認爲這一行已經被選中拉！
    if(confirm("您選擇了" + $(listviewTable).find("tr div[aria-checked='true']").length + "個項，確認同時審覈經過嘛？")){
    
        $(listviewTable).find("tr:has(div[aria-checked='true'])").each(function () {        
                
                var itemid= $(this).attr("id").split(',')[1]; //獲得當前列表項目的id值
                   var ctx = new SP.ClientContext.get_current(); //獲得ClientContext
                var listTitle = $(listviewTable).attr("summary"); //從tr的summary屬性的值能夠得當前列表的：名稱
                var oList = ctx.get_web().get_lists().getByTitle(listTitle);
                    this.oListItem = oList.getItemById(itemid);         
        
                var appStatus = "";
                ctx.load(this.oListItem);

                ctx.executeQueryAsync(Function.createDelegate(this, function () {  
                                           //取得審批狀態
                                                   appStatus = this.oListItem.get_item('_ModerationStatus');     //審批這個字段在列表的內部名稱爲：_ModerationStatus                                        
                                                    this.oListItem.set_item('_ModerationStatus', 0); //設置審批狀態，爲0-審批 1-拒絕 2-未定
                                                       this.oListItem.update();            
                                             ctx.executeQueryAsync(function(){
                                                           setTimeout(function (){window.location.href=window.location.href;},1000); //刷新當前列表                                                    
                                                    },function (){                                                    
                                                        setTimeout(function (){window.location.href=window.location.href;},1000); //刷新當前列表                                                    
                                                    });                                                    
                                                    
                                                    
                                }),function(e){
                                  alert('Error:' + e.message);
                                      setTimeout(function (){window.location.href=window.location.href;},1000); //刷新當前列表                                                    
                                }); 
        
        

    
                    

                });


    
    }

}


}



catch(eee){
     alert('Error' + eee.message);
}

}


</script>