Datatables的自定义columns渲染与事件注册冲突解决
Datatables的自定义columns渲染与事件注册冲突解决
银月光海 发表于2年前
Datatables的自定义columns渲染与事件注册冲突解决
  • 发表于 2年前
  • 阅读 627
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

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

 

标签: datatables
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
银月光海
粉丝 32
博文 339
码字总数 46223
×
银月光海
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: