JQGrid首次不触发重新加载事件

我在一个页面中有多个网格，这些网格基于下拉选择显示。第一次加载页面时，当我在下拉列表中选择另一个网格名称时，网格的数据重新加载事件不会触发，但后续事件会正确触发。有人能告诉我第一次事件没有被解雇有什么问题吗

执行流程如下所示 在页面加载中，编号为2到4的所有网格都在没有任何URL的情况下初始化。网格1加载数据并显示给用户。 此外，在页面加载时，其他网格div也被隐藏。 当用户在下拉列表中选择任何其他网格名称时，将显示grids div，并触发重新加载事件以加载带有URL的数据

HTML代码

<select id="gridType" onchange="javascript:onChangeGridType();">
  <option value="1" selected="selected">Grid 1</option>
  <option value="2">Grid 2</option>
  <option value="3">Grid 3</option>
  <option value="4">Grid 4</option>
</select>

<div id="grid1Div">
  <table id="grid1">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager1"></div>
</div>
<div id="grid2Div">
  <table id="grid2">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager2"></div>
</div>
<div id="grid3Div">
  <table id="grid3">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager3"></div>
</div>
<div id="grid4Div">
  <table id="grid4">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager4"></div>
</div>

    $("#grid1").jqGrid({
      url: grid1URL,
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager1',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 1',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid1").jqGrid('navGrid',"#pager1",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid2").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager2',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 2',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid2").jqGrid('navGrid',"#pager2",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid3").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager3',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 3',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid3").jqGrid('navGrid',"#pager3",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid4").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager4',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 4',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid4").jqGrid('navGrid',"#pager4",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

电网2初始化代码

<select id="gridType" onchange="javascript:onChangeGridType();">
  <option value="1" selected="selected">Grid 1</option>
  <option value="2">Grid 2</option>
  <option value="3">Grid 3</option>
  <option value="4">Grid 4</option>
</select>

<div id="grid1Div">
  <table id="grid1">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager1"></div>
</div>
<div id="grid2Div">
  <table id="grid2">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager2"></div>
</div>
<div id="grid3Div">
  <table id="grid3">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager3"></div>
</div>
<div id="grid4Div">
  <table id="grid4">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager4"></div>
</div>

    $("#grid1").jqGrid({
      url: grid1URL,
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager1',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 1',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid1").jqGrid('navGrid',"#pager1",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid2").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager2',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 2',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid2").jqGrid('navGrid',"#pager2",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid3").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager3',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 3',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid3").jqGrid('navGrid',"#pager3",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid4").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager4',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 4',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid4").jqGrid('navGrid',"#pager4",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

Grid 3初始化代码

<select id="gridType" onchange="javascript:onChangeGridType();">
  <option value="1" selected="selected">Grid 1</option>
  <option value="2">Grid 2</option>
  <option value="3">Grid 3</option>
  <option value="4">Grid 4</option>
</select>

<div id="grid1Div">
  <table id="grid1">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager1"></div>
</div>
<div id="grid2Div">
  <table id="grid2">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager2"></div>
</div>
<div id="grid3Div">
  <table id="grid3">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager3"></div>
</div>
<div id="grid4Div">
  <table id="grid4">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager4"></div>
</div>

    $("#grid1").jqGrid({
      url: grid1URL,
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager1',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 1',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid1").jqGrid('navGrid',"#pager1",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid2").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager2',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 2',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid2").jqGrid('navGrid',"#pager2",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid3").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager3',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 3',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid3").jqGrid('navGrid',"#pager3",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid4").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager4',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 4',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid4").jqGrid('navGrid',"#pager4",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

Grid 4初始化代码

<select id="gridType" onchange="javascript:onChangeGridType();">
  <option value="1" selected="selected">Grid 1</option>
  <option value="2">Grid 2</option>
  <option value="3">Grid 3</option>
  <option value="4">Grid 4</option>
</select>

<div id="grid1Div">
  <table id="grid1">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager1"></div>
</div>
<div id="grid2Div">
  <table id="grid2">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager2"></div>
</div>
<div id="grid3Div">
  <table id="grid3">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager3"></div>
</div>
<div id="grid4Div">
  <table id="grid4">
    <tr>
      <td />
    </tr>
  </table>
  <div id="pager4"></div>
</div>

    $("#grid1").jqGrid({
      url: grid1URL,
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager1',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 1',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid1").jqGrid('navGrid',"#pager1",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid2").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager2',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 2',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid2").jqGrid('navGrid',"#pager2",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid3").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager3',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 3',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid3").jqGrid('navGrid',"#pager3",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

    $("#grid4").jqGrid({
      url: "",
      datatype: 'json',
      mtype: 'GET',
      colNames:['column1',
                'column2',
                'column3'
               ],
      colModel:[
                {name:'col1',index:'col2',
                 width:140,sortable:true,editable:true},
                {name:'col2',index:'col2',
                 width:120,sortable:true,editable:true},
                {name:'col3',index:'col3',
                 width:160,sortable:true,editable:true}
               ],
      pager: '#pager4',
      paging:true,
      rowNum:perPageRecords,
      height:'auto',
      loadonce: true,
      sortorder: 'desc',
      sortname:'col2',
      viewrecords: true,
      caption: 'Grid 4',
      gridview:true,
      width:'100%',
      autowidth:true,
      pginput:true,
      ignoreCase:true,
      shrinkToFit:false
    });
    $("#grid4").jqGrid('navGrid',"#pager4",{add:false, edit:false, del:false, search:true, refresh:true,
    beforeRefresh: function(){....}},{},{},{},{});

onChangeGridType函数

function onChangeGridType(){
  var type = $("#gridType").val();
  if (type == 1){
    reloadGrid1();
    $("#grid1Div").show();
    $("#grid2Div").hide();
    $("#grid3Div").hide();
    $("#grid4Div").hide();
    $("#grid1Div").css("visibility", "visible");
    $("#grid2Div").css("visibility", "hidden");
    $("#grid3Div").css("visibility", "hidden");
    $("#grid4Div").css("visibility", "hidden");
  } else if (type == 2){
    reloadGrid2();
    $("#grid1Div").hide();
    $("#grid2Div").show();
    $("#grid3Div").hide();
    $("#grid4Div").hide();
    $("#grid1Div").css("visibility", "hidden");
    $("#grid2Div").css("visibility", "visible");
    $("#grid3Div").css("visibility", "hidden");
    $("#grid4Div").css("visibility", "hidden");
  } else if (type == 3){
    reloadGrid3();
    $("#grid1Div").hide();
    $("#grid2Div").hide();
    $("#grid3Div").show();
    $("#grid4Div").hide();
    $("#grid1Div").css("visibility", "hidden");
    $("#grid2Div").css("visibility", "hidden");
    $("#grid3Div").css("visibility", "visible");
    $("#grid4Div").css("visibility", "hidden");
  } else if (type == 4) {
    reloadGrid4();
    $("#grid1Div").hide();
    $("#grid2Div").hide();
    $("#grid3Div").hide();
    $("#grid4Div").show();
    $("#grid1Div").css("visibility", "hidden");
    $("#grid2Div").css("visibility", "hidden");
    $("#grid3Div").css("visibility", "hidden");
    $("#grid4Div").css("visibility", "visible");
  }
}

'重新加载功能`

function reloadGrid1() {
  $("#grid1").jqGrid('setGridParam',{datatype : 'json',url : grid1URL}).trigger('reloadGrid', [ {page : 1} ]);
} 

function reloadGrid2() {
  $("#grid2").jqGrid('setGridParam',{datatype : 'json',url : grid2URL}).trigger('reloadGrid', [ {page : 1} ]);
}

function reloadGrid3() {
  $("#grid3").jqGrid('setGridParam',{datatype : 'json',url : grid3URL}).trigger('reloadGrid', [ {page : 1} ]);
}

function reloadGrid4() {
  $("#grid4").jqGrid('setGridParam',{datatype : 'json',url : grid4URL}).trigger('reloadGrid', [ {page : 1} ]);
}

---

对于其他网格，我将网格URL值更改为空，并将数据类型更改为“local”，这就成功了。

您似乎试图创建4个完全相同的网格，并且仅显示其中一个网格。原因是什么？只有一个网格不是更容易吗？您仍然可以动态更改

url

并重新加载网格内容。给出的初始化代码仅用于表示。但所有四个网格都有来自4个不同表的数据，列名和控件类型也不同。因此，我需要4个不同的网格。在进一步分析浏览器发出的调用时，我观察到，当发出网格初始化调用时，会使用以下参数再次发出一个ajax调用：_search=false&nd=1402052155759&rows=10&page=1&sidx=cfg\u key&sord=asc此调用需要时间。当这个调用完成并且我们更改下拉列表时，重新加载将正常进行。有人能告诉我1）这个电话是什么2）我如何知道电话是否结束（jqgrid中的任何事件？）3）这个电话可以延迟或控制吗？