Question

我有一张代表按钮的表格。每个Button都有三个属性。为了表示这个结构我正在使用表，其中第一行是按钮的名称，然后按钮的三个属性在接下来的三行中。现在我想让用户重新排序按钮。为此我使用JQUERY Sortable插件。它使tbody可以排序，我可以拖放各行。

我想要的是，不是拖放单个行，而是用户应该能够在一个组中拖动四行（名称+按钮的属性）如何实现这一目标。

我在这个开头有这样的表

<table class="table table-bordered table-striped table-highlight"
				id="tab_logic">
				<tbody></tbody>
			</table>

我以这种方式追加行

function loadTable(num) {
			$('#tab_logic').empty();
			
			for (var i=1 ;i<=num;i++)   {  
			$('#tab_logic').append("<div class = 'editrow'>");
			$('#tab_logic').append("<tr class='321'><td colspan='3' align='center'><p id='addrp"+i+"'><strong>Action Button "+i+" Properties</strong></p></td></tr>");
			$('#tab_logic').append("<tr class='123'><td align='center' style='width:15%'><p id='addac"+i+"'><strong>Action</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpac"+i+"'>Action</p></td><td><input type ='text' class ='form-control' id='addiac"+i+"' name ='addiac"+i+"' placeholder='Enter Action'</td> </tr>");
			$('#tab_logic').append("<tr class='123'><td align='center' style='width:15%'><p id='addat"+i+"'><strong>Action Text</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpat"+i+"'>Action Text</p></td><td><input type ='text' class ='form-control' id='addiat"+i+"' name ='addiat"+i+"' placeholder='Enter Action Text'</td> </tr>");
			$('#tab_logic').append("<tr class='123'><td align='center' style='width:15%'><p id='addcc"+i+"'><strong>Color Code</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpcc"+i+"'>Color Code</p></td><td><input type ='text' class ='form-control' id='addicc"+i+"' name ='addicc"+i+"' placeholder='Enter Color Code'</td> </tr>");
			$('#tab_logic').append("</div>");
			
			}
			
		}

我希望循环中运行的行可以作为一个而不是单独排序进一步使用jQuery UI可排序函数，如建议

$("#tab_logic").sortable({
				items: "div",
 			    helper: "clone"
 			}).disableSelection();

但它没有按要求工作。我还尝试了其他可能的items属性组合，但它们也没有用。

Answer 1

嗨，看看http://api.jqueryui.com/sortable/#option-items

您可以在tbody标记中包装每4行，并可以将可排序项设置为tbody。

//initialization 
$( ".table" ).sortable();
// Setter
$( ".table" ).sortable( "option", "items", ".sort-able-tbody" );

请检查此codepen。 http://codepen.io/shahidbasheer/pen/WxRgOe

更新：你不能在div标签中包装表行，因为它不是有效的html。 ref I need to wrap up table row into div

如何使Jquery可排序插件在表中使用多行来拖动

1 个答案: