Data View of SharePoint 2013 designer Series

In Sharepoint, data presentation is a very important part. In many cases, we use the webpart format. However, in some cases, we do not need to use development. We only need to use designer, the following describes how to use the data view.

1. Create a test list with the following fields in the test list, for example:

2. Insert some test data (purely fabricated for entertainment only), such:

3. Create a test page, such:

4. Insert webpartzone in the placeholdermain node, insert the data view, and select our test list news, such:

5. Switch to the design tab and select the fourth view style, for example:

6. Check the demo page, for example:

7. design the page, and click other page options in ribbon, such:

8. I have six projects on one page, for example:

9. On ribbon, click custom XSLT and select Custom entire view, as shown in the following figure:

10. Search for "MS-stylebox" and find the following location. Modify the XSLT in it. Be sure not to correct the error. Otherwise, an error is returned for the entire view. Then add the relevant style, for example;

11. Because the content may be too long, I used JQ to process the length here. The script is attached:

<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. After saving the page, check the page at the front end. Is it nice to use the data view to make the page ?!

13. If you are not satisfied with the page, you can find the following location and search for "MS-Paging", for example:

14. If you want to hide the column name of the toolbar above, you can find the <TH tag and hide it, for example:

15. Let's take a look at the final page effect. Is it great ?! Haha.

Summary

The data view, as its name implies, is the view used to display data. It contains multiple display forms, such as filtering and grouping. If you are interested, you can try more. Here is only a small example, hope to help people in need.