解决 jqGrid 翻页时数据选中丢失问题

问题描述

在使用 jqGrid 进行数据展示和选择时，当翻页时会出现数据选中丢失的问题。这是因为 jqGrid 默认只会保存当前页面的选中状态，而不会保存其他页面的选中状态，导致翻页后之前选中的数据被清除。

解决方案

为了解决这个问题，我们可以利用 jqGrid 提供的回调函数 onPaging 和 beforeSelectRow，来手动保存和恢复选中状态。

保存选中状态

当用户翻页时，需要保存当前页面上的选中状态，并将其合并到之前所有已选中的数据中。此时可以在 onPaging 回调函数中实现：

--- ----------- - --- -- --------------- --

-------------------
    -- ---
    --------- ------------------ -
        -- --------------
        --- ------------------- - ----------------------------------

        -- ---------------------
        --------------------------- ----------- ----
            -- -------------- ------------ --- --- -
                ---------------------
            -
        ---

        -- -- ------- ------ ------
        ------ -----
    --
    -- ---
---

恢复选中状态

当用户从其他页面回到之前已选中的数据所在的页面时，需要将之前已选中的数据重新选中。此时可以在 beforeSelectRow 回调函数中实现：

-------------------
    -- ---
    ---------------- --------------- -- -
        -- ------------
        --- ---------- - ------------------------------ --------- --- ------

        -- ---------------- ------------
        -- ------------ -
            ------ -----
        -

        -- -------- --
        --- -- - ------------------------- ------ ------

        -- -------- -- ----------
        -- -------------- ------------ --- --- -
            -- --------------- -------- ------ ----------
            ------------------------------ ------ -------
            ------ ------
        -

        -- -- ------- ------ ----------
        ------ -----
    --
    -- ---
---

示例代码

完整的示例代码如下：

--- ----------- - --- -- --------------- --

-------------------
    ---- --------
    --------- -------
    --------- -
        - ----- ----- ---- ----- ------- ---- --
        - ----- ------- ------ ------- ------ --- --
        - ----- ------ ------ ------ ------ --- --
        - ----- -------- ------ -------- ------ --- -
    --
    ------------- ---------- -
        -- ----------
        ------------------- ----------- ----
            --------------------------------- --- -------
        ---
    --
    --------- ------------------ -
        -- --------------
        --- ------------------- - ----------------------------------

        -- ---------------------
        --------------------------- ----------- ----
            -- -------------- ------------ --- --- -
                ---------------------
            -
        ---

        -- -- ------- ------ ------
        ------ -----
    --
    ---------------- --------------- -- -
        -- ---------

- --------------------------------------------------------- --------
-----------------------------------------------------------------------------------