3

我有一個數據的表格,需要使其排序。排序完成後,每行需要更改其tr id,輸入id和名稱屬性。jQuery的排序輸入

這裏我只爲name屬性來完成它。但是,當保存數據時,如果進行了多於一次的分類,這些行不是有序的。可能我錯過了一些東西。

而且有如此的方式一次更改所有這些屬性?

$("#languages > tbody").sortable({ 
     items: 'tr', 
     update: function(event, ui) { 
      var result = $('#languages > tbody').sortable('toArray'); 
      for(i=0; i<result.length; i++) { 
       $('#Setting3Value'+i+'Language').attr('name', 'data[Setting][3][value]['+result[i]+'][language]'); 
      } 
      for(i=0; i<result.length; i++) { 
       $('#'+i).attr('id', result[i]); 
       $('#Setting3Value'+i+'Language').attr('id', 'Setting3Value'+result[i]+'Language'); 
      } 
     } 
    }); 

和HTML:

<table id="languages"> 
    <tbody> 
             <tr id="0"> 
         <td><div class="input text"><input type="text" id="Setting3Value0Language" rel="" value="English" name="data[Setting][3][value][0][language]"/></div></td> 
         <td><div class="input text"><input type="text" id="Setting3Value0Alias" rel="" value="eng" name="data[Setting][3][value][0][alias]"/></div></td> 
         <td/> 
        </tr> 
             <tr id="1"> 
         <td><div class="input text"><input type="text" id="Setting3Value3Language" rel="" value="French" name="data[Setting][3][value][1][language]"/></div></td> 
         <td><div class="input text"><input type="text" id="Setting3Value1Alias" rel="" value="fre" name="data[Setting][3][value][1][alias]"/></div></td> 
         <td/> 
        </tr> 
<!-- and so on ... --> 
    </tbody> 
</table> 

而且是有可能的錶行id的設置name-1爲前。 ?

編輯:我設法做了我需要的使用id的臨時值,因爲它變得非常混亂。我不認爲這是最好的解決方案,所以我很期待。還需要列出每個輸入。

這裏是我的更新功能:

  for(i=0; i<result.length; i++) { 
       $('#'+result[i]).attr('id', 'temp-'+i); 
       $('#Setting3Value'+result[i]+'Language').attr('id', 'temp-Setting3Value'+i+'Language'); 
       $('#Setting3Value'+result[i]+'Alias').attr('id', 'temp-Setting3Value'+i+'Alias'); 
      } 

      for(i=0; i<result.length; i++) { 
       $('#temp-'+i).attr('id', i); 
       $('#temp-Setting3Value'+i+'Language').attr('id', 'Setting3Value'+i+'Language'); 
       $('#temp-Setting3Value'+i+'Alias').attr('id', 'Setting3Value'+i+'Alias'); 

       $('#Setting3Value'+i+'Language').attr('name', 'data[Setting][3][value]['+i+'][language]'); 
       $('#Setting3Value'+i+'Alias').attr('name', 'data[Setting][3][value]['+i+'][alias]'); 
      } 

回答

0

排序HTML元素,你有沒有試過以下 jQuery插件http://tinysort.sjeiti.com/

I'ved使用JQuery的UI排序此相結合。這是一個非常強大和有用的庫,可以通過特定的屬性對元素進行排序。

希望這會有所幫助。

編輯:(更新TR ID的排序容器中移動的項目的)

<script type ="text/javascript"> 
    $(function() { 
     $("#languages > tbody").sortable({ 
      stop: function (e, ui) { 
       $(this).children("tr").each(function() { 
        $(this).attr("id", $(this).index()); 
       }); 
      } 
     }); 
    }); 
</script> 
+0

很好的插件,可能會是有用的地方,但在這裏我需要的元素的屬性改取決於它們的排序順序 – 2012-02-27 09:15:08