使用 Jquery UI 排序除前三个单元格外的表行排序答案

【问题标题】：Table row sorting except first three cells using Jquery UI Sorting使用 Jquery UI 排序除前三个单元格外的表行排序
【发布时间】：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>

【问题讨论】：

请提供一个最小的、可重现的例子：stackoverflow.com/help/minimal-reproducible-example

标签： jquery jquery-ui jquery-ui-sortable jquery-ui-draggable sortablejs

【解决方案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 类添加到不应排序的行中。用户必须“解锁”表格才能对其进行排序。

【讨论】：

感谢您的回复。我不是在寻找整行。我正在寻找第一个第二个和第三个单元格应该是固定的，其余的将是可排序的。
@WpFinder 请说明您是希望它们在行中排序还是在表中排序。如果是后者，他们应该保留在他们的列中还是可以在任何列中排序。请仔细描述您的描述。