Magento Catalog_Products在jQuery中的拖放表admin

Question

我試圖連接jQuery插件http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/與Catalog_Products表，我做到了。我到grid.js文件中注入代碼（jQuery代碼）：

... 

initGrid : function(){ 
    if(this.preInitCallback){ 
     this.preInitCallback(this); 
    } 
    if($(this.containerId+this.tableSufix)){ 
     this.rows = $$('#'+this.containerId+this.tableSufix+' tbody tr'); 
     for (var row=0; row<this.rows.length; row++) { 
      if(row%2==0){ 
       Element.addClassName(this.rows[row], 'even'); 
      } 

      Event.observe(this.rows[row],'mouseover',this.trOnMouseOver); 
      Event.observe(this.rows[row],'mouseout',this.trOnMouseOut); 
      Event.observe(this.rows[row],'click',this.trOnClick); 
      Event.observe(this.rows[row],'dblclick',this.trOnDblClick); 

      if(this.initRowCallback){ 
       try { 
        this.initRowCallback(this, this.rows[row]); 
       } catch (e) { 
        if(console) { 
         console.log(e); 
        } 
       } 
      } 
     } 
    } 
    if(this.sortVar && this.dirVar){ 
     var columns = $$('#'+this.containerId+this.tableSufix+' thead a'); 

     for(var col=0; col<columns.length; col++){ 
      Event.observe(columns[col],'click',this.thLinkOnClick); 
     } 
    } 
    this.bindFilterFields(); 
    this.bindFieldsChange(); 
    if(this.initCallback){ 
     try { 
      this.initCallback(this); 
     } 
     catch (e) { 
      if(console) { 
       console.log(e); 
      } 
     } 
    } 
    // Drag and drop 
    jQuery(document).ready(function() { 
     // Initialise the table 
     jQuery("#catalog_category_products_table tbody").tableDnD({ 
      onDrop: function() { 
       jQuery("#catalog_category_products_table tbody tr").each(function(index) { 
        jQuery("#catalog_category_products_table tbody tr td input.input-text:eq("+index+")").removeAttr('value'); 
        jQuery("#catalog_category_products_table tbody tr td input.input-text:eq("+index+")").attr('value', index + 1); 
       }); 
      } 
     }); 
    }); 
}, 
getContainerId : function(){ 
    return this.containerId; 
}, 

... 

下降後我排序函數的輸入值如1,2-排序......這工作得很好。問題是，當我保存這個產品時，新的輸入值沒有保存，我想這是因爲magento我使用了一些按鍵，改變綁定功能。我將非常感謝幫助解決這個問題。

Answer 1

我不確定將jQuery包含到管理面板中是否合理，只需使用此組件即可。 Magento已經有了Prototype + Scriptaculous，你甚至不需要啓用它們。您可以使用該組件是可排序的，這並不需要所有的東西： http://madrobby.github.com/scriptaculous/sortable-create/

而且它不修改grid.js文件是一個好主意，你可以很容易地包裹在prototypejs框架中任一類方法。對於通過佈局更新這個目的，你可以包括具有這樣的內容自定義JS文件：

varienGrid = Class.create(varienGrid, { 
    initGrid: function ($super) { 
     $super(); // Calling parent method functionality 
     // Doing your customization 
    } 
}); 

在這種情況下，所有網格對象實例化這個頁面上會調用您的自定義方法的代碼，你有可升級的安全的代碼。

爲您的特定情況下，代碼可能類似於以下內容：

varienGrid = Class.create(varienGrid, { 
    initGrid: function ($super) { 
     $super(); // Calling parent method functionality 
     var table = $(this.containerId+this.tableSufix); 
     this.sortedContainer = table.down('tbody'); 
     Sortable.create(this.sortedContainer.identify(), { 
      tag: 'TR', 
      dropOnEmpty:true, 
      containment: [this.sortedContainer.identify()], 
      constraint: false, 
      onChange: this.updateSort.bind(this) 
     }); 
    }, 
    updateSort: function() 
    { 
     var rows = this.sortedContainer.childElements(); // Getting all rows 
     for (var i = 0, l = rows.length; i < l; i++) { 
      // Check if input is available 
      if (rows[i].down('input[type="text"]')) { 
       rows[i].down('input[type="text"]').value = i + 1; 
       // Updating is changed flag for element 
       rows[i].down('input[type="text"]').setHasChanges({}); 
      } 
     } 
    } 
}); 

也可以作爲元素，有可能它們中的一些被禁用，並且不會被處理。您可以在updateSort方法中調試每個元素。

與Magento開發玩得開心！