JQueryUI可排序的thead和tbody在拖动隐藏两个字段的行时缩小
Posted
技术标签:
【中文标题】JQueryUI可排序的thead和tbody在拖动隐藏两个字段的行时缩小【英文标题】：JQueryUI sortable thead and tbody shrinked while dragging row with two fields hidden 【发布时间】：2018-04-29 22:52:29 【问题描述】：我有一个包含不同行和字段的表。在一行中，我有两个带有display:none; 的字段，当我拖动这些行时，在<tbody> 和<thead> 中有横向填充的效果，表格没有缩小，表格的元素是的。
在第一行的下一个 JsFiddle 中无法正常工作，但在第二行中只有一个带有 display:none; 的字段可以正常工作。
有什么问题可以问。
错误示例
拖动时的表格：
起初我认为可以通过查找<td> 类.hidden-td（具有display: none; 的类）元素的数量并查找具有.placeholder-style 类的元素（是具有在进行拖动时生成的<tr> 的类）并添加许多<td>，就像我正在移动的<tr> 一样，但不是，不起作用。
我知道这条线有多少字段.hidden-td
var numcells = $('.hidden-td').length;
问题
第一行有 9 个元素，另一行有 8 个。在我的函数 start() 中，我只在占位符中隐藏了一列，所以当我拖动第一行时，剩下一列没有应用.hidden-td 类，这就是为什么在列的末尾有一个空格。
我该如何解决这个问题？
https://jsfiddle.net/w52m5ggb/20/
【问题讨论】：
看看***.com/questions/39171688/…这能解决你的问题吗？ 在 JsFiddle 中解决问题，但不是在实际代码中，请参阅我将附加的示例。 我想我知道为什么在我的真实代码中不起作用似乎是因为我有两个字段，如果有两个字段带有display:none; 它不起作用。 jsfiddle.net/w52m5ggb/19
我不明白到底是什么问题...小提琴工作正常吗？
我会修改问题以使其更容易，给我几分钟@ProEvilz 谢谢
【参考方案1】：
在过去几天里，我自己一直在为可排序插件而苦苦挣扎，我认为需要做以下更改：
添加帮助器函数以在帮助器（可拖动对象）上创建正确的大小以具有正确的大小。
在 start 函数中，将项目 html 添加到占位符 html 中，以使占位符与原来的保持一致。
代码：
$("#tbodyproject").sortable(
items: "> tr",
appendTo: "parent",
helper: "clone",
placeholder: "placeholder-style",
start: function(event, ui)
$(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')
//copy item html to placeholder html
ui.placeholder.html(ui.item.html());
//hide the items but keep the height/width.
ui.placeholder.css('visibility', 'hidden');
,
stop: function(event, ui)
ui.item.css('display', '')
,
//add helper function to keep draggable object the same width
helper: function(e, tr)
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width());
);
return $helper;
,
update: function( event, ui )
let newOrder = $(this).sortable('toArray');
$.ajax(
type: "POST",
url:'/admin/projects/updateOrder',
data: ids: newOrder
)
.done(function( msg )
location.reload();
);
).disableSelection();
Updated fiddle
【讨论】：
【参考方案2】：创建占位符时，它只取行中的单元格数，并用这些单元格创建一个空行。
您正在向第 n 个孩子 2 添加类 hidden-td，因此您隐藏了一个单元格。这适用于第 2 行及以上，但不适用于第一行，因为该行中还有一个单元格。请参阅第 2 行的 占位符：
<td colspan="1"> </td><td colspan="1" class="hidden-td"> </td><td colspan="1"> </td><td colspan="1"> </td><td colspan="1"> </td><td colspan="1"> </td><td colspan="1"> </td><td colspan="1"> </td>
第一行：
<td colspan="1"> </td><td colspan="1" class="hidden-td"> </td><td colspan="1"> </td><td colspan="1"> </td><td colspan="1"> </td><td colspan="1"> </td><td colspan="1"> </td><td colspan="1"> </td><td colspan="1"> </td>
您可以做的是隐藏占位符中的每个单元格并仅显示您需要的数字。这可以通过 CSS 完成，如下所示：
.placeholder-style td
display: none;
.placeholder-style td:nth-child(-n+7)
display: table-cell;
结果：https://jsfiddle.net/3g3bt80e/1/
【讨论】：
我喜欢你这样做的方式，但有一个问题。检查这个版本jsfiddle.net/3g3bt80e/2我添加了一些css，就像我在我的真实代码中一样。【参考方案3】：你可以试试下面sn-p中的方法。
$("#tabs").tabs();
$("#tbodyproject").sortable(
items: "> tr",
appendTo: "parent",
helper: "clone",
placeholder: "placeholder-style",
start: function(event, ui)
ui.helper.css('display', 'table');
// console.log(ui.placeholder.html())
,
stop: function(event, ui)
ui.item.css('display', '')
,
update: function( event, ui )
let newOrder = $(this).sortable('toArray');
$.ajax(
type: "POST",
url:'/admin/projects/updateOrder',
data: ids: newOrder
)
.done(function( msg )
location.reload();
);
).disableSelection();img
width: 100px;
.hidden-td
display:none;
.table
background-color:green;
border:0;
width:100%;
.trdrag
background-color:yellow;
.trdrag.ui-sortable-handle td.tdslug, .trdrag.ui-sortable-handle td.tdslug img
text-align:center;
align-items:center;
display: table-cell;
justify-content: center;
.trdrag.ui-sortable-handle td.tdslug
white-space:normal;
word-wrap: break-word;
.trdrag.ui-sortable-handle td.tdslug img
padding-left:1rem;
.trdrag.ui-sortable-handle
text-align:center;
align-items:center;
display: table-row;
justify-content: center;
width:100%;
margin-left: .3rem;
.thcenter
background-color:grey !important;
.ui-sortable-helper
left:0px!important;
.idrow
width:5%;
.tdvisible
width:5%;
.tdslug
width:10%;
.tdimg
width:15%;
.tdorder
width:20%;
.tdacciones
width:40%;
.placeholder-style td
display: none;
.placeholder-style td:nth-child(-n+7)
display: table-cell;
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
<div class="col-md-12">
<div id="table1">
<table class="table">
<thead>
<tr>
<th class="thcenter">ID</th>
<th class="thcenter">Visible</th>
<th class="thcenter">Nombre</th>
<th class="thcenter">Header</th>
<th class="thcenter">Home</th>
<th class="thcenter">Orden</th>
<th class="thcenter"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
</tr>
</thead>
<tbody id="tbodyproject">
<tr id="id1" class="trdrag">
<td class="idrow tdcenter"><p id="margindata">1</p></td>
<td class="hidden-td" style="display:none;">Testing</td>
<td class="hidden-td" style="display:none;">Testing2</td>
<td class="tdcenter tdvisible">
Yes
</td>
<td class="tdslug"><p id="margindata">Slug</p></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
<td class="tdacciones">
<form method="POST" action="route('admin.projects.destroy',$project->id)" onsubmit="return ConfirmarBorrar()">
<a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter"><p id="margindata">2</p></td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible">
Yes
</td>
<td class="tdslug"><p id="margindata">Slug</p></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
<td class="tdacciones">
<form method="POST" action="route('admin.projects.destroy',$project->id)" onsubmit="return ConfirmarBorrar()">
<a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter"><p id="margindata">3</p></td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible">
Yes
</td>
<td class="tdslug"><p id="margindata">Slug</p></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
<td class="tdacciones">
<form method="POST" action="route('admin.projects.destroy',$project->id)" onsubmit="return ConfirmarBorrar()">
<a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter"><p id="margindata">1</p></td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible">
Yes
</td>
<td class="tdslug"><p id="margindata">Slug</p></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
<td class="tdacciones">
<form method="POST" action="route('admin.projects.destroy',$project->id)" onsubmit="return ConfirmarBorrar()">
<a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter"><p id="margindata">4</p></td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible">
Yes
</td>
<td class="tdslug"><p id="margindata">Slug</p></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
<td class="tdacciones">
<form method="POST" action="route('admin.projects.destroy',$project->id)" onsubmit="return ConfirmarBorrar()">
<a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id2" class="trdrag">
<td class="idrow tdcenter"><p id="margindata">5</p></td>
<td class="tdcenter tdvisible">
Yes
</td>
<td class="tdslug"><p id="margindata">Slug</p></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder"><p id="margindata">Order 2</p></td>
<td class="tdacciones">
<form method="POST" action="route('admin.projects.destroy',$project->id)" onsubmit="return ConfirmarBorrar()">
<a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 2">Delete
</form>
</td>
</tr>
</tbody>
</table>
<br><br>
</div>
</div>【讨论】：
以上是关于JQueryUI可排序的thead和tbody在拖动隐藏两个字段的行时缩小的主要内容，如果未能解决你的问题，请参考以下文章