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 相关文章推荐
js实现密码强度检测【附示例】
Mar 30 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
vue实现文件上传读取及下载功能
Nov 17 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
js实现页面图片消除效果
Mar 24 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
星际争霸任务指南——神族
2020/03/04 星际争霸
Protoss建筑一览
2020/03/14 星际争霸
PHP中常用的转义函数
2014/02/28 PHP
PHP框架性能测试报告
2016/05/08 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
javascript 函数速查表
2010/02/07 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
水果超市创业计划书
2014/01/27 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
Python基础详解之描述符
2021/04/28 Python
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis