We all know that the easy-ui DataGrid of jquery can add and customize the toolbar so that we can manipulate the data in this row by selecting a row and selecting the corresponding button for toolbar. But in the actual project we may need to add some action links behind each line, most commonly such as "modify", "delete", "view" and so on. Such as:
Everything is afraid, but! The easy-ui DataGrid does not directly add the link property. Looking at Easy-ui's help documentation, you see a formater: Formatting function that formats a row and then jumps the page to a new page by Url+id Way.
Workaround
1, in the need to add hyperlinks to the column for format processing (formater: Format function), as follows:
<th data-options= "field: ' Title ', width:150,align: ' Center ', formatter:rowformater" > Message name </th>
2, according to documentation's description, formatter's Format function has 3 parameters, respectively:
value:the field value, which is field: ' ID '.
rowdata:the row record data. Is the JSON data for this line, including what you have chosen to display on the DataGrid, and what is not displayed.
rowindex:the Row index. Index of the current row.
This function is used to execute the corresponding JavaScript function to achieve the purpose.
3. Script function & foreground code
<table id= "DG" title= "published message" class= "Easyui-datagrid" style= "width: 1090px; height: 430px; 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 number </th> <th data-options= "field: ' Title ', width:150,align: ' Center ', Formatter: rowformater "> Message name </th> <th data-options= "field: ' PublishDepart ', Width:150,align: ' Center ' > Sending units </th> <th data-options= "field: ' ReceiveDepart ', width : 150,align: ' Center ' > Receiving Unit </th> <th data-options= "field: ' PublishTime ', width:150, Align: ' center ' > Send time </th> <th data-options= "field: ' Noticestate ', width:80,align: ' Center '" > Read </th> </tr> </thead> </table>
4. Effect
Summary
Since Easy-ui itself is a library of jquery encapsulation, it's essentially JavaScript. Although there is no link property in itself, it is possible to construct a JavaScript function statement in its format by its defined properties or methods.
Add Action link to jquery easyui datagrid per row