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. 在某些时候,我重新构建了非固定列标题以包含两行:顶行用于排序,底部包含我的checbox和弹出控件.这似乎工作,但事实证明它不适用于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

我只阅读了问题的标题和它的前三行(所以我希望它有所帮助),但是如果你需要的只是停止点击的传播,即使是位于表头内的点击复选框也是如此你应该添加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()"

这是一个工作的jsfiddle,我只修复了第一个复选框/选择