これは、過去数時間、私を悩ませてきました。
私はテーブルを持っています。そのテーブル内で、特定のデータ属性を持つ最も近い前のテーブル行を探しています。jquery sortable の使用が成功した直後に、この検索を行っています。私はほとんどすべてを試しましたが、常に間違ったことを思いつきます。
これが私が使っているものです
var newIndex = ui.item.index();
var menuLevel = parseInt($("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-level"));
var menuId = $("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-id");
if (menuLevel == 2) {
var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","1").attr("data-menu-name");
alert(findAboveRowName);
}
if (menuLevel == 3) {
var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","2").attr("data-menu-name");
alert(findAboveRowName);
}
基本的に、変数「newIndex」はソート後の行の新しい位置を取得することになっています。menuLevel はそのテーブル行のデータ属性「menu-level」を取得することになっており、menuId はそのテーブル行の別のデータ属性を取得することになっています。 .
具体的には、テーブルの行で最も近い、前のメニュー レベルの属性を探しています。そのため、メニュー レベル属性が 2 のテーブル行が移動されると、メニュー レベル属性が 1 の最も近いテーブル行が検索されます。
必要に応じて使用している完全な jquery ソート可能スクリプト
$("#sortable").sortable({
update: function(event, ui) {
var serial = $('#sortable').sortable('serialize');
var newIndex = ui.item.index();
var menuLevel = parseInt($("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-level"));
var menuId = $("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-id");
if (menuLevel == 2) {
var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","1").attr("data-menu-name");
alert(findAboveRowName);
// $.post("./menu-controller.php", { adjustParent: true, id: menuId, parent: findAboveRowName });
}
if (menuLevel == 3) {
var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","2").attr("data-menu-name");
alert(findAboveRowName);
// $.post("./menu-controller.php", { adjustParent: true, id: menuId, parent: findAboveRowName });
}
$.ajax({
url: "./menu-controller.php",
type: "post",
data: serial,
success: function() {
$("#sortable").load("./menu-manager.php #menu-table", function() {
$.get('./menu-admin.js');
});
},
error: function(){
alert("A problem occurred when moving this menu item. Please try again or contact support.");
}
});
},
handle:'.move-item',
connectWith:'#menu-table',
placeholder: "highlight",
containment: "parent",
revert: true,
tolerance: "pointer",
items: 'tbody > *'
});