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