如何使用适当的事件初始化 jqGrid 以进行行重新排序(可排序) [英] How to initialize a jqGrid with the proper events for row re-ordering (Sortable)
问题描述
我希望能够订阅在可排序拖放操作期间引发的事件(3.6 可排序行中的新增功能)，因为我需要将此信息保存回存储.我已经尝试从 的一些选项，您应该使用 jqGrid 的 sortable 参数的另一种格式:
可排序:{更新:函数(排列){alert ('permutation=' + permutation.join(','));},选项: {不透明度:0.8}}参见.您可以通过以下方式获取有关移动行的新位置之前和之后的行的更多详细信息
favoriteGrid.jqGrid('sortableRows', {更新:函数(ev，ui){var item = ui.item[0], ri = item.rowIndex, itemId = item.id,message = "id 所在的行=" + itemId +" 被移动.新的行索引是 " + ri;if (ri > 1 && ri < this.rows.length - 1) {alert(message + '
在rowid='的item之间插入行+this.rows[ri-1].id + ' 和带有 rowid=' + 的项目this.rows[ri+1].id);} 否则如果 (ri > 1) {警报(消息 +'
该行作为rowid='的项之后的最后一项插入this.rows[ri-1].id);} else if (ri < this.rows.length - 1) {警报(消息 +'
该行作为第一项插入到 rowid='+ 的项之前this.rows[ri+1].id);} 别的 {警报(消息)；}}});请参阅下一个演示.
I'd like to be able to subscribe to the events that are raised during a Sortable drag and drop operation (New in 3.6 Sortable Rows) as I need to persist this information back to storage. I've tried onstop and onstart from http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#drag_and_drop_rows_between_grids but it seems to only work with drop target being another table.
Thank you, Stephen
The Columns:
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 }
];
The Grid:
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:
The table generated from jqGrid IS sortable, so I think it's a matter of using these jquery functions, after initialization.
$('#favoriteGrid').bind("sortstart", function (event, ui) {
alert("start");
});
$('#favoriteGrid').bind("sortstop", function (event, ui) {
alert("stop");
});
It's a good question!
To catch the results of resorting of the columns you should use sortable as function instead of boolean true:
sortable: function (permutation) {
alert ('permutation=' + permutation.join(','));
}
see the demo. If you reorder 'Client' and 'Date' columns you will receive the alert message
The columns 'rn' and 'cb' used internally for row numbers and multiselect checkboxes are first and have indexes 0 and 1. The columns 'Client' has the index 2 and 'Date' has the index 3. To the permutation array after the reordering of 'Client' and 'Date' columns will be [0, 1, 3, 2, 4, 5, 6, 7, 8, 9]
It's important to mention that if you need to set some options of the jQuery UI Sortable you should use another format of sortable parameter of jqGrid:
sortable: {
update: function (permutation) {
alert ('permutation=' + permutation.join(','));
},
options: {
opacity: 0.8
}
}
see the next demo:
UPDATE: To monitor the reordering of rows you can do the following:
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);
}});
see the demo. You can get more detailed information about the rows before and after the new position of the moved row with the following
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 + '
The 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 +
'
The 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 +
'
The row is inserted as the first item before the item with rowid=' +
this.rows[ri+1].id);
} else {
alert(message);
}
}});
see the next demo.
这篇关于如何使用适当的事件初始化 jqGrid 以进行行重新排序(可排序)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
