为可排序的表附加事件处理函数

Question

我目前有以下代码

     $(document).on('click', '#educationDone', function () {
    var linkText = $('#educationDone').text();
    if (linkText === 'Done') {
        $('#degreeTable td:nth-child(1), #degreeTable th:nth-child(1)').hide();
        $(this).text('Edit and reorder entries');
        $("#degreeTable tbody").sortable("disable");
    } else {

        $(this).text('Done');
        $('#degreeTable td:nth-child(1), #degreeTable th:nth-child(1)').show();
        $("#degreeTable tbody").sortable("enable");

    }
});

我得到 jquery-ui 错误：

     cannot call methods on sortable prior to initialization; attempted to call method 'enable'

当它到达线路时：

      $("#degreeTable tbody").sortable("enable");

或

       $("#degreeTable tbody").sortable("disable");

当我在初始加载页面上拥有所有代码时，代码运行得非常好，但现在我试图将它分成几部分，因此它仅在用户单击某个按钮以加载所有 HTML 和 js 时加载那个部分。为了使点击事件起作用，我必须使用 .on 添加事件处理程序。我假设由于页面正在动态构建而引发错误。我如何需要重写可排序的行？我很确定它是语法，因为我试图把它放在我能放在的每一个地方，但它不起作用。我猜是这样的：

   $(document).on('sort'),'#degreeTable', function()){}

但我不知道，我正在使用 jquery-1.12.4.min.js 和 ui/1.12.1/jquery-ui.js

感谢您的帮助

Answer 1

这是一个使用带有表格的排序的简单示例。如果您扩展示例以包含更多详细信息，那么有人可能会提供更多建议。

$(function() {
  $("#sortable tbody").sortable({
    disabled: true,
    items: "> tr"
  });
  $("#sortable").disableSelection();

  $(".edit").on("click", function(e) {
    var $target = $(this).parents("table").find("tbody");
    if ($(this).text() == "Edit Order") {
      $(this).html("Save");
      $target.sortable("enable");
    } else {
      $(this).html("Edit Order");
      var tableData = $target.sortable("serialize");
      // Save tableData to a data source or file
      $target.sortable("disable");
    }
  })
});

#sortable {
  margin: 0;
  padding: 0;
  width: 60%;
}

#sortable tr td {
  margin: 0 3px 3px 3px;
  padding: 0.125em;
  padding-left: 1.5em;
  font-size: 1.125em;
  height: 18px;
}

#sortable tr.ui-sortable-helper td {
  border: 1px dashed #ccc;
  display: block;
  width: 80%;
}

#sortable td span {
  position: absolute;
  margin-left: -1.3em;
}

table .btn {
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  padding: 0.125em .2em;
  font-size: 65%;
  font-weight: 100;
  float: right;
  width: 60px;
}

table .btn:hover {
  background-color: #eef;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="sortable">
  <thead>
    <tr>
      <th>Items <span class="edit btn">Edit Order</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</td>
    </tr>
</table>

由于您没有使用 List (<ul>)，因此您需要定义 sortable 将使用的 items。这将是表格正文中表格的行 (<tr>)。

查看更多：http://api.jqueryui.com/sortable/#option-items