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

背景

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

　　　　　　　　　　

　　凡事都怕但是！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/<span id="9_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="9_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=27864f946f880879&k=javascript&k0=javascript&kdi0=0&luki=8&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=7908886f944f8627&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D286226%2Ehtml&urlid=0" target="_blank" mpid="9" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">javascript</span></a></span>">        //查看详情        function rowformater(value, row, index) {            return "<a href='NewsDetial.aspx?NoticeID=" + row.ID + "' <span id="10_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="10_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=27864f946f880879&k=target&k0=target&kdi0=0&luki=6&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=7908886f944f8627&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D286226%2Ehtml&urlid=0" target="_blank" mpid="10" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">target</span></a></span>='_<span id="11_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="11_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=27864f946f880879&k=block&k0=block&kdi0=0&luki=5&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=7908886f944f8627&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D286226%2Ehtml&urlid=0" target="_blank" mpid="11" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">block</span></a></span>'>" + row.Title + "</a>";        }    </script>

<table id="dg" title="已发布消息" class="easyui-<span id="7_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="7_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=27864f946f880879&k=data&k0=data&kdi0=0&luki=1&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=7908886f944f8627&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D286226%2Ehtml&urlid=0" target="_blank" mpid="7" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">data</span></a></span>grid" <span id="8_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="8_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=27864f946f880879&k=style&k0=style&kdi0=0&luki=9&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=7908886f944f8627&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D286226%2Ehtml&urlid=0" target="_blank" mpid="8" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">style</span></a></span>="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、效果

      

小结

　　由于Easy-UI本身就是Jquery封装的库，所以其本质还是javascript．虽然本身没有link属性，但是通过其定义的属性或是方法，按照其格式构造一个javascript函数语句即可。