SharePoint 2013 Designer系列之數據視圖

　　在SharePoint使用中，數據展示是一塊很重要的部分，很多時候我們會采用webpart的形式，但是有一些情況，我們不必使用開發，僅需使用Designer即可，下面讓我簡單介紹下數據視圖的使用。

　　1、創建一個測試列表，以下為測試列表的字段，如下圖：

　　2、插入一些測試數據（純屬捏造，僅供娛樂），如下圖：

　　3、創建一個測試頁面，如下圖：

　　4、在PlaceHolderMain節點里，插入webpartzone，然后插入數據視圖，選擇我們的測試列表News，如下圖：

　　5、切換到設計標簽，選擇第四個視圖樣式，如下圖：

　　6、查看一眼demo頁面，如下圖：

　　7、設計一下分頁，點擊ribbon里的其他分頁選項，如下圖：

　　8、我這里6個項目分成一頁，如下圖：

　　9、然后在ribbon上，點擊自定義xslt，選擇自定義整個視圖，如下圖：

　　10、搜索”ms-stylebox”找到如下位置，修改里面的xslt，注意不要改錯了，否則整個視圖報錯；然后加上相關的樣式，如下圖；

　　11、由於內容部分可能過長，我這里使用jq處理了一下長度，腳本附下：

<script type="text/javascript" src="/_layouts/15/Jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
function ContentLimit()
{
    var Id = "customContent";
    var Num = 50;
    var td = $('td[class=' + Id + ']');
    //alert(td.length);
    for(var i = 0;i < td.length;i++)
    {
        if(td[i].innerText.length > Num)
        {
            td[i].innerText = td[i].innerText.substring(0,Num) + "...";
            td[i].style.display = "block";
        }
        else
        {
            td[i].style.display = "block";
        }
    }
}

setInterval(ContentLimit,500);

function TitleLimit()
{
    var Id = "customTitle";
    var Num = 15;
    var td = $('td[class=' + Id + ']');
    //alert(td.length);
    for(var i = 0;i < td.length;i++)
    {
        if(td[i].innerText.length > Num)
        {
            td[i].innerText = td[i].innerText.substring(0,Num) + "...";
            td[i].style.display = "block";
        }
        else
        {
            td[i].style.display = "block";
        }
    }
}

setInterval(TitleLimit,500);

</script>

　　12、保存完頁面后，前台查看，我們使用數據視圖制作的頁面，還算不錯吧？！

　　13、如果對分頁不滿意，可以找到如下位置，搜”ms-paging”即可，如下圖：

　　14、如果想隱藏上面的工具欄的欄名稱，可以找到<th標簽，然后通通隱藏，如下圖：

　　15、最后頁面的效果，大家可以看一看，是不是挺棒的？！呵呵。

總 結

　　數據視圖，顧名思義就是展示數據使用的視圖，包含了篩選、分組等多種展現形式，大家有興趣可以多多嘗試，這里僅舉一小例子介紹一下，希望能對有需要的人以幫助。