代码之家  ›  专栏  ›  技术社区  ›  ReynierPM

如何在jQgrid中对行进行排序后获得新的行顺序?

  •  1
  • ReynierPM  · 技术社区  · 6 年前

    我有以下网格定义:

    $(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 () {
                // ...
            }
        })
    });
    

    使用上面的代码,可以通过将行拖放到网格的某个位置来对行进行排序。

    为了保持这种变化,我在后端有一个函数 form_id (我将其存储在sessionStorage中)和 field_id => field_seq 并在DB级别执行一些魔术。

    请看下图,这是第一次加载的网格:

    enter image description here

    现在让我们假设我正在拖动(&A);删除彩色行( id: 219110 )进入第一排位置。这将是第一排( 编号:219110 )向下移动一行(该行之后的所有行都会发生相同的情况),然后移动的行将占据第一个位置。参见以下示例:

    之前:

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

    之后:

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

    我需要使用 id 作为 key 以及 seq 作为值,以便稍后将其传递给AJAX后端函数,该函数将负责存储新数据。

    我如何做到这一点?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Oleg    6 年前

    您可以使用 lastSelectedData jqGrid的参数,以获取用户之前排序和筛选的项目。旧的答案是: this one another one 提供演示,演示 上次选择的数据 .

    通常,jqGrid内部包含一些JavaScript方法,用于对本地数据进行排序和过滤。我在中描述 the old answer 在旧的jqGrid(i版本<=4.7)上工作的棘手技术。我已经在第一个版本的“免费jqGrid”中实现了fork 上次选择的数据 参数(参见 the readme ),这使得处理最后排序和筛选的本地数据非常容易。