Jquery自定义button按钮的几种方法


Posted in Javascript onJune 11, 2014

1、第一种方法比较简单

"columns": [ { "data": null,defaultContent: '<input type="button" onclick="" value="呵呵" />', orderable: false }, 
],

从代码字面意思就能明白什么意思,但是怎样从里边获取改行的信息我还不知道,所以显得不是太实用,定义默认值还可以。
{ "data": "id",orderable: false, 
"mRender":function(data,type,full){ 
return "<input type='button' onclick='' value='"+data+"'/>"; 
} 
},

刚看到一种方法就是使用回调,也可以获取该列的值并传递,但也只能获取一个值,仍然没有第二种方法好。

2、第二种稍微麻烦,但比较实用

"fnRowCallback":function(nRow,aData,iDataIndex){ 
var id = $('td', nRow).eq(0).text(); 
var ip = $('td', nRow).eq(3).text(); 
$('td:eq(-1)',nRow).html('<a href="javascript:onUpdate(\''+id+'\',\''+ip+'\')">修改</a> '+ 
'<a href="javascript:onDel('+iDataIndex+')">删除</a>'); 
return nRow; 
},

在初始化行数据时调用一个回调方法,可以轻松的获取该行数据,完成提交功能,但是有个缺点,需要后台json传一个空字段,也不够灵活。

3、第三种方法,就是将两种方法结合使用,可以完全前台无需后台操作

{ "data": null,orderable: false,}

"fnRowCallback":function(nRow,aData,iDataIndex){ 
var id = $('td', nRow).eq(0).text(); 
var ip = $('td', nRow).eq(3).text(); 
$('td:eq(-1)',nRow).html('<a href="javascript:onUpdate(\''+id+'\',\''+ip+'\')">修改</a> '+ 
'<a href="javascript:onDel('+iDataIndex+')">删除</a>'); 
return nRow; 
},
Javascript 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
JavaScript实现联动菜单特效
Jan 07 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
教你用jquery实现iframe自适应高度
Jun 11 #Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 #Javascript
控制文字内容的显示与隐藏示例
Jun 11 #Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 #Javascript
jQuery队列操作方法实例
Jun 11 #Javascript
JS生成不重复随机数组的函数代码
Jun 10 #Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 #Javascript
You might like
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
新闻编辑求职信
2014/04/09 职场文书
大型活动组织方案
2014/05/10 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
师德师风培训感言
2015/08/03 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript