2011-07-25 40 views
0

訂購我有這樣的html代碼:我怎樣才能做一個排序複選框列表與數組

<div id="format"> 
<ul id="sortable"> 
<li id="item1"> 
     <input class="checkbox" id="item1" name="params[checklist][]" value="item1" checked="checked" type="checkbox"> 
     <label for="item1">Item 1</label> 
</li> 
<li id="item2"> 
     <input class="checkbox" id="item2" name="params[checklist][]" value="item2" checked="checked" type="checkbox"> 
     <label for="item2">Item 2</label> 
</li> 
<li id="item3"> 
     <input class="checkbox" id="item3" name="params[checklist][]" value="item3" checked="checked" type="checkbox"> 
     <label for="item3">Item 3</label> 
     </li> 
</ul> 
</div> 
<input name="params[positions]" id="paramspositions" value="item2,item3,item1" class="text_area" size="50" type="text" /> 

和這個jQuery/UI代碼:

jQuery.noConflict(); 
//function that restores the list order from #paramspositions default value 
function restoreOrder() { 
    var list = jQuery("#format ul"); 
    if (list == null) return 

    var old = jQuery("#paramspositions").val(); 
    // make array from saved order 
    var IDs = old.split(","); 

    // fetch current order 
    var items = list.sortable("toArray"); 

    // make array from current order 
    var rebuild = new Array(); 
    for (var v = 0, len = items.length; v < len; v++) { 
     rebuild[items[v]] = items[v]; 
    } 

    for (var i = 0, n = IDs.length; i < n; i++) { 

     // item id from saved order 
     var itemID = IDs[i]; 

     if (itemID in rebuild) { 

      // select item id from current order 
      var item = rebuild[itemID]; 

      // select the item according to current order 
      var child = jQuery("ul.ui-sortable").children("#" + item); 

      // select the item according to the saved order 
      var savedOrd = jQuery("ul.ui-sortable").children("#" + itemID); 

      // remove all the items 
      child.remove(); 

      // add the items in turn according to saved order 
      // we need to filter here since the "ui-sortable" 
      // class is applied to all ul elements and we 
      // only want the very first! You can modify this 
      // to support multiple lists - not tested! 
      jQuery("ul.ui-sortable").filter(":first").append(savedOrd); 
     } 
    } 
} 

jQuery(function() { 

    jQuery("#sortable").sortable({ 
     opacity: 0.6, 
     update: function(event, ui) { 
      aggiornaTesto(); 
     } 
    }); 

    //function that updates #paramspositions value on check/uncheck and on moving checkbox 
    function aggiornaTesto() { 
     ids = []; 
     jQuery("input:checkbox:checked").each(function(n) { 
      ids.push(jQuery(this).attr("value")); 
     }); 
     jQuery("#paramspositions").val(ids); 
    } 

    // here, we reload the saved order 
    restoreOrder(); 
    jQuery(".checkbox").button(); 
    jQuery("#sortable input").click(aggiornaTesto); 
}); // JavaScript Document 

這是我的問題:

  • 在這種情況下,所有作品除了更新輸入值檢查/取消選中
  • 如果我刪除標籤上的標籤標籤除了restoreOrder之外的所有作品加載

如何使這項工作?基本上我需要一個可排序的複選框列表,在加載頁面的列表順序依賴於一個數組,並在檢查/取消選中和移動項目更新輸入值。 非常感謝你,對我的英語感到抱歉。

回答

0

我找到了解決方案。問題是,李和輸入有相同的ID,如果我在每一個立ID只添加下劃線像這樣:

<li id="item1_"> 
... 
<li id="item3_"> 

後,我已經編輯在restoreOrder這一行()jQuery函數:

var itemID = IDs[i]; 

與此:

var itemID = IDs[i]+"_"; 

,但只有一個問題,現在,如果在#paramspositions看重那裏是隻有2例如價值,我怎麼可以把上面這2個值,和其他人底部?

相關問題