Jqgrid Table Action Column click the "Action" button to eject the button layer implementation code _jquery

When using Jqgrid, the last column in the table is an action column, one action button for each row in the Action column, and the action button is like a Drop-down menu, as in the following figure:

When you click the "Action" column in the table, you need to pop up a div layer that contains a bunch of buttons to manipulate the table row, as follows:

The resolution steps are as follows:

1. First, add attributes to the columns in Colmodel edittype: ' Select ' and method Formatter:groupGrid.formatOptions, as shown in the following figure:

Easy to copy, code as follows:

{label: ' Operations ', Name: ' Operations ', Index: ' Operations ', width:80, sortable:false,align: ' Center ', cellattr:addcellattr, 
editable:true,edittype: ' select ', Formatter:groupGrid.formatOptions 
}

The Formatoptions method, as shown in the following illustration, is spliced with HTML code:

Description: One of the single quotes I use "\" for escape. The parameter value in the request URL is obtained from the rowobject.

2, second, the above code added good after table processing action button, but only the action button, click the "Action" button when the pop-up layer is covered by the row of the table, that is, in the lower level of the table pop-up, so do not see the desired pop-up layer, this is Jqgrid left the pit, After a few debates and struggles, I found it necessary to set CSS styles.

The solution is as follows:

A, add the attribute cellattr, whose value is set to "addcellattr", that is:

Cellattr:addcellattr

B, write the Addcellattr method event, the following figure:

Easy to copy, code as follows:

function Addcellattr (RowId, Val, rawobject, CM, rdata) {return 
"style= ' overflow:visible; '"; 
}

The effect of adding a good implementation is as follows:

The above is a small set to introduce the Jqgrid Table action column Click the "Operation" button pop-up button layer of the implementation code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!