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进行拖拽
Jul 20 Javascript
javascript add event remove event
Apr 07 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 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
discuz的php防止sql注入函数
2011/01/17 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php如何连接sql server
2015/10/16 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
Python Queue模块详解
2014/11/30 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
快速了解Python中的装饰器
2018/01/11 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
django queryset相加和筛选教程
2020/05/18 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
如何掌握自荐信格式呢
2013/11/19 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
大学生演讲稿范文
2014/01/11 职场文书
安全生产检查通报
2014/01/29 职场文书
八年级美术教学反思
2014/02/02 职场文书
运动会获奖感言
2014/02/11 职场文书
小班上学期评语
2014/05/05 职场文书
农业项目建议书
2014/08/25 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书