使用 Jquery UI 排序除前三个单元格外的表行排序
Posted
技术标签:
【中文标题】使用 Jquery UI 排序除前三个单元格外的表行排序【英文标题】：Table row sorting except first three cells using Jquery UI Sorting 【发布时间】：2021-01-07 06:15:07 【问题描述】：使用 Jquery UI 排序的表行排序（前三个单元格除外）。我为整行做了，但我需要对具有单个悬停按钮位置的特定单元格进行排序。
我找到了一个link。 UI 结构完全不同，但概念相同。 我在这个link2 中的用户界面。
单表概念是否可行？
我的代码：
#cursorrow
position: relative;
#cursorrow i.fa.fa-arrows
position: absolute;
top: -11px;
left: -2px;
color: #702065;
display: none;
cursor: move;
td.customwidth.key-grid-column:hover i.fa.fa-arrows
display: block !important;
.equibackstyle.Sequence table .grid-row
height: 40px;
.equibackstyle.Sequence table .grid-row:hover td
background-color: transparent !important;
tr.grid-row.ui-sortable-handle.ui-sortable-helper
height: 40px !important;
.equibackstyle.Sequence table .grid-row
height: 40px !important;
box-shadow: none !important;
border: none !important;
width: 100% !important;
$(document).ready(function ()
$(".sorttable").sortable();
);
<table class="table table-striped" style="border-collapse: collapse; border-spacing: 0; padding: 0;">
<thead>
<tr style="height:0 !important">
<th class="key-grid-header-column" style="width: 10%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="" data-toggle="tooltip">
<div class="th-inner">
<span class="key-grid-header-column-text">
Title 1
</span>
</div>
</th>
<th class="key-grid-header-column" style="width: 10%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="" data-toggle="tooltip">
<div class="th-inner">
<span class="key-grid-header-column-text">
Title 2
</span>
</div>
</th>
<th class="key-grid-header-column" style="width: 10%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="" data-toggle=" tooltip">
<div class="th-inner">
<span class="key-grid-header-column-text">Title 3 </span>
</div>
</th>
<th class="key-grid-header-column" style="width: 10%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="" data-toggle=" tooltip">
<div class="th-inner">
<span class="key-grid-header-column-text">Title 4 </span>
</div>
</th>
<th class="key-grid-header-column" style="width: 10%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="" data-toggle=" tooltip">
<div class="th-inner">
<span class="key-grid-header-column-text">Title 5 </span>
</div>
</th>
<th class="key-grid-header-column" style="width: 10%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="" data-toggle=" tooltip">
<div class="th-inner">
<span class="key-grid-header-column-text">Title 6 </span>
</div>
</th>
<th class="key-grid-header-column" style="width: 10%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="" data-toggle=" tooltip">
<div class="th-inner">
<span class="key-grid-header-column-text"> Title 7
</span>
</div>
</th>
<th class="key-grid-header-column" style="width: 10%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="" data-toggle=" tooltip">
<div class="th-inner">
<span class="key-grid-header-column-text">Title 8 </span>
</div>
</th>
<th class="key-grid-header-column" style="width: 10%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="" data-toggle=" tooltip">
<div class="th-inner">
<span class="key-grid-header-column-text">
</span>
</div>
</th>
</tr>
</thead>
<tbody class="sorttable">
<tr class="grid-row" style="">
<td class="customwidth key-grid-column ui-state-disabled" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">50
</span>
</td>
<td class="customwidth key-grid-column ui-state-disabled" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">Days Later
</span>
</td>
<td class="customwidth key-grid-column ui-state-disabled" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
<div class="form-group" style="margin-bottom:0px;">
<input autocomplete="off" class=" form-control key-form-control control-max-dimension " data-old-value="01/01/0001 00:00:00" id="" max="2200-12-31" min="1900-01-01" name="" style="" type="Date" value="">
</div>
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text" id="cursorrow" style=" ">
<i class="fa fa-arrows sortingicon" aria-hidden="true" style=" "></i>
Minor Service
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
CO1 Chargeable Service
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
$0.00
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
1
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
3
</span>
</td>
<td class="customwidth key-grid-column ui-state-disabled" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
<ul class="list-inline" style="float:right;">
<li>
<i class="fa fa-fw fa-pencil grid-btn " onclick="addservicefun()" title="Edit"></i>
</li>
<li>
<i class="fa fa-fw fa-trash grid-btn " onclick="dummyedit()" title="Edit"></i>
</li>
</ul>
</span>
</td>
</tr>
<tr class="grid-row" style="">
<td class="customwidth key-grid-column ui-state-disabled" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
51
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
Days Later
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
<span> 15/09/2020</span>
</span>
</td>
<td class="customwidth key-grid-column ui-state-disabled" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text" id="cursorrow" style=" ">
<i class="fa fa-arrows sortingicon" aria-hidden="true" style=" "></i>
Minor Service
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
CO1 Chargeable Service
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
$0.00
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
1
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
3
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
<ul class="list-inline" style="float:right;">
<li>
<i class="fa fa-fw fa-pencil grid-btn " onclick="addservicefun()" title="Edit"></i>
</li>
<li>
<i class="fa fa-fw fa-trash grid-btn " onclick="dummyedit()" title="Edit"></i>
</li>
</ul>
</span>
</td>
</tr>
<tr class="grid-row" style="">
<td class="customwidth key-grid-column ui-state-disabled" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
52
</span>
</td>
<td class="customwidth key-grid-column ui-state-disabled" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
Days Later
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
<span> 15/09/2020</span>
</span>
</td>
<td class="customwidth key-grid-column ui-state-disabled" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text" id="cursorrow" style=" ">
<i class="fa fa-arrows sortingicon" aria-hidden="true" style=" "></i>
Minor Service
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
CO1 Chargeable Service
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
$0.00
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
1
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
3
</span>
</td>
<td class="customwidth key-grid-column" title="" data-toggle="tooltip" style="width: 10%;text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span class="key-grid-column-text">
<ul class="list-inline" style="float:right;">
<li>
<i class="fa fa-fw fa-pencil grid-btn " onclick="addservicefun()" title="Edit"></i>
</li>
<li>
<i class="fa fa-fw fa-trash grid-btn " onclick="dummyedit()" title="Edit"></i>
</li>
</ul>
</span>
</td>
</tr>
</tbody>
</table>
【问题讨论】：
请提供一个最小的、可重现的例子：***.com/help/minimal-reproducible-example 【参考方案1】：考虑以下几点：
$(function()
$(".sorttable").sortable(
items: "> tr:not(.no-sort)"
).sortable("disable");
$(".sortables").click(function()
if ($(this).data("sort") == true)
$(this).data("sort", false).html("Locked");
$(".sorttable").sortable("disable");
else
$(this).data("sort", true).html("Unlocked");
$(".sorttable").sortable("enable");
)
);
基于您的小提琴的示例：https://jsfiddle.net/Twisty/cavomzbn/7/
这里的关键是将no-sort 类添加到不应排序的行中。用户必须“解锁”表格才能对其进行排序。
查看更多：https://api.jqueryui.com/sortable/#option-items
【讨论】：
感谢您的回复。我不是在寻找整行。我正在寻找第一个第二个和第三个单元格应该是固定的，其余的将是可排序的。 @WpFinder 请说明您是希望它们在行中排序还是在表中排序。如果是后者，他们应该保留在他们的列中还是可以在任何列中排序。请仔细描述您的描述。以上是关于使用 Jquery UI 排序除前三个单元格外的表行排序的主要内容，如果未能解决你的问题，请参考以下文章
jquery.ui 可使用表和 item:tr 排序，占位符困难
移除前一个单元格时，UiCollectionView 跳转到下一个单元格