关于在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>

3.4 总结：方案能够进行重复使用

各位可能已经看出来，个人代码里面没有涉及任何的特别列表和库的名称，或是其它什么特定的东西。

若是各位客官已经完成上面 3.3步骤，那么你就能够，经过不断地给其它列表（库）重复本文章中的第2个步骤来不断嘀给任何一个列表添加批量审核的功能。

对于喜欢爱学习的人，上面的代码，有几个关键的技术须要掌握。

4.相关JS开发知识

4.1 如何使用JS来更新列表的审批状态

如何使用JS来操做网站数据，咱们彻底看这么一篇文章就够了：

Complete basic operations using JavaScript library code in SharePoint 2013

https://msdn.microsoft.com/en-us/library/office/jj163201.aspx

在示例中，如下的代码能够更新一个列表的，标题和内容为：My New Item!和Hello World!

function createListItem(siteUrl) {

var clientContext = new SP.ClientContext(siteUrl);

var oList = clientContext.get_web().get_lists().getByTitle('Announcements');

var itemCreateInfo = new SP.ListItemCreationInformation();

this.oListItem = oList.addItem(itemCreateInfo);

oListItem.set_item('Title', 'My New Item!');

oListItem.set_item('Body', 'Hello World!');

oListItem.update();

clientContext.load(oListItem);

clientContext.executeQueryAsync(

Function.createDelegate(this, this.onQuerySucceeded),

Function.createDelegate(this, this.onQueryFailed)

);

}

function onQuerySucceeded() {

alert('Item created: ' + oListItem.get_id());

}

function onQueryFailed(sender, args) {

alert('Request failed. ' + args.get_message() +

'\n' + args.get_stackTrace());

}

咱们只须要把红色的部分换成 _ModerationStatus ,这个值设置成：

0 - 审批

1 - 拒绝

2 - 未定

4.2 如何在页面上得到已选项的ID、列表标题等信息

那么剩下的问题就是如何在界面上得到已经check的那项的ID呢？

通过对代码的研究发现，其实每个项就是一个<tr></tr>，即HTML元素中Table中的一行：

并且列表老是展现在，这个类名的Table下的：ms-listviewtable

Table 有一个属性叫summary就是列表的标题，

Tr中有一个属性叫 iid 和 id，就是列表项的ID，全部问题以下图，全然解决：

5总结：

本文提供了一个综合的批量审核的解决方案，并展现了这个批量审核解决方案开发的全部的技术，抛砖引玉地使用了JS来完成大部分操做。

固然最终的解决方案做者提供的是兼容SharePoint 2010的一键式解决方案，有审核也有拒绝。

若是你们须要这个解决方案，请给本文留言，或是留下你的电子邮件，做者会把解决方案发到您的邮箱当中。

若是留言比较多，我会考虑把这个解决方案在下周的博文中公布。