javascript - 如何重新加载JqGrid网格

我的页面上有一个学期的选择选项。
选择一个学期时，将调用一个JavaScript函数作为id学期作为参数。

<select name="semester" id="semester" onchange="getStudents(this)">
 <option value="1">Semester 1</option>
 <option value="2">Semester 2</option>
</select>

而且我的jqGrid具有以下内容

function getStudents(semester) {
    var $table= $("#students_list");
    $table.jqGrid({
      url:'getStudents/?semester='+semester,
      datatype: "json",
      mtype: 'POST',
      colNames:['id','Student','Semester'],
      colModel:[
        {name:'studentId'},
        {name:'studentName'},
        {name:'semester'}
     ],
    viewrecords: true,
    gridview: true
    });
}

但是，只有在第一次调用getStudents函数时才能看到结果。

最佳答案

首先，我显示您当前代码中的错误。

您使用onchange="getStudents(this)。这意味着getStudents的参数将使用select #semester的DOM元素初始化。这意味着您需要使用$(semester).val()来获取getStudents函数内部选定选项的值，而不是仅使用semester（请参见'getStudents/?semester='+semester）。

下一个问题如下。代码$table.jqGrid({...});创建网格。在创建网格期间，空表<table id="students_list"></table>将转换为相对复杂的下潜和表结构。因此，第二次您无法拨打相同的电话。这样的调用将被忽略。与其替代，必须使用$("#students_list").jqGrid("GridUnload");破坏网格，或者更好地创建网格并稍后重新加载。

您在jqGrid中使用mtype: 'POST'选项。这意味着jqGrid使用HTTP POST将一些参数发送到服务器并将其放在HTTP请求的正文中。建议以相同的方式发送自定义参数semester。在这种情况下，您可以使用

var $table = $("#students_list");
$table.jqGrid({
    url: "getStudents",
    datatype: "json",
    mtype: "POST",
    postData: {
        semester: function () {
            return $("#semester").val(); // 1 or 2 from value attr of option
        }
    },
    colNames: ["id", "Student", "Semester"],
    colModel: [
        {name: "studentId"},
        {name: "studentName"},
        {name: "semester"}
    ],
    viewrecords: true,
    gridview: true
});

该代码将始终将semester select的当前值发送到服务器。例如，如果用户单击列标题以对其进行排序，然后单击下一页按钮，则具有当前所选semester的新请求将被发送到服务器。我建议您阅读the old answer，其中更详细地描述了postData中的功能用法。

要在更改选项后立即刷新网格内容，可以使用触发change的reloadGrid句柄：

$("#semester").change(function () {
    $table.trigger("reloadGrid");
});

如果确实需要在URL中放置选定的学期，则应从创建网格时使用的选项中删除postData参数，并在change事件处理程序中使用以下代码：

$("#semester").change(function () {
    $table.jqGrid("setGridParam", {
        url: "getStudents/?semester=" + encodeURIComponent($("#semester").val())
    }).trigger("reloadGrid");
});