侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

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

2024-05-15 星期三 / 0 评论 / 0 点赞 / 100 阅读 / 2757 字

在使用datatables时,使用了2种风格的事件注册,结果冲突导致一个事件被覆盖,无法起作用。 改为一种风格后,使用event.stopPropagation();阻止事件冒泡,从而解决问题,上代码

在使用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

 

广告 广告

评论区