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面象对象设计
Apr 28 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
ElementUI radio组件选中小改造
Aug 12 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设计模式 State (状态模式)
2011/06/26 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php制作文本式留言板
2015/03/18 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
javascript 快速排序函数代码
2012/05/30 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python通过文件头判断文件类型
2015/10/30 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
旅游网创业计划书
2014/01/31 职场文书
迟到检讨书5000字
2014/01/31 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
乳制品整治工作方案
2014/05/29 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
清洁工个人工作总结
2015/03/05 职场文书
小学运动会入场词
2015/07/18 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python