文档章节

Datatables的自定义columns渲染与事件注册冲突解决

银月光海
 银月光海
发布于 2016/06/13 14:10
字数 369
阅读 646
收藏 0

在使用datatables时,使用了2种风格的事件注册,结果冲突导致一个事件被覆盖,无法起作用。

改为一种风格后,使用event.stopPropagation();阻止事件冒泡,从而解决问题,上代码:

原来的js片段


	oTable = table.dataTable({
				processing : true, //加载数据时显示正在加载信息  
				ajax : {
					url : '/applyList',
					type: 'POST',
					dataType: 'json'
				},
				serverSide : true, //指定从服务器端获取数据   				
				drawCallback : function(settings, json) {// 数据加载完成之后回调函数
					 Metronic.unblockUI(table)
				},
				lengthMenu : [ 5, 10, 25, 50, 100 ],
				pageLength : 5,
				order : [[6,"desc"]],
				columns : [{
					title : "flowId",
					className : "hide",
					data : "flowId"
				}, {
                 ……各种列定义……
				}, {
					title : "修改申请",
					className : "center",
					render : function(data, type, full, meta) {
                        // 原来的写法,不起作用
                        // html = '<a href="javascript:resendForm(' + full.id + ');"><i class="fa fa-edit"></i>编辑</a>';
			        	html = '<a class="resendForm"><i class="fa fa-edit"></i> 编辑</a>';
			            return html;
					}
				}],
				//T:button f:search l:每页数量下拉  r:sProcessing t:表格框  i:data信息 p:分页
				sDom : "<T><'dt_header'<'row-fluid'<'col-sm-8'F><'col-sm-4'l>>r>t<'dt_footer'<'row-fluid'<'span6'i><'span6'p>>>",
				tableTools : {//编辑按钮
					"sRowSelect" : "single",
					"aButtons" : [
							{
								"sExtends" : "text",
								"sButtonText" : "申请",
								"fnClick" : toApply
							}
					]
				}
			});

	// 注册点击显示详细事件,整记录条都覆盖,导致编辑btn失效
    table.on('click', 'tbody tr', function (e) {
    	e.preventDefault();
        var nRow = $(this).parents('tr')[0];
        var index = e.currentTarget.rowIndex;
        var aData = oTable.fnGetData(nRow)[index - 1];
        viewDetail(aData.id);
    });

	// 注册修改申请事件,新方法
    table.on('click', 'tbody tr .resendForm', function (e) {
    	e.preventDefault();
    	e.stopPropagation();	// 阻止事件冒泡
        var nRow = $(this).parents('tr')[0];
        var aData = oTable.fnGetData(nRow);
        resendForm(aData);
    });

 

========参考=======

  1. http://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault
  2. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

 

© 著作权归作者所有

共有 人打赏支持
银月光海

银月光海

粉丝 34
博文 365
码字总数 46223
作品 0
浦东
项目经理
dataTables相关资料参考

https://www.cnblogs.com/sweeeper/p/6106320.html http://yuemeiqing2008-163-com.iteye.com/blog/2006942...

ahl123
07/02
0
0
jquery之DataTables的使用

强大的表格解决方案,有多强大,一起来看下吧: 1、DataTables的默认配置 $(document).ready(function() { $(‘#example’).dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/...

mickelfeng
2012/11/12
0
1
dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.NET/] 二:基本使用:[http://www.guoxk.com/node/jQuery-datatables] 1、DataTables的默认配置 $(...

ahl123
07/02
0
0
DataTables 使用配置

一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jquery-datatables] 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataT......

谢锡鹏
2015/01/19
0
0
DataTables_详细使用方法

jQuery的DataTables插件的使用方法 ADMIN 2011年11月23日 13:15:45 发布 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTable...

喵王不瞌睡
2015/05/02
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

文件的压缩与解压(linux)

Linux下*.tar.gz文件解压缩命令 1.压缩命令:   命令格式:tar -zcvf 压缩后文件名.tar.gz 被压缩文件名 可先切换到当前目录下。压缩文件名和被压缩文件名都可加入路径。 2.解压缩命令: ...

qimh
26分钟前
1
0
invalid character found in the request target 异常

这个异常时因为Tomcat 9不支持请求格式出现“{”等非法字符的问题 因为tomcat版本问题遇到的坑,记录一下。 问题 今天由于要测试一下订单详情页的异步查询,在本地起了一个服务,发送的请求是...

edwardGe
31分钟前
3
0
发现抓包软件fiddler的bug

1个请求他跳转之后,直接400,被拦在了Apache,使用fiddler 的,replay requests 是同样的结果,但是replay composer确是正常的。 也就是说这replay requests 是发原来的包,replay composer...

NLGBZJ
41分钟前
1
0
linux screen 命令详解

shell关闭后, 主机仍然运行 screen命令 启动jenkins以后, screen, 然后按ctrl+a 再按d 这样暂停了子界面, 这时候回到了父界面 用screen –ls查看目前子界面的状态 [root@free /]# screen -l...

SuShine
42分钟前
2
0
mac机器切换无线网络导致网页不能打开的问题

问题: 公司和家里使用不同的WI-FI,每次从家到公司时自动切换网络后,公司的许多地址不能访问, ping域名是可以ping同的,但是网页却打不开... 问题分析: 初步猜想是DNS缓存的问题? 对于MAC系统没...

Lennie002
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部