Search code examples
javascriptjqueryjqgridfree-jqgrid

How to get the new row order after sort rows in jQgrid?

I have the following grid definition:

$(document).ready(function () {
    $("#thegrid").jqGrid({
        url: "/ajax/questions/get/" + form_id,
        datatype: "json",
        colNames: ['id', 'grid_id', 'seq', 'type', 'text'],
        colModel: [
            {name: 'field_id', index: 'id', width: 100, editable: false, search: false},
            {name: 'grid_id', index: 'grid_id', width: 50, editable: false, search: false},
            {name: 'field_seq', index: 'seq', width: 45, editable: false, search: false},
            {name: 'type', index: 'type', width: 125, editable: false, search: false},
            {name: 'field_name', index: 'text', width: 585, search: false}
        ],
        autowidth: true,
        rowNum: 200,
        cmTemplate: {width: 300, autoResizable: true},
        iconSet: "fontAwesome",
        guiStyle: "bootstrap",
        autoResizing: {compact: true, resetWidthOrg: true},
        viewrecords: true,
        autoencode: true,
        sortable: true,
        pager: true,
        toppager: true,
        hoverrows: true,
        multiselect: true,
        multiPageSelection: false,
        rownumbers: true,
        loadonce: true,
        autoresizeOnLoad: true,
        forceClientSorting: true,
        ignoreCase: true,
        prmNames: {id: "field_id"},
        jsonReader: {id: "field_id"},
        localReader: {id: "field_id"},
        navOptions: {edit: false, add: false, search: false, del: false, refresh: true},
        pgbuttons: false,
        pginput: false,
        caption: "Questions",
        height: 100,
        editurl: '/ajax/questions/edit',
        onSelectRow:
            function () {
                // ....
            },
        loadComplete: function () {
            // ...
        }
    })
});

With the code above it's possible to sort the rows by dragging them and dropping at some position at the grid.

In order to keep this changes I have a function in the backend that takes a form_id (I have this stored at sessionStorage) and an array of field_id => field_seq and do some magic at DB level.

Take a look at the following picture which is a grid that has been loaded for first time:

enter image description here

Now let's say I am dragging & dropping the colored row (id: 219110) into the first row position. That will makes the first row (id: 219110) to move one row down (same will happen to all rows after that one) and then the moved row will take the first position. See example below:

before:

+--------+--------+-----+
| id     | gri_id | seq |
+--------+--------+-----+
| 219111 |        | 1   |
| ...    |        | ... |
| 219110 |        | 4   |
+--------+--------+-----+

after:

+--------+--------+-----+
| id     | gri_id | seq |
+--------+--------+-----+
| 219110 |        | 1   |
| 219111 |        | 2   |
| ...    |        | ... |
+--------+--------+-----+

I need to build and array with the id as the key and the seq as the value so I can pass this later on to an AJAX backend function which will care about store the new data.

How do I achieve this?

Solution

  • You can use lastSelectedData parameter of jqGrid to get the items, which users sorted and filtered previously. The old answers: this one and another one provides the demos, which demonstrates the usage of lastSelectedData.

    In general, jqGrid contains internally some JavaScript methods, which are used for sorting and filtering of local data. I described in the old answer tricky technique, which works on old jqGrid (i version <=4.7). Already in the first version of "free jqGrid" fork I implemented lastSelectedData parameter (see the readme), which makes working with the last sorted and filtered local data very easy.