首页 >web前端 >js教程 >实例详解EasyUI的DataGrid每行数据添加操作按钮

实例详解EasyUI的DataGrid每行数据添加操作按钮

小云云原创: 2017-12-30 14:35:467877浏览

easyui的datagrid每一列数据后边都加上一个操作按钮，怎么实现此功能呢？下面小编给大家带来了EasyUI的DataGrid每行数据添加操作按钮的实现代码，需要的朋友参考下吧，希望能帮助到大家。

其实要加一行自定义列很简单，在js声明datagrid的时候加上如下代码

{field:&#39;operate&#39;,title:&#39;操作&#39;,align:&#39;center&#39;,width:$(this).width()*0.1, 
  formatter:function(value, row, index){ 
    var str = &#39;<a href="#" rel="external nofollow" name="opera" class="easyui-linkbutton" ></a>&#39;; 
    return str; 
}}

这行代码是在columns属性下定义的，而且一定要加上这个代码

onLoadSuccess:function(data){  
    $("a[name=&#39;opera&#39;]").linkbutton({text:&#39;下订单&#39;,plain:true,iconCls:&#39;icon-add&#39;});  
},

如果不加这个，那个操作列就不会出现按钮的样式，只是一个超链接，用linkbutton或者其他按钮的可以根据需求改编

最后效果如下

之后可以对a标签做onclick事件之类的，视情况而定

实例详解EasyUI的DataGrid每行数据添加操作按钮

相关文章