Method of adding operation button for each line of data in DataGrid of easyUI

When I was working on the project today, I wanted to add an operation button after each column of data in the DataGrid of easyUI. At the beginning, I wanted to splice strings in the background and return them with JSON. But after testing, I found that this method didn’t work. I searched the Internet and sorted them out as follows:

In fact, it’s very easy to add a row of custom columns. When JS declares DataGrid, add the following code

<span style="font-size:18px;">{field:'operate',title:'act',align:'center',width:$(this).width()*0.1,
	formatter:function(value, row, index){
		var str = '<a href="#" name="opera" class="easyui-linkbutton" ></a>';
		return str;
}}</span>

This line of code is defined under the columns property, and it must be added

<span style="font-size:18px;">onLoadSuccess:function(data){  
        $("a[name='opera']").linkbutton({text:'buy',plain:true,iconCls:'icon-add'});  
},</span>

If you don’t add this, there will be no button style in that operation column. It’s just a hyperlink. You can use LinkButton or other buttons according to your needs

 

 


Read More: