Question

当数据来自服务器

时，

无法使datakey js与datatable js一起使用

当数据是html时，但是当从服务器获取数据时

根本不工作

var table = $('#' + attrs.id).dataTable({
      "bProcessing": true,
      "bServerSide": false,
      "sAjaxDataProp": "data",
      "bDestroy": true,
      "aoColumns": [
      { "mDataProp": ["a"] },
      { "mDataProp": ["b"] },
      { "mDataProp": ["c"] },
      { "mDataProp": ["d"] },
      { "mDataProp": ["e"] },
      { "mDataProp": ["f"] }
      ],
      "sAjaxSource": '/api/phases',

    });

    var keys = new KeyTable({
      "table": document.getElementById(attrs.id),
      "initScroll": false
    });


    $('#' + attrs.id + ' tbody td').each(function () {
          keys.event.action(this, 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, x) {
              var aPos = table.fnGetPosition(this);
              table.fnUpdate(sVal, aPos[0], aPos[1]);
              keys.block = false;
              return sVal;
            }, {
              "indicator": 'Saving...',
              "tooltip": 'Click to edit...',
              "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 */
            setTimeout(function () { $(nCell).click(); }, 0);
          });
        });

为什么在按下单元格

时不进入编辑模式

任何帮助？

Answer 1

只需在fnInitComplete之后整合keytable

应该运作良好

var table = $('#' + attrs.id).dataTable({
      "bProcessing": true,
      "bServerSide": false,
      "sAjaxDataProp": "data",
      "bDestroy": true,
      "aoColumns": [
      { "mDataProp": ["a"] },
      { "mDataProp": ["b"] },
      { "mDataProp": ["c"] },
      { "mDataProp": ["d"] },
      { "mDataProp": ["e"] },
      { "mDataProp": ["f"] }
      ],
      "sAjaxSource": '/api/phases',
      "fnInitComplete": function () {
        /* Apply a return key event to each cell in the table */
        $('#' + attrs.id + ' tbody td').each(function () {
          console.log(this);
          keys.event.action(this, 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, x) {
              var aPos = table.fnGetPosition(this);
              table.fnUpdate(sVal, aPos[0], aPos[1]);
              keys.block = false;
              return sVal;
            }, {
              "indicator": 'Saving...',
              "tooltip": 'Click to edit...',
              "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 */
            setTimeout(function () { $(nCell).click(); }, 0);
          });
        });
      }
    });

    var keys = new KeyTable({
      "table": document.getElementById(attrs.id),
      "initScroll": false
    });

从服务器获取数据时带有keytable的datatable js

1 个答案: