附加表可排序

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。为了使click事件起作用，我必须使用.on来添加事件处理程序。我假设错误正在抛出，因为页面正在动态构建。我如何重写可排序的行？我非常确定它的语法，因为我已经尝试将它放在我能够的每个地方，但它不起作用。我猜它是这样的：

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

但我没有线索，我使用的是jquery-1.12.4.min.js和ui / 1.12.1 / jquery-ui.js

感谢您的帮助

Answer 1

这是一个使用Sortable with Table的简单示例。如果您扩展示例以包含更多详细信息，则可能有人可以提供更多建议。

$(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>

由于您没有使用列表（<ul>），因此您需要定义可排序将使用的items。这将是表体中表格的行（<tr>）。

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