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 document.execCommand() 常用解析
Dec 14 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue里使用create, mounted调用方法
Apr 26 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
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
php生成图片验证码
2015/06/09 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python文件及目录操作实例详解
2015/06/04 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
详细分析Python collections工具库
2020/07/16 Python
学习Python爬虫的几点建议
2020/08/05 Python
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
实体的生命周期
2013/08/31 面试题
毕业生找工作的自我评价
2013/10/18 职场文书
人事专员岗位职责
2013/11/20 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
党员带头倡议书
2015/04/29 职场文书
会议主持人开场白台词
2015/05/28 职场文书
运动会通讯稿600字
2015/07/20 职场文书