javascript - 如何在tablesorter和可编辑插件之间建立关系？

我正在尝试使用tablesorter和Tableedit构建可编辑和可排序的表
在我通过可编辑插件更新了数据之后，我需要在tablesorter中更新这些数据，我不知道怎么做

$('.example-2').Tabledit({
    columns: {
        identifier: [0, 'id'],
        hideIdentifier: true,
        editable: [[1, 'App Date'], [2, 'App Time'], [3, 'Service Type', '{"1": "@mdo", "2": "@fat", "3": "@twitter"}']],
    }
});
$(function () {
    $(".example-2").tablesorter({
        headerTemplate: '{content}{icon}',
        headers: {
            0: {
                sorter: false,
            },
            // assign the secound column (we start counting zero)
            4: {
                // disable it by setting the property sorter to false
                sorter: false,

            },
            // assign the third column (we start counting zero)
            5: {
                // disable it by setting the property sorter to false
                sorter: false
            },
            6: {
                // disable it by setting the property sorter to false
                sorter: false
            },
            7: {
                // disable it by setting the property sorter to false
                sorter: false
            },
            8: {
                // disable it by setting the property sorter to false
                sorter: false
            },
        }


    });
    $(".tabledit-save-button").click(function () {
        var usersTable = $(".example-2");
        usersTable.trigger("update")
            .trigger("sorton", usersTable.get(0).config.sortList)
            .trigger("appendCache")
            .trigger("applyWidgets");
    });
});

我试图在单击“保存”按钮时更新数据，但它不起作用。

最佳答案

你试过使用我的editable widget中包含的fork of tablesorter吗？
如果要使用TableEdit，需要添加以下代码（demo）：

$(function() {

  var $table = $('table');
  $table
    .Tabledit({
      columns: {
        identifier: [0, 'id'],
        hideIdentifier: true,
        editable: [
          [1, 'App Date'],
          [2, 'App Time'],
          [3, 'Service Type', '{"1": "@mdo", "2": "@fat", "3": "@twitter", "4": "@university"}']
        ]
      }
    })
    .on('click', 'button:not(.tabledit-save-button)', function() {
      // prevent sorting while editing
      $table[0].isUpdating = $(this).closest('td').hasClass('tabledit-edit-mode');
    })
    .on('click', 'button.tabledit-save-button', function() {
      // update tablesorter cache
      $table.trigger('update');
    })
    .tablesorter({
      theme: 'bootstrap',
      headerTemplate: '{content}{icon}',
      textExtraction: function(node, table, cellIndex) {
        var $cell = $(node);
        // sortable data inside of a span
        return $cell.find('.tabledit-span').text() || $cell.text();
      },
      widgets: ['zebra', 'uitheme'],
      headers: {
        4: {
          // don't sort the Tabledit controls added dynamically
          sorter: false
        }
      }
    });

});

注意，功能的顺序很重要！

关于javascript - 如何在tablesorter和可编辑插件之间建立关系？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34965057/