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 String.replace的妙用
Sep 08 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
理解jQuery stop()方法
Nov 21 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 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
4.与数据库的连接
2006/10/09 PHP
PHP合并静态文件详解
2014/11/14 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Python绑定方法与非绑定方法详解
2017/08/18 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python实现音乐下载器
2018/04/15 Python
详解Python3的TFTP文件传输
2018/06/26 Python
基于python实现简单日历
2018/07/28 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python3访问字典里的值实例方法
2020/11/18 Python
python xlsxwriter模块的使用
2020/12/24 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
shell的种类有哪些
2015/04/15 面试题
找工作最新求职信
2013/12/22 职场文书
学习党课思想汇报
2013/12/29 职场文书