動態添加jQuery UI可排序功能到一個表

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)" 
});