如何用行重新排序的适当事件初始化jqGrid（可排序）

Question

我希望能够订阅可分类拖放操作期间引发的事件（3.6可排列行中的新增内容）为我需要将这些信息存回存储器。我已经试过了从http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#drag_and_drop_rows_between_grids onstop和onstart，但它似乎只适用于放置目标是另一个表。

谢谢 斯蒂芬

列：

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 } 
]; 

网格：

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'); 

EDIT1：

从jqGrid的生成表中排序，所以我觉得这是在initializ之后使用这些jquery函数的问题通货膨胀。

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

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

Answer 1

这是个好问题！

搭上列的再整理的结果，你应该使用sortable作为代替布尔true功能：

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

看到the demo。如果你重新排序“客户”和“日期”栏，您将收到警告消息

列“RN”和行号和多选复选框内部使用的“CB”是第一和具有索引0和1.列'客户'具有索引2，'日期'具有索引3.对'客户'和'日期'列重新排序后的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

，工程目前的实现是

$('#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(); 
     } 
    }); 


});