Data View for SharePoint the designer series

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