Question

我有一个HTML表，该表中装有tablesorter（活动版本）。我希望能够动态地在已加载表排序器之后使表中的内容可编辑。我以为我可以像这样修改选项：

<div class="dropzone upload-success" id="upload-success-bg">
  <label class="info" for="file">
    Drag image file here
    Or click here to select image
  </label>
  <input type="file" required="" id="file" class="input" accept="image/*"></div>
<div class="status">
  <input class="image-url" type="text" id="hostImage" name="hostImage" required="true" readonly="true" value="URL LOADS HERE">
</div>

将选项登录到控制台似乎已正确设置了它们：

var widgetOptions = $(table)[0].config.widgetOptions;
widgetOptions.editable_columns = [7, 8, 9, 10, 11, 12, 13];
widgetOptions.editable_enterToAccept = true;

但是内容不可编辑。如果我在初始化期间设置了editable_columns，那么一切都会按预期进行，但是我想在初始化之后进行。

谢谢

Answer 1

要使其他列可编辑，您需要更新editable_columns值，然后触发更新。问题在于，列一旦可编辑，更新就不会禁用已经可编辑的列（demo）

$(function() {

  var $table = $('#table');

  $('button').click(function() {
    $table[0].config.widgetOptions.editable_columns = [3];
    $table.trigger('update');
  });

  $table.tablesorter({
      theme: 'blue',

      widgets: ['editable'],
      widgetOptions: {
        editable_columns: [0, 1, 2],
        editable_autoAccept: true,
        editable_autoResort: false
      }
    })
    // config event variable new in v2.17.6
    .children('tbody').on('editComplete', 'td', function(event, config) {
      var $this = $(this),
        newContent = $this.text(),
        // there shouldn't be any colspans in the tbody
        cellIndex = this.cellIndex,
        // data-row-index stored in row id
        rowIndex = $this.closest('tr').attr('id');
      /*
      $.post("mysite.php", {
          "row"     : rowIndex,
          "cell"    : cellIndex,
          "content" : newContent
      });
      */
    });

});

Answer 2

要使此工作正常进行，我必须通过单击按钮添加可编辑的小部件，然后向表中触发一个Applywidgets，例如

$('button').click(function() {
    $(table)[0].config.widgets = ["stickyHeaders", "output", "filter" ,"print", "editable"];

    $(table)[0].config.widgetOptions.editable_columns = editableColumns;
    $(table)[0].config.widgetOptions.editable_enterToAccept = true;
    $(table)[0].config.widgetOptions.editable_editComplete = 'editComplete';

    $(table).trigger('applyWidgets');
});

jQuery tablesorter可编辑列

2 个答案: