Question

我一直在研究一种网格控件，它可以用于Datatables的KeyTable插件。所有这些都在这里和那里进行了一些调整，但插件有一个恼人的问题，我希望有人可以帮助我。以下是插件页面中的示例代码：

$(document).ready( function () {
    var keys = new KeyTable( {
        "table": document.getElementById('example')
    } );

    /* Apply a return key event to each cell in the table */
    keys.event.action( null, null, function (nCell) {
        /* Block KeyTable from performing any events while jEditable is in edit mode */
        keys.block = true;

        /* Initialise the Editable instance for this table */
        $(nCell).editable( function (sVal) {
            /* Submit function (local only) - unblock KeyTable */
            keys.block = false;
            return sVal;
        }, {
            "onblur": 'submit',
            "onreset": function(){
                /* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
                 * it will 'esc' KeyTable as well
                 */
                setTimeout( function () {keys.block = false;}, 0);
            }
        } );

        /* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
        setTimeout( function () { $(nCell).click(); }, 0 );
    } );
} );

据我所知，在返回键被击中之前，单元格不会被“编辑”，之后现在附加了一个点击事件。有没有办法让我附加一个点击事件，在我的情况下，我想要一个dblclick，在我回到之前的单元格？我已经尝试将函数绑定到“td.focus”和“example td”而没有运气。我希望每个单元格从加载响应dblclick，但也响应键。

Answer 1

您只需要在要编辑的单元格上绑定双击事件并模拟返回键：

$('.cells').dblclick(function() {
    e = jQuery.Event("keypress");
    e.which = 13;
    e.keyCode = 13;
    $(this).trigger(e);
});

Answer 2

我在表格单元格中添加了一个dblclick委托，但是完成这项工作的关键是最后一行：

$('#' + tableID).delegate('tr td.focus', 'dblclick', function () {
        $(this).editable(updateURL, 
            {
             "callback": function (value, settings) {
                keys.block = false;
             },
             "onblur": 'submit',
             "onreset": function(){
                setTimeout( function () {keys.block = false;}, 0);
             }
            } 
        );
        $(this).dblclick();
    });

使用示例中显示的setTimeout函数进行的间接点击事件调用导致jEditable事件触发，因此我摆脱了它。只需直接调用click事件即可使用。

Datatables，KeyTable，jEditable：如何在单元格上按Enter之前绑定双击？

2 个答案: