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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
vue实现文字加密功能
Sep 27 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
range 标准化之获取
2011/08/28 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python ip正则式
2009/05/07 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
python re模块findall()函数实例解析
2018/01/19 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
司仪主持词两篇
2014/03/22 职场文书
任命书怎么写
2014/06/04 职场文书
房产公证委托书范本
2014/09/20 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
离婚协议书格式范本
2016/03/18 职场文书