Data View for SharePoint the designer series

Source: Internet
Author: User
Tags xslt

In SharePoint usage. Data presentation is a very important part. Very often we take the form of WebPart. But there are situations where we don't have to use development, just use the designer, and let me briefly take a view of the use of the data below.

1, create a test list, the following is the field of the test list, for example:

2, insert some test data (purely fabricated, for entertainment only), for example:

3. Create a test page, for example:

4, in the PlaceHolderMain node, insert WebPartZone, and then insert the Data View, select our test list news, for example:

5. Switch to the Design tab. Select a fourth view style, for example:

6. Take a look at the demo page, for example:

7. Design the pagination and click on the other paging options in the Ribbon, for example:

8, I am here 6 items divided into one page, for example:

9, then on the Ribbon. Click on yourself to define the XSLT and choose to define the entire view yourself, for example:

10, search "Ms-stylebox" to find such as the following location, change the inside of the XSLT, pay attention not to change the wrong, or the whole view ungrateful wrong. Then add the relevant style, for example with;

11, because the content part may be too long, I use JQ here to deal with the length, the script attached:

<script type="Text/javascript"Src="/_layouts/15/jquery/jquery-1.7.1.js"></script><script type="Text/javascript">function Contentlimit () {varId ="customcontent"; varNum = -; varTD = $ ('td[class='+ Id +']'); //alert (td.length);     for(vari =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, -); function Titlelimit () {varId ="Customtitle"; varNum = the; varTD = $ ('td[class='+ Id +']'); //alert (td.length);     for(vari =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, -);</script>

12, after the page is saved. The front desk view, we use the Data view to make the page, is not bad?

13, if the page is not comfortable, can find such as the following location, search "ms-paging" can be, for example:

14, false idea hides the column name of the above toolbar, can find the <th tag, and then hide it, for example:

15, the final page of the effect, we can look at, is not very good? Oh.

Summary

A data view, as the name implies, is the view that shows the data used. including screening, grouping and other forms of presentation, we are interested to try more. Here is just a sample of the introduction, I hope to have the need to help people.

Data View for SharePoint the designer series

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.