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 学习技巧总结
May 21 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
vue之nextTick全面解析
May 17 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
vue3中的组件间通信
Mar 31 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
教你用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
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python之拟合的实现
2019/07/19 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
环境工程大学生个人的自我评价
2013/10/08 职场文书
车间副主任岗位职责
2013/12/24 职场文书
促销活动总结范文
2014/04/30 职场文书
《火烧云》教学反思
2016/02/23 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers