Question

我有一张桌子（实际上它是我公司提供的自定义框架的一部分，因此我无法控制其代码），这是通过ajax填充的。我想在其行中添加jQuery sortable functionality，除了tbody中的第一行（其中包含过滤器）。当表加载时将应用此功能，我可以使用回调功能（由框架提供）在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可排序功能添加到表中

1 个答案: