Easyui DataGrid custom Button column, which is the Action column for the last Face

When doing the project because of the requirements, to add a column of action columns at the end of the table, Easyui doesn't seem to provide this functionality, but it doesn't matter, we can customize to implement

Version: jquery Easyui 1.3.2

Here my implementation is in the form of HTML, JS mode is temporarily useless to

The first is the HTML section

<table id= "DG" title= "Student Information" class= "Easyui-datagrid" url= "${ctx}liststudent.do" toolbar= "#toolbar" pagination= "Tru E "rownumbers=" false "fitcolumns=" true "singleselect=" true "> <thead> <tr> <th data-options=" Field: ' Stuno ', sortable:true,width:20 ' > </th> <th data-options= ' field: ' Name ', width:20 ' > Name </th > <th data-options= "field: ' Gender ', width:20,formatter:formatgender" > Sex </th> <th data-options= "fi Eld: ' Nationality ', width:20 > Clan </th> <th data-options= ' field: ' Address ', width:50,formatter:formataddr ' > Home Address </th> <th data-options= "field: ' Mobile ', width:20" > Phone number </th> <th data-options= "field: ' Bi Rthday ', width:20 "> Date of birth </th> <th data-options=" field: ' Registdate ', sortable:true,width:20 "> Admission Time < /th> <th data-options= "field: ' _operate ', width:80,align: ' Center ', formatter:formatoper ' > Operations </th> < /tr> </thead> </table>

<th data-options= "field: ' _operate ', width:80,align: ' Center ', formatter:formatoper ' > Operations </th>
Note that the red part, is our Operation column, field name casually take, I here is _operate, the key is Formatoper function

function Formatoper (val,row,index) {
	return ' <a href= ' # ' onclick= ' Edituser (' +index+ ') ' > Modify </a> ';
}

There are three parameters in the Formatoper () function, Val refers to the current cell value, row, current Row object, index of the current row of index. We need this index here.

I put this index into a function called Edituser, why to pass this index, we are looking at this edituser function

function Edituser (index) {
	$ (' #dg '). DataGrid (' SelectRow ', index);//Key here
	var row = $ (' #dg '). DataGrid (' GetSelected ');
	if (row) {
		$ (' #dlg '). Dialog (' Open '). dialog (' Settitle ', ' modify student information ');
		$ (' #fm '). Form (' Load ', row);
		url = ' ${ctx}updatestudent.do?id= ' +row.id;
	}
}

Flip through the Easyui document to find a way for the DataGrid to be called SelectRow

SelectRow

Index

Select a row, the row index start with 0.

Its function is to manually select the table row, the parameter is the index value, starting from 0

In this way, we can get the data corresponding to the mouse click line in real time.

$ (' #dg '). DataGrid (' SelectRow ', index);

var row = $ (' #dg '). DataGrid (' getselected ');

These two words are to get the selected row

Concrete effect as shown in figure