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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
javascript编程起步(第五课)
Jan 10 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
javascript 事件绑定问题
Jan 01 Javascript
初步了解javascript面向对象
Nov 09 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
微信小程序实现点击生成随机验证码
Sep 09 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
一个SQL管理员的web接口
2006/10/09 PHP
php在线打包程序源码
2008/07/27 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
ThinkPHP路由详解
2015/07/27 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
使用python实现rsa算法代码
2016/02/17 Python
python-numpy-指数分布实例详解
2019/12/07 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
Python request使用方法及问题总结
2020/04/26 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
中专生的个人自我评价
2013/12/11 职场文书
书香校园活动方案
2014/02/28 职场文书
低碳环保口号
2014/06/12 职场文书
六查六看剖析材料
2014/10/06 职场文书
领导工作表现评语
2015/01/04 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
运动会广播稿200字
2015/08/19 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python