如何用行重新排序的适当事件初始化jqGrid（可排序）
我希望能够订阅在Sortable拖放操作（3.6可排序行中的新function）期间引发的事件，因为我需要将此信息保留回存储。 我从http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#drag_and_drop_rows_between_grids尝试过onstop和onstart，但它似乎只适用于drop target是另一个表。
谢谢你，斯蒂芬
专栏：
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生成的表是可排序的，所以我认为这是在初始化之后使用这些jquery函数的问题。
$('#favoriteGrid').bind("sortstart", function (event, ui) { alert("start"); }); $('#favoriteGrid').bind("sortstop", function (event, ui) { alert("stop"); });
这是一个很好的问题！
为了捕获列的结果，你应该使用sortable 作为函数而不是boolean true ：
sortable: function (permutation) { alert ('permutation=' + permutation.join(',')); }
看演示 。 如果您重新排序“客户”和“日期”列，您将收到提醒消息
内部用于行号和多选复选框的列’rn’和’cb’是第一个并且具有索引0和1.列’Client’具有索引2并且’Date’具有索引3.到列之后的permutation数组“客户”和“日期”列的重新排序将是[0, 1, 3, 2, 4, 5, 6, 7, 8, 9]
重要的是要提一下，如果你需要设置jQuery UI Sortable的一些选项，你应该使用另一种格式的jqGrid sortable参数：
sortable: { update: function (permutation) { alert ('permutation=' + permutation.join(',')); }, options: { opacity: 0.8 } }
看下一个演示 ：
更新 ：要监视行的重新排序，您可以执行以下操作：
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); }});
看演示 。 您可以使用以下内容获取有关已移动行的新位置之前和之后的行的更多详细信息
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); } }});
看下一个演示 。
当前有效的实现是
$('#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: '
Saving your sort order...
' }); $.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(); } }); });