Question

所有。当我从jQuery.load（）调用jqGrid表时。我发现它只能在第一时间使用。后来调用不起作用，浏览器调试不会打印任何错误。我只能看到，jqGrid输出表丢失了它的搜索和放大器。底部的寻呼机按钮。

我打电话给它使用这段代码。

    <script type="text/javascript">
$(document).ready(function(){

$.ajaxSetup ({
cache: false
});

$('#form').submit(function(){

$('#report-box').load('?action=Q',$(this).serialize(),function(){
$("#report").jqGrid('navGrid','#report-box',{ edit:false,add:false,del:false });
});

return false;
});
});
    </script>
  </div>
</div>
<table id="report"></table>
<div id="report-box"></div>

请求页面代码

<script type="text/javascript">
  jQuery("#report").jqGrid({ 
  url:'?action=b&tpl=bydept&date={$date}',
  datatype: "json",
  colNames:['xx','xx','xxx','xxx','xxx','xxx','xxx','xx','xxx','xxx'],
  colModel:[
  { name:'1',index:'dept', width:55 },
  { name:'2',index:'key_1', width:55  },
  { name:'3',index:'key_2', width:55  },
  { name:'4',index:'key_3', width:55  },
  { name:'5',index:'key_6', width:55  },
  { name:'6',index:'key_8', width:55  },
  { name:'7',index:'key_9', width:55  },
  { name:'8',index:'key_10', width:55  },
  { name:'9',index:'key_13', width:55  },
  { name:'10',index:'key_14', width:55  }

  ],
  rowNum:10,
  rowList:[10,20,30],
  pager: '#report-box',
  sortname: 'dept',
  viewrecords: true,
  sortorder: "desc",
  caption:"xxxx"
  });

</script>

=======更新解释为什么我多次调用jqGrid，感谢Oleg很多===========

我有一个有一些选择的表单，我希望它可以：当用户选择选项时，单击提交按钮，服务器将响应它并输出一个表。像这样的形式。

<form action='{$kbonez_root}report/action/q/' method='post' id='form'>
  <table width="100%" border="0">
    <col class="col1" />
    <col class="col2" />
    <col class="col3" />
    <tr>
      <th>Date</th>
      <td><input name="date" class="txt datepicker" type="text" value="2011-04-6" /></td>
      <td><span class="font_c2">* not null</span></td>
    </tr>
    <tr>
      <th>report type</th>
      <td>
        <select name="tpl">
          <option value='bydept'>department report</option>
          <option value='byidc'>idc report</option>
          <option value='bycenter'>center report</option>
          <option value='bybrand'>rand report</option>
        </select>
      </td>
    </tr>
  </table>
  <p class="btn"><span><button type='submit'>Submit</button></span></p>
</form>

之前的设计：当用户选择不同的tpl时，提交它，我将输出jqGrid-scriptcode并让jqGrid响应服务器再次获取数据。

当我看到Oleg的帖子时，我想我理解你的意思，之前的设计很糟糕。

我想也许下面的设计会好的，希望你能提出建议。谢谢。

first,  we should output all the different type jqGrid-scriptcode in one page. 
        the choice in the form not too much, so 
              1.I should output it when the page init. use datatype:local
              2.set different arguments for different tpl type.(not sure, I should read jqGrid manual.)
              3.hide them.

second, when user select which type he want use and submit. 
            1.set Corresponding jqGrid table to visiable.
            2.  set current jqGrid datatype json.
            3. use jqGrid to get it data.

真实代码：

$("#form button").click(function(){

jQuery('#report').jqGrid('GridUnload','#report');

jQuery('#report').jqGrid({
    colNames:['xxx','xx','x','x','x','x','x','x','x','x'],
    colModel:[
    { name:'1',index:'dept', width:55 },
    { name:'2',index:'key_1', width:55  },
    { name:'3',index:'key_2', width:55  },
    { name:'4',index:'key_3', width:55  },
    { name:'5',index:'key_6', width:55  },
    { name:'6',index:'key_8', width:55  },
    { name:'7',index:'key_9', width:55  },
    { name:'8',index:'key_10', width:55  },
    { name:'9',index:'key_13', width:55  },
    { name:'10',index:'key_14', width:55  }

    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#report-box',
    viewrecords: true,
    sortorder: "desc",
    datatype: "json",
    url:'?action=b',
    sortname: function() {
    switch($("#form select option:selected").val()){
    case 'bydept':
        return 'dept';
    case 'byidc':
        return 'idc';
    }
    },
    page:1,
    postData:{
    date: function() { return $("#form input").val(); },
    tpl: function() { return $("#form select option:selected").val(); } 
    }
}).jqGrid('setCaption',function() {
    switch($("#form select option:selected").val()){
    case 'bydept':
            return 'xxx';
    case 'byidc':
            return 'xxx';
    }
});

Answer 1

您是否可以解释为什么需要使用load的jqGrid加载脚本？在我看来，有一种更好的方法来使用jqGrid。

代码中的一个问题是与网格一起组织工作。您应该每页创建jqGrid 一次，并且您也应该只在一次时调用navGrid。原因很清楚。 jqGrid将从简单的<table id="report"></table><div id="report-box"></div> HTML代码片段创建一个包含标题，列，寻呼机等的表。这种转变应该一次。如果您不想显示网格包含，则可以将其放在隐藏的div中（具有style =“display：none”）。如果您不想在初始化时加载网格包含，则应在开头datatype:'local'处，并且不会向服务器发出任何请求。在$('#form').submit句柄中，您可以从表单中获取数据（就像您已经使用$(this).serialize()一样），根据setGridParam datatype:'json'和url进行设置（最好使用postData而不是修改url）并致电jQuery("#report").trigger("reloadGrid")。这将是将请求发送到服务器。 url将附加postData的数据（有关详细信息，请参阅here），所有这些都可以很好地发挥作用。

更新：我同意您在问题的最新更新部分中描述的页面新设计说明。我只能添加一些可能的优化。

1）在我看来，您可以使用type='button'的按钮而不是type='submit'，并且可能不需要任何形式。如果您愿意，可以使用fieldset代替。因为表格现在存在，我将在下面使用它。您可以使用click设置jQuery("#report").trigger("reloadGrid")处理程序：$("#form button.btn").click(function(){/*here call reloadGrid*/})。

2）您可以在jqGrid参数postData中使用以下内容

postData: {
    date: function() { return $("#form input").val(); },
    tpl: function() { return $("#form select option:selected").val(); }
}

然后在每个网格加载时将自动来自表单

的当前值

2）我不知道你需要的不同网格的列有多么不同。因此，您可以按照我在this和another答案中描述的动态创建/启用列的方式（参见演示）。另一种更简单的方法是，如果您在选择框中更改报告的类型，则每次都使用GridUnload方法。它将破坏网格，您可以使用新的列参数重新创建它。请参阅the demo中的another answer。

Answer 2

尝试使用getScript（http://api.jquery.com/jQuery.getScript/）

加载脚本

从jQuery.load（）问题调用的jqGrid表

2 个答案: