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

最新推荐文章于 2023-12-27 10:59:34 发布

weixin_33816300

最新推荐文章于 2023-12-27 10:59:34 发布

阅读量247

点赞数

原文链接：https://my.oschina.net/yygh/blog/690517

版权

为什么80%的码农都做不了架构师？>>>

在使用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);
    });

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

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

转载于:https://my.oschina.net/yygh/blog/690517