行の並べ替えのための適切なイベントでjqGridを初期化する方法（並べ替え可能）

Question

Sortableドラッグアンドドロップ操作（3.6の並べ替え可能行の新機能）で発生したイベントを購読することができます。私はこの情報をストレージに保存し直す必要があります。私はhttp://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#drag_and_drop_rows_between_gridsからonstopとonstartを試しましたが、それは別のテーブルであるドロップターゲットでのみ動作するようです。 EDIT1

favoriteGrid = $('#favoriteGrid'); 

favoriteGrid.jqGrid({ 
    url: '/xxx/yyy/', 
    datatype: 'json', 
    ajaxGridOptions: { contentType: "application/json" }, 
    jsonReader: { 
     id: "ProductId", 
     cell: "", 
     root: function (obj) { return obj.rows; }, 
     page: function() { return 1; }, 
     total: function() { return 1; }, 
     records: function (obj) { return obj.rows.length; }, 
     repeatitems: true 
    }, 
    colNames: col_names, 
    colModel: col_model, 
    pager: $('#favoritePager'), 
    pginput: false, 
    rownumbers: true, 
    rownumWidth: 25, 
    rowNum: 1000, 
    autowidth: true, 
    height: '500px', 
    sortable: true, // enable column sorting 
    multiselect: true, // enable multiselct 
    gridview: true, 
    ignoreCase: true, 
    loadonce: true, // one ajax call per 
    loadui: 'block', 
    loadComplete: function() { 
     var gr = $('#favoriteGrid'); 
     fixGridSize(gr); 
    }, 
    onSelectRow: function (id) { 
     if (id && id !== lastSel) { 
      favoriteGrid.restoreRow(lastSel); 
      lastSel = id; 
     } 
     favoriteGrid.editRow(id, true); 
    }, 
    onstop: function (event, ui) { 
     alert("onstop"); 
    } 
}).jqGrid('navGrid', '#favoritePager', 
    { add: false, edit: false, del: false, search: true, refresh: false }, 
    {}, 
    {}, 
    {}, 
    { multipleSearch: true, showQuery: false }, 
    {}).jqGrid('sortableRows').jqGrid('gridDnD'); 

：

jqGridから生成されたテーブルがソート可能ですので、私が思う

var col_names = ['Qty', 'SFC', 'Item Nbr', 'Brand', 'Product', 'Catalog', 'Price', 'UOM', 'Case', 'Remarks', 'Wt.', 'Par', 'Purchased', 'ProductId', 'SortPriority']; 
var col_model = [ 
{ name: 'Quantity', index: 'Quantity', width: 22, sorttype: "number", editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 15} }, 
{ name: 'ProductAttributes', index: 'ProductAttributes', width: 50 }, 
{ name: 'ItemNum', index: 'ItemNum', width: 50, align: "right" }, 
{ name: 'BrandName', index: 'BrandName', width: 100 }, 
{ name: 'ProducName', index: 'ProducName', width: 150 }, 
{ name: 'Catalog', index: 'Catalog', width: 100 }, 
{ name: 'Price', index: 'Price', width: 40, sorttype: "number", align: "right" }, 
{ name: 'UOM', index: 'UOM', width: 30 }, 
{ name: 'CasePack', index: 'CasePack', width: 30 }, 
{ name: 'PackageRemarks', index: 'PackageRemarks', width: 80 }, 
{ name: 'AveWeight', index: 'AveWeight', width: 30, align: "right" }, 
{ name: 'Par', index: 'Par', width: 25, align: "right", editable: true, edittype: 'text', editoptions: { size: 15, maxlength: 15} }, 
{ name: 'LastPurchaseDate', index: 'LastPurchaseDate', width: 40, align: "right" }, 
{ name: 'ProductId', index: 'ProductId', hidden: true, key: true }, 
{ name: 'SortPriority', index: 'SortPriority', hidden: true } 
]; 

グリッド：

は

スティーブン

、列の をありがとうこれらのjquery関数を使用する問題は、initializ ation。

$('#favoriteGrid').bind("sortstart", function (event, ui) { 
    alert("start"); 
}); 

$('#favoriteGrid').bind("sortstop", function (event, ui) { 
    alert("stop"); 
}); 

Answer 1

これは良い質問です。あなたの代わりにブールtrueの機能としてsortableを使用する必要があります列で頼るの結果キャッチする

：

sortable: function (permutation) { 
    alert ('permutation=' + permutation.join(',')); 
} 

はthe demoを参照してください。あなたは「クライアント」と「日付」列の順序を変更する場合は、警告メッセージ

を受けるカラムのRN 'と行番号と複数選択チェックボックスのために内部で使用される「CB」は、第1であり、インデックス0を持ち、 1. 'Client'列にはインデックス2があり、 'Date'にはインデックス3があります。 'Client'と 'Date'列の並べ替え後のpermutation配列には[0, 1, 3, 2, 4, 5, 6, 7, 8, 9]

のようになります。​​のいくつかのオプションを設定する必要があります。sortableという別のフォーマットのパラメータをjqGrid：

sortable: { 
    update: function (permutation) { 
     alert ('permutation=' + permutation.join(',')); 
    }, 
    options: { 
     opacity: 0.8 
    } 
} 

はthe next demoを参照してください。

UPDATE：あなたは次の操作を行うことができ、行の並べ替えを監視するために：

favoriteGrid.jqGrid('sortableRows', { 
    update: function (ev, ui) { 
     alert ("The row with the id=" + ui.item[0].id + 
      " is moved. New row index is " + ui.item[0].rowIndex); 
    }}); 

the demoを参照してください。あなたは、次の

favoriteGrid.jqGrid('sortableRows', { 
    update: function (ev, ui) { 
     var item = ui.item[0], ri = item.rowIndex, itemId = item.id, 
      message = "The row with the id=" + itemId + 
       " is moved. The new row index is " + ri; 
     if (ri > 1 && ri < this.rows.length - 1) { 
      alert(message + '\nThe row is inserted between item with rowid=' + 
       this.rows[ri-1].id + ' and the item with the rowid=' + 
       this.rows[ri+1].id); 
     } else if (ri > 1) { 
      alert(message + 
       '\nThe row is inserted as the last item after the item with rowid=' + 
       this.rows[ri-1].id); 
     } else if (ri < this.rows.length - 1) { 
      alert(message + 
       '\nThe row is inserted as the first item before the item with rowid=' + 
       this.rows[ri+1].id); 
     } else { 
      alert(message); 
     } 
    }}); 

the next demoを参照して移動した行の新しい位置の前と後行に関するより詳細な情報を得ることができます。作品

Answer 2

現在の実装では、私は私がcorrectly..sorry探していたものを説明したとは思わない

$('#favoriteGrid').bind("sortstart", function (event, ui) { 
    // I had no need for this action 
}); 

$('#favoriteGrid').bind("sortstop", function (event, ui) { 

    var lista = jQuery("#favoriteGrid").getDataIDs(); 
    var items = []; 

    for (i = 0; i < lista.length; i++) { 
     var rowData = jQuery("#favoriteGrid").getRowData(lista[i]); 
     items.push({ productId: rowData.ProductId, rowNum: i }); 
    } 

    var fromFolder = $("#favorite-products > a.selected").attr("data-folderId"); 
    var payload = { FolderId: fromFolder, Items: items }; 

    $.blockUI({ message: '<h3><img src="../../../../Content/images/busy.gif" /> Saving your sort order...</h3>' }); 

    $.ajax({ 
     type: "POST", 
     url: "/xxx/yyy/zzz/", 
     data: JSON.stringify(payload), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      $("#favoriteStatusMessages").html(data) 
      $.unblockUI(); 
     }, 
     failure: function (errMsg) { 
      $("#favoriteStatusMessages").html(errMsg).addClass("ui-state-error"); 
      $.unblockUI(); 
     } 
    }); 


});