Data View of SharePoint 2013 designer Series

Source: Internet
Author: User
Tags xslt

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.