Add Action link to jquery easyui datagrid per row

backgroundwe 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

    <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: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 ', wid Th:150,align: ' Center ' "> Message number </th> <th data-options=" field: ' Title ', width:150,align: ' Center ', f Ormatter:rowformater "> Message name </th> <th data-options=" field: ' Publishdepart ', width:150,align: ' C Enter ' "> Send unit </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 '" > whether 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.