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 Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
浅谈箭头函数写法在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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python简单实现enum功能的方法
2016/04/25 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python中的字符串内部换行方法
2018/07/19 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
最新销售员个人自荐信
2013/09/21 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
工作后的感想
2015/08/07 职场文书
2016年国培研修日志
2015/11/13 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript