Question

我希望能够订阅在Sortable拖放操作（3.6可排序行中的新功能）期间引发的事件，因为我需要将此信息保留回存储。我已尝试从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");
});

Answer 1

这是一个很好的问题！

要捕获使用列的结果，您应该使用sortable 作为函数而不是布尔true：

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

见the demo。如果您重新排序“客户”和“日期”列，您将收到提醒消息

enter image description here

内部用于行号和多选复选框的列'rn'和'cb'是第一个，索引为0和1.列'Client'的索引为2，'Date'的索引为3.到{重新排序“客户”和“日期”列后的{1}}数组将为permutation

重要的是要提一下，如果你需要设置jQuery UI Sortable的一些选项，你应该使用另一种格式的[0, 1, 3, 2, 4, 5, 6, 7, 8, 9] jqGrid参数：

sortable

请参阅the next demo：

enter image description here

更新：要监控行的重新排序，您可以执行以下操作：

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

见the demo。您可以使用以下

获取有关已移动行的新位置之前和之后的行的更多详细信息

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


});

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

2 个答案: