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 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
jQuery的事件预绑定
Dec 05 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 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修改时间格式的代码
2011/05/29 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
python字典key不能是可以是啥类型
2020/08/04 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
Python实现疫情地图可视化
2021/02/05 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
微型企业创业投资计划书
2014/01/10 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
会计人员岗位职责
2014/03/19 职场文书
项目合作协议书范本
2014/04/16 职场文书
组织鉴定材料
2014/06/02 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
西柏坡观后感
2015/06/08 职场文书
跑吧孩子观后感
2015/06/10 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
Python利用capstone实现反汇编
2022/04/06 Python