给Jquery easyui 的datagrid 每行添加操作链接

时间：2023-03-09 16:03:30
给Jquery easyui 的datagrid 每行添加操作链接

背景

　　我们都知道Jquery的Easy-UI的datagrid能够加入而且自己定义Toolbar，这样我们选择一行然后选择toolbar的对应button就能够对这行的数据进行操作。但实际项目里我们可能须要在每行后面加一些操作链接，最常见的就是比方“改动”、“删除”、“查看”之类。例如以下图：

　　　　　　　　　　给Jquery easyui 的datagrid 每行添加操作链接

　　凡事都怕可是！Easy-UI的Datagrid没有直接加入link的属性。查看Easy-UI的帮助文档，看到一个formater：格式化函数。能够对某一行进行格式化，然后通过URL+ID的方式把页面跳转到新页面．

解决方法

　　1、在须要加入超链接的列进行格式化处理（formater：格式化函数），例如以下：

 　　　<th data-options="field:'Title',width:150,align:'center',formatter: rowformater">消息名称</th>

　　2、依据documentation的描写叙述。formatter的格式化函数有3个parameters。各自是：

　　　　value: the field value。也就是field:'id'。

　　　　rowData: the row record data。就是这一行的Json数据，包含你已经选择在Datagrid上显示的内容，和没显示的内容。

　　　　rowIndex: the row index.当前行的Index。

　通过这个函数来运行对应的javaScript函数就能够达到目的．

　　3、脚本函数&前台代码

    <script type="text/javascript">

        //查看详情

        function rowformater(value, row, index) {

            return "<a href='NewsDetial.aspx?

NoticeID=" + row.ID + "' target='_block'>" + row.Title + "</a>";

        }

    </script>

<table id="dg" title="已公布消息" 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'">消息编号</th>

                    <th data-options="field:'Title',width:150,align:'center',formatter: rowformater">消息名称</th>

                    <th data-options="field:'PublishDepart',width:150,align:'center'">发送单位</th>

                    <th data-options="field:'ReceiveDepart',width:150,align:'center'">接收单位</th>

                    <th data-options="field:'PublishTime',width:150,align:'center'">发送时间</th>

                    <th data-options="field:'NoticeState',width:80,align:'center'">是否读取</th>

                </tr>

            </thead>

        </table>

4、效果

给Jquery easyui 的datagrid 每行添加操作链接

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmdsZWlsZWk0ODY5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-family:KaiTi_GB2312; font-size:18px">

小结

　　因为Easy-UI本身就是Jquery封装的库，所以其本质还是javascript．尽管本身没有link属性。可是通过其定义的属性或是方法，依照其格式构造一个javascript函数语句就可以。

相关文章