动态添加 jQuery UI Sortable 特征到 table

Question

我有一个 table（实际上它是我公司提供的自定义框架的一部分，所以我不控制它的代码），它是通过 ajax 填充的。我想将 jQuery sortable functionality 添加到它的行中，除了 tbody 中的第一行（其中有过滤器）。当 table 加载时将应用此功能，我可以使用回调功能（由框架提供）在 ajax 完成时动态添加功能。我该怎么做才能解决这个问题？

<div class="divGridContent box-body table-responsive" id="divSimilarProductGroupGridContent">
    <table class="tblGrid table table-bordered table-striped table-hover" id="tblSimilarProductGroup" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th class="thSelectAll" width="30px"><input name="checkgroup" type="checkbox" class="check" id="SimilarProductGrouptopcheckbox"> </th>
                <th style="display: none;" width="" datafield="a_similarproductgroupid" filtermapping=""></th>
                <th style="min-width:;" datafield="a_similargroup" filtermapping="a_similargroup" class="sorting_asc">Similar Product Group</th>
            </tr>
        </thead>

        <tbody>
            <tr class="trFilter">
                <td>&nbsp;</td>
                <td width="" field="a_similargroup"><input ftype="%LIKE%" id="a_similargroup" type="text" style="width:100%;" value=""></td>
            </tr>

            <tr id="trSimilarProductGroup1">
                <td class="tdSelect"><input type="checkbox" class="check" id="chk1"> </td>
                <td width="" field="a_similarproductgroupid" style="display: none;">1</td>
                <td width="" field="a_similargroup">1,22,24,32,55,89,90,91</td>
            </tr>

            <tr id="trSimilarProductGroup2">
                <td class="tdSelect"><input type="checkbox" class="check" id="chk2"> </td>
                <td width="" field="a_similarproductgroupid" style="display: none;">2</td>
                <td width="" field="a_similargroup">78,89,90</td>
            </tr>

            <tr id="trSimilarProductGroup3">
                <td class="tdSelect"><input type="checkbox" class="check" id="chk3"> </td>
                <td width="" field="a_similarproductgroupid" style="display: none;">3</td>
                <td width="" field="a_similargroup">89,98</td>
            </tr>

            <tr id="trSimilarProductGroup4">
                <td class="tdSelect"><input type="checkbox" class="check" id="chk4"> </td>
                <td width="" field="a_similarproductgroupid" style="display: none;">4</td>
                <td width="" field="a_similargroup">23,34,78,90,57768</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

您可以配置哪些项目可以四处移动：

$("#tblSimilarProductGroup tbody").sortable({
  items: "tr:not(.trFilter)"
});

动态添加 jQuery UI Sortable 特征到 table

Add jQuery UI Sortable feature to a table dynamically

ajax

jquery

jquery-ui