Question

我使用jQuery ui可排序小部件创建了一个带有可排序行的表，一切都很好，直到我需要更改桌面上的某些内容。

禁用表格列取消选中输入复选框
取消选中另一个输入复选框的表格行

当我取消选中这些输入并开始拖放表行时，突然行被“卡住”（就像没有释放鼠标按钮一样）并验证可排序的事件我发现beforeStop事件是永远达不到。我检查过的事件包括：启动，激活，更改，之前停止，更新，停用和退出。达到此目的有点棘手，有时会在您开始快速拖放或首次停用列，然后是行然后拖放时发生。

我还有一些函数可以对索引进行排序，一个函数将禁用的行放到表的末尾（Stack Overflow强制我放一些代码，但所有这些都在小提琴上）：

$scope.foo.$custom_method();

这是小提琴：https://jsfiddle.net/hedka77/8uwmm2vp/4/

Answer 1

以防万一有人遇到这个问题，我认为解决方案是添加一个表脚，并且每当停用某行时，您需要先停用可排序的，将停用的行发送到表脚，然后再激活可排序的。这是有效的解决方案https://jsfiddle.net/hedka77/8uwmm2vp/

$(document).on("click", ".myClassCheckboxes", function (e) {

    $("#config_body").sortable("disable");

    var this_id_etapa = $(this).attr("id").split("_")[1];

    if ($(this).is(":checked")) {

      $(".cantDias").each(function () {
        var idEtapa = $(this).attr("name").split("_")[1];
        if (this_id_etapa == idEtapa) {
          $(this).prop("disabled", false);
          $(this).val("");

          //here you send back the row to the table body
          var parent = $(this).parent("td").parent("tr");
          parent.appendTo($("#config_body"));
        }
      });

    } else {

      $(".cantDias").each(function () {
        var idEtapa = $(this).attr("name").split("_")[1];
        if (this_id_etapa == idEtapa) {
          $(this).prop("disabled", true);
          $(this).val("");
        }
      });

      //And here we move the row to the table foot
      var parent = $(this).parent("td").parent("tr");
      parent.appendTo($("#config_foot"));
    }

    reorder_rows(); //this function enums the rows (1...n)
    $("#config_body").sortable("enable");
    updateSortable(); //refresh sortable positions
});

jQuery ui sortable无法访问beforeStop事件

1 个答案: