Question

我的页面上有学期作为选择选项。当选择一个学期时，调用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函数时，我只能第一次看到结果。

Answer 1

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

您使用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");
});

Answer 2

在$table.trigger('reloadGrid');函数中使用getStudents() ..并且不要在getStudents()函数中添加jqGrid代码将其添加到文档就绪（加载时表示页面）。同样在jqGrid代码内部动态获取所选项目的ID，而不是作为参数传递。如下所示：

地址： '？getStudents /学期=' + $（ “＃学期”）VAL（），

Answer 3

尝试这样的事情......

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
    }).trigger("reloadGrid");         
}

在末尾添加trigger("reloadGrid")

希望这有帮助!!!

如何重新加载JqGrid网格

3 个答案: