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技术技巧大全(五)
Jan 22 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
教你用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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
python ip正则式
2009/05/07 Python
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
flask入门之表单的实现
2018/07/18 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
大学生党课思想汇报
2013/12/29 职场文书
学习自我鉴定
2014/02/01 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
签字仪式主持词
2015/07/03 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
世界十大狙击步枪排行榜
2022/03/20 杂记
MySQL sql模式设置引起的问题
2022/05/15 MySQL