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开发玩得开心！