How do I customize to change the fixed value of a column in all rows in the Web part list in Sharepoint to an image or other HTML code?

Source: Internet
Author: User

In the default view of the list, we often find that the custom rendering mode is insufficient. For many SharePoint options, such as "status ", "not started, delayed ...... and so on.

In particular, when displaying the "approval" column, you can replace the three texts such as "approved" or "not approved" with a tick or XX image, in this way, the system will have a better display effect.

The following figure shows the "agree to apply for ICP filing" column. "No" is displayed, Which is unfriendly!

In, 2nd columns (1st columns are attachments) always show "no", which is very difficult to see.

For this value, we usually use an image instead. If it is "no", we usually display a red light. If it is "yes", we usually display a green light.

To change this style, we must use JavaScript to change this value. What if it is changed?

1. Open SharePoint designer, open the aspx file of this view in SPD, and find the following line

 

 
<Asp: Content contentplaceholderid ="Placeholdermain"Runat ="Server">

2. Insert the followingCode:

In the red part of the code, you need to change it to your parameter. The first parameter is the guid value of your list, and the second parameter is the guid value of your current view.

The 3rd parameters are the columns you want to change. The 4th parameters are the values you want to change and the modified HTML array, in the array, we use commas to separate the original values and the modified alternative html

In this example, we can see that all values in Column 2nd are as follows:

"Yes". Replace it with the address/_ layouts/images/ewr212m.gif. Of course, I have uploaded this image to the server.

"No", replace it with the following image address: '/_ layouts/images/ewr213m.gif'

You can define multiple values as needed, instead of two. Of course, your HTML code cannot contain the comma ",", otherwise the system will fail.

The following code is used:

 

 1 <SCRIPT type = "text/JavaScript"> 2 _ Spbodyonloadfunctionnames. Push ('changetable' );  3   Function  Changetable (){  4 Changestringtohtml (" {E78E86F4-E55C-48DC-B05B-9A2E8FD0309F} ",
" {CB213FC2-9847-403A-9498-BC717D50F97A} ",
2 ,
New Array (" Yes, </img> "," No, </img> " )); 5 } 6 Function Changestringtohtml (listguid, viewguid, fieldindex, replacearray) 7 { 8 VaR Tableid = listguid + "-" + Viewguid; 9 VaR Cellindex = Fieldindex; 10 VaR Rowcount = Document. getelementbyid (tableid). Rows. length; 11 // Alert (rowcount + replacearray [0] + "" + replacearray [1]); 12 For (I = 1; I <rowcount; I ++ ){ 13 If (Document. getelementbyid (tableid). Rows [I]. cells [cellindex]) 14 { 15 For (J = 0; j <replacearray. length; j ++ ) 16 { 17 If (Document. getelementbyid (tableid). Rows [I]. cells [cellindex]. innerhtml. indexof (replacearray [J]. Split (',') [0])> = 0 ) 18 Document. getelementbyid (tableid). Rows [I]. cells [cellindex]. innerhtml = replacearray [J]. Split (',') [1 ];} 19 20 21 } 22 } 23 24 25 } 26 27 </SCRIPT>

Is the effect of the following changes very simple and amazing?

 

 

 

 

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.