Wie zum initialisieren einer jqGrid mit den richtigen events für die Zeilen neu Sortieren (Sortierbar)

Ich möchte in der Lage, sich an die Ereignisse, die ausgelöst werden, während eine Sortierbare drag-und-drop-Vorgang (Neu 3.6 Sortierbare Zeilen), wie ich brauche, um zu bestehen, diese Informationen zurück in den Speicher. Ich habe versucht, onstop und beimstart von http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#drag_and_drop_rows_between_grids aber es scheint zu funktionieren nur mit dem drop-Ziel ist eine weitere Tabelle.

Danke,
Stephen

Den Spalten:

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

Netz:

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:

Erzeugt die Tabelle von jqGrid IST sortierbar, so dass ich denke, es ist eine Frage der Verwendung dieser jquery-Funktionen nach der Initialisierung.

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

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

InformationsquelleAutor Stephen Patten | 2012-01-27

jqgrid jquery

Es ist eine gute Frage!

Fangen die Ergebnisse der Rückgriff der Spalten, die Sie verwenden sollten sortable als Funktion statt boolean true:

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

sehen die demo. Wenn Sie neu anordnen 'Client' und 'Datum' Spalten, erhalten Sie die Warnmeldung

Wie zum initialisieren einer jqGrid mit den richtigen events für die Zeilen neu Sortieren (Sortierbar)

Den Spalten 'rn' und 'cb' verwendet intern für Zeile zahlen und Mehrfachauswahl-Checkboxen sind Erster und haben die Indizes 0 und 1. Die Spalten "Kunde" hat den index 2 und "Date" hat den index 3. Der permutation array nach der Neuordnung der 'Client' und 'Datum' werden die Spalten [0, 1, 3, 2, 4, 5, 6, 7, 8, 9]

Es ist wichtig zu erwähnen, dass, wenn Sie brauchen, um einige Optionen des jQuery-UI-Sortable sollten Sie ein anderes format der sortable parameter von jqGrid:

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

sehen die nächste demo:

Wie zum initialisieren einer jqGrid mit den richtigen events für die Zeilen neu Sortieren (Sortierbar)

UPDATE: überwachung der Neuanordnung der Zeilen können Sie Folgendes tun:

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

sehen die demo. Sie können mehr detaillierte Informationen über die Zeilen vor und nach der neuen position der zu verschiebenden Zeile mit dem folgenden

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

sehen die nächste demo.

Ich glaube nicht, dass ich beschrieb, was ich suchte, war richtig..sorry. trirand.com/blog/jqgrid/jqgrid.html > Neu in version 3.6 > Sortierbare Zeilen. Danke, Stephen
Sorry, es war mein Fehler. Ich aktualisiert meine Antwort für sortableRows.

InformationsquelleAutor Oleg

Aktuellen Implementierung, die funktioniert, ist

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


});

InformationsquelleAutor Stephen Patten

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.