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之二(接口实现介绍)
Jan 27 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
详解TypeScript中的类型保护
Apr 29 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 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语法(4)
2006/10/09 PHP
php 引用(&amp;)详解
2009/11/20 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
javascript之bind使用介绍
2011/10/09 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python绘图方法实例入门
2015/05/19 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
python绘制随机网络图形示例
2019/11/21 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
出纳试用期工作总结2015
2015/05/28 职场文书