如何使用适当的事件初始化jqGrid以进行行重新排序(可排序) [英] How to initialize a jqGrid with the proper events for row re-ordering (Sortable)
问题描述
我希望能够订阅在可排序拖放操作(3.6可排序行中的新增功能)期间引发的事件，因为我需要将该信息持久化到存储中.我已经尝试从 http://www.trirand .com/jqgridwiki/doku.php?id = wiki:jquery_ui_methods#drag_and_drop_rows_between_grids ，但它似乎仅在放置目标是另一个表的情况下有效.
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.
谢谢你， 斯蒂芬
列:
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');
从jqGrid生成的表是可排序的，所以我认为这是在初始化后使用这些jquery函数的问题.
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");
});
推荐答案
这是一个好问题！
要获取列求值的结果，应使用sortable 作为函数，而不是布尔值true:
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
内部用于行号和多选复选框的列"rn"和"cb"为第一个，索引为0和1.客户端"列的索引为2，日期"列的索引为3.重新排列客户"和日期"列后的c2>数组为[0, 1, 3, 2, 4, 5, 6, 7, 8, 9]
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]
重要的是要提到，如果您需要设置 jQuery UI Sortable 的某些选项，应该使用jqGrid的sortable参数的另一种格式:
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
}
}
请参见下一个演示:
更新:要监视行的重新排序，可以执行以下操作:
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 + '\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);
}
}});
请参见下一个演示.
这篇关于如何使用适当的事件初始化jqGrid以进行行重新排序(可排序)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
