Question

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

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

HTML code

<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>

Grid 1 initialization code

    $("#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(){....}},{},{},{},{});

Grid 2 initialization code

    $("#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(){....}},{},{},{},{});

Grid 3 initialization code

    $("#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(){....}},{},{},{},{});

Grid 4 initialization code

    $("#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

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

＆＃39;重新加载功能

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} ]);
}

Answer 1

对于其他网格，我将网格URL值更改为空，将数据类型更改为“本地”，以便完成此操作。

第一次JQGrid不会触发重载事件

1 个答案: