jquery - DataTables:如果标题中有复选框和弹出控件，如何避免列排序？

Question

我有一个 DataTables 表，其中一些标题列中有复选框和弹出窗口。 (另外我也使用FixedColumn和ColReorder插件)。我在 jsfiddle 中的模型位于底部

我的问题是，如果用户尝试检查复选框或推送弹出窗口，排序事件就会接管一切。 jsfiddle 页面无法完全运行，因为在我的应用程序中，我收到了复选框单击的事件，但当时为时已晚，排序也会发生。排序图标只是标题单元格的背景 CSS，排序事件由 DataTables 为整个标题单元格注册。

解决这个问题的计划:

1. 注册处理程序并尝试阻止 Datatables 自己的处理程序运行。截至目前，如果我还为标题单元格注册了一个事件处理程序，那么我只会在 DataTable 的处理程序之后获取该事件，事件按注册顺序传递。我还为复选框和弹出窗口本身注册了处理程序，但这些处理程序也仅在 DataTables 的处理程序(冒泡)之后传递。只有当我能够在 DataTables 自己的处理程序之前注册我的处理程序时，这才有效，但我还没有找到执行此操作的入口点。当事件注册时，表 DOM 应该已经生成。现在看时机已经晚了，只能报名了。
2. 找到一个 API 调用点，我可以在其中取消 DataTables 的排序。订单事件( http://datatables.net/reference/event/order )似乎是事后发生的，我没有看到取消的方法。
3. 在某些时候，我重组了非固定列标题以包含两行:顶行用于排序，底部包含我的复选框和弹出控件。这似乎有效，但事实证明它不适用于 ColReorder 插件。我需要那个插件，它只重新排序了标题的顶行，底部保留在那里。如果我能解决这个问题，这也将是一个解决方案。

http://jsfiddle.net/csabatoth/pgue1sf5/8/

var initPage = function () {
    var columnsArray = [
        { "title": "index", "class": "dt-center" },
        { "title": "lastname", "class": "dt-head-center dt-body-left" },
        { "title": "firstname", "class": "dt-head-center dt-body-left" },
        { "title": '<div>foo1</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-head-center dt-body-left" },
        { "title": '<div>foo2</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
        { "title": '<div>foo3</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
        { "title": '<div>foo4</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
        { "title": '<div>bar1</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
        { "title": '<div>bar2</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
        { "title": '<div>bar3</div><input type="checkbox" class="filterchk" checked="checked">&nbsp;<select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" }
    ];

    var dataArray = [
        [ 1, "aaa", "rrr", "x", "x", "x", "x", "x", "x", "x" ],
        [ 2, "bbb", "qqq", "x", "x", "x", "x", "x", "x", "x" ],
        [ 3, "ccc", "ppp", "x", "x", "x", "x", "x", "x", "x" ],
        [ 4, "ddd", "ooo", "x", "x", "x", "x", "x", "x", "x" ],
        [ 5, "eee", "nnn", "x", "x", "x", "x", "x", "x", "x" ],
        [ 6, "fff", "mmm", "x", "x", "x", "x", "x", "x", "x" ],
        [ 7, "ggg", "lll", "x", "x", "x", "x", "x", "x", "x" ],
        [ 8, "hhh", "kkk", "x", "x", "x", "x", "x", "x", "x" ],
        [ 9, "iii", "jjj", "x", "x", "x", "x", "x", "x", "x" ]
    ];

    viewModel.table = $('#MyTable').DataTable({
        dom: "Rrtip",
        autoWidth: false,
        deferRender: true,
        info: true,
        lengthChange: false,
        ordering: true,
        orderMulti: true,
        orderFixed: {
            pre: [0, 'asc'],
            post: [1, 'asc']
        },
        paging: true,
        pagingType: "full_numbers",
        renderer: "bootstrap",
        processing: true,
        scrollX: true,
        scrollY: false,
        searching: false,
        columns: columnsArray,
        data: dataArray,
        initComplete: function (settings, json) {
            viewModel.attachTableEventHandlers();
        },
        displayLength: 5,
        colReorder: {
            fixedColumnsLeft: 3,
            fixedColumnsRight: 0
        }
    });
    new $.fn.dataTable.FixedColumns(viewModel.table, {
        leftColumns: 3
    });

Answer 1

我只阅读了问题的标题和前 3 行(所以我希望它有帮助)，但是如果您需要的只是停止单击的传播，甚至停止位于内部的单击的复选框您应该将 onclick="event.stopPropagation()" 添加到该复选框，或者更好的是在 IE(旧版)和其他浏览器上运行的函数

//taken from my yadcf plugin, you can call it in your code like this:
//yadcf.stopPropagation(event)
function stopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
}

并在复选框中添加onclick="stopPropagation(event)"

对于您的选择，您还应该添加 onmousedown="..." 所以它看起来像这样:

<select onclick="event.stopPropagation()"  
        onmousedown="event.stopPropagation()"

这是一个working jsfiddle ，我只修复了第一个复选框/选择