jQuery ui可排序如何更改表结构中的上一个/下一个项目位置
Posted
技术标签:
【中文标题】jQuery ui可排序如何更改表结构中的上一个/下一个项目位置【英文标题】：jQuery ui sortable how to change prev/next item position in table structure 【发布时间】：2020-05-20 08:12:45 【问题描述】：我正在使用 jQuery ui sortable 对所有 td 元素以及具有特定类的父 tr 元素进行排序。父 tr 元素排序工作正常。但是在对 td 元素进行排序时，前一个 td 元素会移动到被删除的项目旁边。
如何更改前一个 td 元素的位置以不移动到下一个位置？
简而言之，如何在排序时强制位置在 td 元素之间交换？
JS fiddle
html代码
<table id="repeatable-fieldset-one" class="ui-sortable">
<thead>
<tr>
<th >Remove Row</th>
<th >Name</th>
<th >PDF</th>
</tr>
</thead>
<tbody>
<tr class="main_row main_row_static indexid_0" data-mainindex="0" data-totalpdfurlcount="5">
<td>
<a class="button remove-row" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
<td>
<input type="text" class="widefat" name="repeatable_fields[0][name]" value="First">
</td>
<td class="pdf_data" data-count_pdf="0">
<input type="text" id="count_pdf_input-0" class="widefat widefatpdfs upload_image1" name="repeatable_fields[0][url][]" value="1">
<input class="upload_image_button" data-count_pdf="0" type="button" value="Select PDF">
<a class="button add-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-plus"></span>
</a>
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
<tr class="sub_pdf_files indexid_0">
<td></td>
<td></td>
<td class="pdf_data_inner">
<input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][1]" value="1.1">
<input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
<tr class="sub_pdf_files indexid_0">
<td></td>
<td></td>
<td class="pdf_data_inner">
<input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][2]" value="1.2">
<input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
<!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
<tr class="sub_pdf_files indexid_0">
<td></td>
<td></td>
<td class="pdf_data_inner">
<input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][3]" value="1.3">
<input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
<tr class="sub_pdf_files indexid_0">
<td></td>
<td></td>
<td class="pdf_data_inner">
<input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][4]" value="1.4">
<input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
<!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
</tbody>
<tbody>
<tr class="main_row main_row_static indexid_1" data-mainindex="1" data-totalpdfurlcount="6">
<td>
<a class="button remove-row" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
<td>
<input type="text" class="widefat" name="repeatable_fields[1][name]" value="Second">
</td>
<td class="pdf_data" data-count_pdf="1">
<input type="text" id="count_pdf_input-1" class="widefat widefatpdfs upload_image1" name="repeatable_fields[1][url][]" value="2">
<input class="upload_image_button" data-count_pdf="1" type="button" value="Select PDF">
<a class="button add-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-plus"></span>
</a>
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
<tr class="sub_pdf_files indexid_1">
<td></td>
<td></td>
<td class="pdf_data_inner">
<input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][1]" value="2.1">
<input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
<!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
<tr class="sub_pdf_files indexid_1">
<td></td>
<td></td>
<td class="pdf_data_inner">
<input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][2]" value="2.3">
<input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
<!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
<tr class="sub_pdf_files indexid_1">
<td></td>
<td></td>
<td class="pdf_data_inner">
<input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][3]" value="2.4">
<input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
<!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
<tr class="sub_pdf_files indexid_1">
<td></td>
<td></td>
<td class="pdf_data_inner">
<input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][4]" value="2.5">
<input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
<!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
<tr class="sub_pdf_files indexid_1">
<td></td>
<td></td>
<td class="pdf_data_inner">
<input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][5]" value="2.6">
<input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
<!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
<a class="button remove-pdf" href="javascript:void(0)">
<span class="dashicons dashicons-no-alt"></span>
</a>
</td>
</tr>
</tbody>
</table>
js代码
$("#repeatable-fieldset-one").sortable(
items: "tbody",
handle: ".main_row_static"
);
$("tbody").sortable(
items: "tr > td:last-child",
update: function(event, ui)
,
stop: function(event, ui)
if ($(ui.item).parent('.main_row').length > 0)
var get_pdf_count = $(ui.item).parent('.main_row').attr('data-mainindex');
$(ui.item).switchClass('pdf_data_inner', 'pdf_data');
$(ui.item).attr("data-count_pdf", get_pdf_count);
else
$(ui.item).switchClass('pdf_data', 'pdf_data_inner');
$(ui.item).removeAttr("data-count_pdf");
);
【问题讨论】：
【参考方案1】：您必须将行作为一个整体进行排序，否则您正在排序的 td 将与另一个 td 放在同一行中。
所以，将items: "tr > td:last-child" 更改为items: "tr:not(.main_row)。
如果您想将这些项目分类到另一个 tbody 中，假设您想将 2.1 放在 1.1 之前，您可以使用选项 connectWith: 'tbody'。
这里更新fiddle
【讨论】：
以上是关于jQuery ui可排序如何更改表结构中的上一个/下一个项目位置的主要内容，如果未能解决你的问题，请参考以下文章