jqgrid在移动行后获取网格中的行 [英] jqgrid get rows in grid after move rows

问题描述

我有一个包含3列的网格，如下所示:

I have a grid with 3 columns that looks like:

col1      col2    col_sortorder
AAAA      1000    1
AAAA      1002    2
AAAA      1003    3

我使用户可以通过使用鼠标更改网格中的分类器成为可能.例如，将第二行移到顶部，因此网格如下所示:

I made it possible that the user can change the sortoder in the grid by using the mouse. For example move the second row on the top, so the grid looks like:

col1      col2    col_sortorder
AAAA      1002    2
AAAA      1000    1
AAAA      1003    3

我通过以下方式实现了这一目标:

I achieved this with:

jQuery("#list").jqGrid('sortableRows');
jQuery("#list").bind('sortstop', function() { fun_sort(event) });

现在，我要使用col_sortorder的新值更新数据库. 函数fun_sort()由sortstop-event正确触发. 我的意图只是从网格中读取所有数据，并使用forloop-index作为col_sortorder的新值，但是当我使用以下方法读取网格时:

Now I want to update my database with a new value for the col_sortorder. The function fun_sort() is triggered by the sortstop-event correctly. My intention was just to read all the data from the grid and use the forloop-index as the new value for the col_sortorder, but when I read through my grid using:

var allRowsInGrid = $('#list').jqGrid('getGridParam','data');
for (i = 0 ; i <= allRowsInGrid.length -1; i++){
var col1 = allRowsInGrid[i].col1;
var col2 = allRowsInGrid[i].col1;
var col_sortorder = i+1; //new value for sortorder
// call ajax to update the database
}

函数getGridParam总是返回初始网格顺序，而不是在网格内移动一行后返回的顺序. 有人可以告诉我该怎么做吗?

The function getGridParam always returns the initial grid order and not the order after I have moved a row inside the grid. Can somebody tell me how I can to this?

推荐答案

我发现您的问题很有趣，因此我创建了演示事件相同(请参见文档).

I find your question interesting and thus I created the demo https://jsfiddle.net/OlegKi/xw0gcjez/, which demonstrates how you can solve the problem. I used update callback of sortableRows, which is the same as "sortupdate" event (see the documentation).

$("#list").jqGrid("sortableRows", {
    update: function () {
        updateColSortorder();
        // the data of the column col_sortorder will contain
        // now sequensial values 1,2,3...
        // even the display values are still old

        // reload grid to display updated data
        var p = $grid.jqGrid("getGridParam");
        // we reset sortname to "col_sortorder" only to reload
        // with minimal visual changes for the user
        p.sortname = "col_sortorder";
        p.sortorder = "asc";
        setTimeout(function () {
            $grid.trigger("reloadGrid");
        }, 0);
    }
});

其中updateColSortorder是

function updateColSortorder () {
    var rows = $grid[0].rows, localRow, i;
    for (i = 0; i < rows.length; i++) {
        if ($(rows[i]).hasClass("jqgrow")) {
            // row is a row with data. row.id is the rowid
            localRow = $grid.jqGrid("getLocalRow", rows[i].id);
            localRow.col_sortorder = i;
        }
    }
}

网格内部使用HTML表.因此，$grid[0]是表的DOM，该表具有行集合中的元素顺序与行的显示顺序相对应.

The grid uses HTML table internally. Thus $grid[0] is the DOM of table, which has rows properties. Every row has id property and so on. The order of elements in the rows collection corresponds the order in which the rows are displayed.

这篇关于jqgrid在移动行后获取网格中的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！