SharePoint 2013无代码实现列表视图的时间段动态筛选

本文介绍两种为列表视图设置时间段筛选器的方法。其中，第一个方法用于SharePoint Server，第二个方法同时还能用于SharePoint Foundation。

方法一：日期筛选器Web部件

先看一下接下来要用的列表，是一个任务列表：

为了实验方便，咱们先建个页面，用来放置目标列表视图和筛选器。

一、打开SPD，选择左侧的“网站页面”，点击功能区里的“新建”->"Web部件页"。

若是是已有页面，则右键高级模式编辑。

二、找到页面主要区域的WebPart Zone,在其中的ZoneTemplate里插入光标。

选择插入，数据视图。插入目标列表。
三、在列表视图工具中，选择“筛选、排序和分组”中的“参数”。

新建两个参数。参数源设为默认的无就能够。

四、而后，一样使用功能区上的按钮，为列表视图设置筛选条件。使列表视图显示大于等于[StartDate]而且小于等于[EndDate]的项。

五、在该视图webpart上方，插入两个“日期筛选器”WebPart。

六、保存该页面。而后点击功能区的“在浏览器中预览”按钮。

七、进入页面编辑模式。选择第一个日期筛选器，在WebPart属性中设置筛选器名称，默认值。

再设置第二个。

八、接下来进行关联。选择第一个日期筛选器，选择WebPart链接，筛选值发送位置。发送到下面的列表视图。这里就是TaskDemo了。

九、在弹出窗口中选择链接类型为参数获取位置。点击“配置”按钮。

十、选择接收方对应的参数名称，这里为StartDate

十一、完成后的设计视图是这个样子。

十二、用一样的方式设置第二个日期筛选器的链接。连到EndDate参数。

1三、完成后退出页面的设计模式。

测试结果：

 

方法二：控件传参

这种方法是用咱们本身摆放的控件来进行日期的输入。相对来讲自由度会高一些，固然难度也稍有增长。

一、首先也是页面和列表视图的准备工做。请参考方法一的第一步和第二步。

二、在视图WebPart所在的WebPartZone外面，插入光标：

插入以下table和控件：

<table class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0">
 <tbody>   
     
            <tr>
  <td width="113" class="ms-formlabel" nowrap="true" valign="top"><h3 class="ms-standardheader">
  <nobr>开始时间:<span title="这是必填字段。" class="ms-accentText"> *</span></nobr>
 </h3></td>
  <td width="350" class="ms-formbody" valign="top">
   <span dir="none"><asp:Textbox ID="scStartTextbox" runat="server" CssClass="ms-hide"></asp:Textbox>
   <SharePoint:DateTimeControl runat="server" DateOnly="true" ID="scStart" DatePickerFrameUrl="../_layouts/iframe.aspx"  />
   <br/></span>   
  </td>
 </tr>
    <tr>
  <td width="113" class="ms-formlabel" nowrap="true" valign="top"><h3 class="ms-standardheader">
  <nobr>结束时间:<span title="这是必填字段。" class="ms-accentText"> *</span></nobr>
 </h3></td>
  <td width="350" class="ms-formbody" valign="top">
   <span dir="none"><asp:Textbox ID="scEndTextbox" runat="server" CssClass="ms-hide"></asp:Textbox>
   <SharePoint:DateTimeControl runat="server" DateOnly="true" ID="scEnd"  DatePickerFrameUrl="../_layouts/iframe.aspx" />
  <br/></span>   
  </td>
 </tr>
 <tr><td colspan="2">
  <asp:Button runat="server" ID="btnSearch" Text="查询" OnClientClick="javascript:SetStartEndDate()"/>

 </td></tr>
 </tbody>
 </table>

重点是用SharePoint DateTimeControl来方便日期输入，和用隐藏的ASP.NET TextBox来存放控件值。ASP.NET Button用于页面提交。同时，经过js把DateTimeControl的日期值填写到相应的TextBox里。之因此这么绕一下，是由于下面的视图WebPart接参时，没法直接从DateTimeControl这类的控件直接Get到Value。而TextBox能够。展现效果以下：

固然，本例用的是控件值类型的参数。咱们也能够用查询字符串类型的参数，把值拼到URL后面（参见霖雨的这篇博文）。
三、在PlaceHolderAdditionalPageHead部分，先插入jquery.js的引用，再插入咱们的js代码：

代码以下：

<script src="../_layouts/15/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
String.prototype.replaceAll=function(str1,str2){
var regS=new RegExp(str1,"gi");
return this.replace(regS,str2);
}
function SetStartEndDate(name)
{
 var startstr="scStart";
 var endstr="scEnd";
 var selectedStartDate=$("input[id][name$='"+startstr+"Date']").val();
 selectedStartDate=selectedStartDate.replaceAll("/","-");
 $("input[id][name$='"+startstr+"Textbox']").val(selectedStartDate);
 
 var selectedEndDate=$("input[id][name$='"+endstr+"Date']").val();
 selectedEndDate=selectedEndDate.replaceAll("/","-");
 $("input[id][name$='"+endstr+"Textbox']").val(selectedEndDate);
}
</script>

四、一样，也要给视图WebPart设置参数和筛选。这里参数的来源选择控件，控件ID为上面的TextBox的ID。筛选条件相似。步骤参考方法一的第3，4步。这里就直接上图了。

 五、保存该页面。而后点击功能区的“在浏览器中预览”按钮。输入一个时间段，点击查询来验证结果。筛选的结果也和第一种相似，就再也不赘述了。

 --------2016/4/13更新---------

kevin_k_wang反馈说第二种方法作到最后没有结果。因此我从新测试了一下。发现目前版本确实有问题。

若是你也有相似问题，能够尝试以下的解决办法：

一、在SPD里点击视图部分的代码，在顶部的功能区里能够看到列表视图工具：

二、从设计选项卡里找到自定义XSLT，点击自定义整个视图。

三、SPD会自动生成不少代码。保存。再测试一下是否有结果了。

到这里，不少人可能已经成功看到结果了。

（缘由未知，猜想与SharePoint补丁版本有关）

若是仍是不行，继续下面的步骤：

一、在SPD页面上，随便找一个html的结束标记（固然，其余结束标记也行，好比CAML标记，XML标记，只要不产生歧义报错就行）。我找了</table>标记，在后面加一个空格。

二、保存页面。再测试一下是否有结果了。

所加的空格没什么实际用处。解决问题后能够再删掉。保存。一样能够看到结果。

（缘由未知，猜想为SPD的bug。）

 

另：

附上一份代码，用来替换方法二中的第2，3步骤里的复杂table和js。若是只是测试控件过滤，用这个简单版本就够了。

<asp:Textbox ID="scStartTextbox" runat="server" Text="2015-01-01" ></asp:Textbox>
<asp:Textbox ID="scEndTextbox" runat="server" Text="2016-04-13" ></asp:Textbox>
<asp:Button runat="server" ID="btnSearch" Text="查询"/>

 

参考资料

SharePoint: List filtering by date range