如何解决表格行排序，使用jQuery UI排序的前三个单元格除外
表行排序，除了前三个使用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>
解决方法
请考虑以下内容：
$(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类添加到不应排序的行中。用户必须“解锁”表格才能对其进行排序。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
