Add operation links to each row of the Jquery easyui datagrid, jqueryeasyui

Add operation links to each row of the Jquery easyui datagrid, jqueryeasyui

BackgroundWe all know that Jquery's Easy-UI datagrid can be added and customized. In this way, we can select a row and select the corresponding button of the Toolbar to operate the data in this row. However, in actual projects, we may need to add some operation links behind each line, such as "modify", "delete", and "View. For example:

　　　　　　　　　　

I'm afraid of everything! The Datagrid of Easy-UI does not directly add the link attribute. View the help document of Easy-UI, see a formater: formater function, you can format a line, and then jump the page to a new page through URL + ID.

Solution
1. format the columns to be added with hyperlinks (formater: formater) as follows:
<Th data-options = "field: 'title', width: 150, align: 'center', formatter: rowformater"> message name </th>
2. According to the documentation description, formatter's formatter has three parameters:
Value: the field value, that is, field: 'id '.
RowData: the row record data. This is the Json data of this row, including the content you have selected to display on the Datagrid, And the content that is not displayed.
RowIndex: the row index. the Index of the current row.
This function can be used to execute the corresponding javaScript function.

3. Script Functions & Front-end code

<Script type = "text/javascript"> // View Details function rowformater (value, row, index) {return "<a href = 'newsdetial. aspx? NoticeID = "+ row. ID +" 'target = '_ Block'> "+ row. Title +" </a> ";}</script>

<Table id = "dg" title = "published message" class = "easyui-datagrid" style = "width: 1090px; height: pixel PX; padding-left: 200px; "data-options =" rownumbers: true, url: 'easyuitotalnews. ashx/ProcessRequest ', pageSize: 5, pageList: [5, 10, 15, 20], method: 'get', toolbar:' # tb ', "toolbar =" # toolbar "pagination =" true "rownumbers =" true "fitcolumns =" true "striped =" true "singleselect =" true "> <thead> <tr> <th data-options = "field: 'ck ', checkbox: true "> </th> <th data-options =" field: 'id', width: 150, align: 'center' "> message No. </th> <th data-options =" field: 'title', width: 150, align: 'center', formatter: rowformater "> message name </th> <th data-options =" field: 'hdepart', width: 150, align: 'center' "> sending unit </th> <th data-options =" field: 'receivedepart', width: 150, align: 'center' "> receiving unit </th> <th data-options =" field: 'hhtime', width: 150, align: 'center' "> sending time </th> <th data-options =" field: 'noticestate', width: 80, align: 'center' "> whether to read </th> </tr> </thead> </table>

4. Effect

Summary

Since Easy-UI itself is the library encapsulated by Jquery, its essence is javascript. although there is no link attribute, A javascript function statement can be constructed in the format of its defined attribute or method.

Jquery easyui datagrid loaded successfully. Select a row

Hello !!

This is not the case for reload in the jquery easyui datagrid ~
1. first, you need to set the onLoadSuccess $ ('# dg') of the datagrid '). datagrid ({onLoadSuccess: function (data) {$ ('# dg '). datagrid ('selectrow', 3) ;}}); 2. onLoadSuccess is set in data-options mode. If it is set in js script, ensure that this event function is bound before loadData, like the following $ ('# dg '). datagrid ({"onLoadSuccess": function (data) {$ (this ). datagrid ('selectrow', 3 );}}). datagrid ("loadData", XXXXX); otherwise, the code in onLoadSuccess may not be executed after the data is loaded; 3. reload method: reload the data on the current page $ ('# dg '). datagrid ("reload ");
As for loading, it indicates that your data has not been loaded successfully ··

Hope to help you !!


How does jquery easyui datagrid obtain the row id when editing a row?

Hello!

Obtain the selected row object:

Var row = $ ('# dg'). datagrid ('getselected ');
If (row ){
Alert ("ID:" + row. itemid );
}

-------------------------------------------------------