从jQuery.load()问题调用的jqGrid表

| 所有。   当我从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\';
    }
});
    
已邀请:
您能解释一下为什么需要用q5ѭ的jqGrid加载脚本吗?在我看来,有一种更好的方法来使用jqGrid。 您的代码中的一个问题是网格工作的总体组织。您应该每页创建一次jqGrid,并且也应该只调用一次ѭ6。原因很明确。 jqGrid将使用简单的“ 7” HTML代码片段创建一个包含标题,列,分页器等的表。这种转换应该执行一次。如果您不想显示网格包含的内容,可以将其放置在隐藏的div内部(具有style = \“ display:none \”)。如果您不想在初始化时加载网格包含,则应在开始时坐
datatype:\'local\'
,并且不会完成对服务器的任何请求。在
$(\'#form\').submit
句柄中,您可以从表格中获取数据(就像您已经对
$(this).serialize()
所做的一样),针对
setGridParam
,set12ѭ和
url
进行设置(最好使用
postData
而不是修改
url
)并调用
jQuery(\"#report\").trigger(\"reloadGrid\")
。随后将请求发送到服务器。
url
将附加来自
postData
的数据(有关更多信息,请参见此处),并且一切都会很好。 更新:我同意您对问题的最后一部分中描述的页面新设计的描述。我只能添加一些可能的优化。 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)我不知道您需要的不同网格的列有多大差异。因此,您可以例如采用动态创建/启用列的方法,该方法已在本文档以及其他答案中进行了介绍(请参阅演示)。另一种更简单的方法是,如果您在选择框中更改报表的类型,则每次都使用GridUnload方法。它将破坏网格,您可以使用新的列参数重新创建它。请参阅另一个答案中的演示。     
尝试使用
getScript
加载脚本(http://api.jquery.com/jQuery.getScript/)     

要回复问题请先登录注册