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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
vue打包时去掉所有的console.log
Apr 10 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的库,结果发现很多东西
2006/12/31 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
JS和JQ的event对象区别分析
2014/11/24 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
面试常见的js算法题
2017/03/23 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
详解JavaScript作用域和作用域链
2019/03/19 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
英语系本科生求职信范文
2013/12/18 职场文书
主持词开场白
2014/03/17 职场文书
组织鉴定材料
2014/06/02 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby