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 相关文章推荐
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
node实现基于token的身份验证
Apr 09 Javascript
Vue中的字符串模板的使用
May 17 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP答题类应用接口实例
2015/02/09 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
JavaScript打字小游戏代码
2011/12/26 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python素数检测实例分析
2015/06/15 Python
快速查询Python文档方法分享
2017/12/27 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
python 实现有道翻译功能
2021/02/26 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
幼儿园毕业典礼主持词
2014/03/21 职场文书
培训班开班主持词
2015/07/02 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书