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

程序员文章站 2022-03-18 23:15:49

...

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

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

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

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

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

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

最后效果如下

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

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