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 URL参数的拼接方法比较
Feb 15 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
js转换对象为xml
2017/02/17 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
无工作经验者个人求职信范文
2013/12/22 职场文书
住宅质量保证书
2014/04/29 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电