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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
Javascript !!的作用
Dec 04 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 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
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
jQuery学习笔记之Helloworld
2010/12/22 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
python自动zip压缩目录的方法
2015/06/28 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
python地震数据可视化详解
2019/06/18 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
django实现后台显示媒体文件
2020/04/07 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
python FTP编程基础入门
2021/02/27 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
迎新晚会邀请函
2014/02/01 职场文书
平安建设实施方案
2014/03/19 职场文书
环保倡议书格式范文
2014/05/14 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
python小程序之飘落的银杏
2021/04/17 Python
解决Python字典查找报Keyerror的问题
2021/05/26 Python