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

Question

all。当我从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脚本代码，并让jqGrid响应服务器再次获取数据。

当我看到奥列格的帖子时，我想我理解你的意思，以前的设计很糟糕。

我想也许下面的设计可以，希望你能给我建议。谢谢。

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的数据(有关更多信息，请参阅此处(，一切都将正常工作。

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

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

2( 您可以在jqGrid中使用关于以下的参数postData

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

则在每次网格加载时，将自动从表格中获取当前值

2( 我不知道你需要的不同网格的柱有多不同。例如，您可以按照我在本答案和另一个答案中描述的动态创建/启用列的方式(请参阅演示(。另一种更简单的方法是，如果您在选择框中更改报表的类型，则每次都使用GridUnload方法。它将破坏轴网，您可以使用新的柱参数重新创建它。请参阅另一个答案中的演示。

Answer 2

尝试使用getScript加载脚本(http://api.jquery.com/jQuery.getScript/(