文档章节

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

银月光海
 银月光海
发布于 2016/06/13 14:10
字数 369
阅读 666
收藏 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

 

© 著作权归作者所有

共有 人打赏支持
银月光海

银月光海

粉丝 37
博文 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

没有更多内容

加载失败,请刷新页面

加载更多

Redis的API应用

全局命令 1,查看所有键:keys * set school dongnao set hello world 2,键总数 dbsize //2个键,如果存在大量键,线上禁止使用此指令 3,检查键是否存在:exists key //存在返回1,不存在返...

这很耳东先生
13分钟前
0
0
Java GC机制详解

垃圾收集 Garbage Collection 通常被称为“GC”,本文详细讲述Java垃圾回收机制。 导读: 1、什么是GC 2、GC常用算法 3、垃圾收集器 4、finalize()方法详解 5、总结--根据GC原理来优化代码 ...

编程SHA
16分钟前
0
0
CMD 乱码永久解决方案

创建cmd.reg,内容如下,双击运行导入注册表。 Windows Registry Editor Version 5.00[HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe]"CodePage"=dword:0000fde9"FontFamil......

yeahlife
19分钟前
0
0
亿级Web系统搭建:单机到分布式集群

当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题。为了解决这些性能压力带来问题,我们需要在Web系统...

onedotdot
22分钟前
0
0
Linux 命令优先级 —— alias、function、内部命令(make)

Linux 命令优先级 —— alias、function、内部命令(make) make 新建Makefile文件,在里面输入如下内容; # Makefile内容all:@echo "Make Command echo : Hello " 保存,执行 which make ,...

雪落青山
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部