EasyUI的DataGrid每行数据添加操作按钮的实现代码


Posted in Javascript onAugust 22, 2017

今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,一开始想在后台拼接字符串用JSON传回,但是我测试之后发现这个方法不管用,在网上搜索了一下,整理如下:

其实要加一行自定义列很简单,在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事件之类的,视情况而定

总结

以上所述是小编给大家介绍的EasyUI的DataGrid每行数据添加操作按钮的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 #Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 #Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 #Javascript
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
bootstrap confirmation按钮提示组件使用详解
Aug 22 #Javascript
bootstrap multiselect下拉列表功能
Aug 22 #Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 #Javascript
You might like
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python和c语言的主要区别总结
2019/07/07 Python
python中dict使用方法详解
2019/07/17 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
费用会计岗位职责
2014/01/01 职场文书
转预备党员政审材料
2014/02/06 职场文书
学校募捐倡议书
2014/05/14 职场文书
总经理助理岗位职责
2015/01/31 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers