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?

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?