Как инициализировать jqGrid с надлежащими событиями для переупорядочения строк (Sortable) - jquery


1

Мне бы хотелось подписаться на события, которые были подняты во время операции Sortable drag and drop (Новое в 3.6 Sortable Rows), поскольку мне нужно сохранить эту информацию для хранения. Я пробовал onstop и onstart из http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#drag_and_drop_rows_between_grids, но, похоже, он работает только с целью переноса, являющейся другой таблицей.

Спасибо, Стивен

Столбцы:

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 IS, сортируется, поэтому я думаю, что это вопрос использования этих функций jquery после инициализации.

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

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

2 ответа

1

Текущая реализация, которая работает,

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


});
3

Это хороший вопрос!

Чтобы поймать результаты использования столбцов, вы должны использовать sortable как функцию вместо boolean true:

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

см. демо. Если вы переупорядочиваете столбцы "Клиент" и "Дата" , вы получите предупреждающее сообщение

enter image description here

Столбцы "rn" и "cb", используемые внутри для номеров строк и многосегментных флажков, являются первыми и имеют индексы 0 и 1. У столбцов "Клиент" есть индекс 2, а "Дата" - индекс 3. Для permutation после переупорядочения столбцов "Клиент" и "Дата" будет [0, 1, 3, 2, 4, 5, 6, 7, 8, 9]

Важно отметить, что если вам нужно установить некоторые параметры jQuery UI Sortable, вы должны использовать другой формат параметра sortable jqGrid:

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

см. следующее демо:

enter image description here

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

см. демо. Вы можете получить более подробную информацию о строках до и после новой позиции перемещенной строки со следующими

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

см. следующее демо.

  • 8 фев 2020 2020-02-08 08:05:09