JQGrid 动态设置 postdata

您可以使用`setGridParam`方法动态设置JQGrid的postdata参数。以下是一个示例：

// 获取Grid实例
var grid = $("#grid_id");

// 动态设置postdata参数
grid.jqGrid('setGridParam', {
    postData: {
        param1: value1,
        param2: value2
    }
});

// 重新加载Grid
grid.trigger("reloadGrid");

在上面的示例中，`setGridParam`方法用于设置`postData`参数，该参数是一个对象，包含您要发送给服务器的数据。设置完成后，您需要使用`trigger`方法重新加载Grid以应用更改。

相关问题

jqGrid post请求

jqGrid 是一个基于 jQuery 的表格插件，可以实现表格的分页、排序、筛选等功能。在 jqGrid 中，可以通过 post 请求获取后端返回的数据。

具体实现步骤如下：

1. 在前端页面中定义 jqGrid 表格，并设置相关参数，如表格列名、分页大小等。

2. 在 JavaScript 中定义一个函数，用于向后端发送 post 请求，并将返回的数据填充到 jqGrid 表格中。

3. 在后端接收 post 请求，并根据请求参数进行数据查询和处理，最终返回符合条件的数据。

4. 前端接收到后端返回的数据后，将数据填充到 jqGrid 表格中。

示例代码如下：

前端页面：

<table id="grid"></table>

JavaScript 代码：

$(function () {
    $("#grid").jqGrid({
        url: "backend.php",
        datatype: "json",        mtype: "POST",
        colNames: ["ID", "Name", "Age"],
        colModel: [
            { name: "id", index: "id", width: 50 },
            { name: "name", index: "name", width: 100 },
            { name: "age", index: "age", width: 50 }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#pager",
        sortname: "id",
        viewrecords: true,
        sortorder: "asc",
        caption: "jqGrid Example"
    });
});

function loadData() {
    $.post("backend.php", function (data) {
        $("#grid").jqGrid("clearGridData");
        $("#grid").jqGrid("setGridParam", { data: data }).trigger("reloadGrid");
    });
}

后端 PHP 代码：

<?php
// 连接数据库
$conn = mysqli_connect("localhost", "root", "password", "test");

// 查询数据
$sql = "SELECT * FROM users";
$result = mysqli_query($conn, $sql);

// 将查询结果转换为 JSON 格式
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}
echo json_encode($data);

// 关闭数据库连接
mysqli_close($conn);
?>

jqgrid searchGrid

`searchGrid` 方法是 jqGrid 提供的一个用于触发搜索的 API，可以在 JavaScript 中调用。使用 `searchGrid` 方法，您可以在 JavaScript 中自定义搜索条件，并将其应用于 jqGrid。

下面是一个例子：

$("#grid").jqGrid({
    url: 'data.json',
    datatype: 'json',
    colModel: [
        { name: 'id', index: 'id', width: 60 },
        { name: 'name', index: 'name', width: 90 },
        { name: 'amount', index: 'amount', width: 80, align: 'right' },
        { name: 'price', index: 'price', width: 80, align: 'right' }
    ],
    jsonReader: {
        repeatitems: false,
        id: 'id'
    },
    pager: '#pager',
    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: 'id',
    sortorder: 'asc',
    viewrecords: true,
    caption: 'My Grid',
    height: '100%',
    autowidth: true,
}).navGrid('#pager', { edit: false, add: false, del: false, search: true })
  .navButtonAdd('#pager', {
    caption: 'Custom Search',
    buttonicon: 'ui-icon-search',
    onClickButton: function () {
        var postData = { };
        postData.name = { op: 'bw', data: 'Product' };
        postData.amount = { op: 'gt', data: '100' };
        $("#grid").jqGrid('setGridParam', { postData: postData });
        $("#grid").jqGrid('searchGrid', { multipleSearch: true });
    }
});

在上面的例子中，我们设置了一个包含四个列的 jqGrid，并在 `navGrid` 中启用了搜索功能。我们还定义了一个自定义搜索按钮，当用户点击该按钮时，将触发一个 JavaScript 函数。在该函数中，我们定义了一个名为 `postData` 的对象，该对象包含要应用的搜索条件。然后，我们使用 `setGridParam` 方法将搜索条件设置为网格的 `postData` 属性。最后，我们使用 `searchGrid` 方法触发搜索，将搜索条件应用于网格。

在 `searchGrid` 方法中，我们还可以传递一个包含其他选项的对象，例如 `multipleSearch`，该选项指定是否允许多个搜索条件。

使用 `searchGrid` 方法，您可以在 JavaScript 中自定义搜索条件，并将其应用于 jqGrid，而不需要用户手动输入搜索条件。这样，您可以在网格中实现更高级的搜索功能。