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 !!的作用
Dec 04 Javascript
jquery 图片轮换效果
Jul 29 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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/02 星际争霸
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
详解Python绘图Turtle库
2019/10/12 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
工商学院毕业生个人自我评价
2013/09/19 职场文书
大学生水文观测实习自我鉴定
2013/09/29 职场文书
高三自我鉴定怎么写
2013/10/19 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
开学典礼策划方案
2014/05/28 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
小学语文教师研修日志
2015/11/13 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android