1

jQuery プラグインhttp://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/を Catalog_Products テーブルに接続しようとしていますが、それを行いました。このコード (jQuery コード) を grid.js ファイルに挿入します。

...

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 がキープレスを使用してバインド機能を変更したためだと思います。この問題で私を助けてくれてとても感謝しています。

4

1 に答える 1

4

このコンポーネントを使用するためだけに、jQuery を管理パネルに含める意味があるかどうかはわかりません。Magento には既に Prototype + Scriptaculous が用意されているため、それらを有効にする必要さえありません。使用できるコンポーネントは Sortable で、必要なすべてのことを行います: 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開発を楽しんでください！

于 2012-08-15T17:22:40.563 に答える