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 offset函数应用实例
Nov 14 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
js实现数组转换成json
Jun 26 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
微信小程序 生成携带参数的二维码
Oct 23 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 mysql数据库操作分页类
2008/06/04 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
PHP PDO函数库详解
2010/04/27 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现LRU算法的2种方法
2015/06/24 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
python文件操作的简单方法总结
2019/11/07 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
教师自我鉴定范文
2013/11/10 职场文书
研修第一天随笔感言
2014/02/15 职场文书
自荐信的基本格式
2014/02/22 职场文书
公司董事长岗位职责
2014/06/08 职场文书
运动会演讲稿100字
2014/08/25 职场文书
党委工作总结2015
2015/04/27 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
法制教育讲座心得体会
2016/01/14 职场文书