все.когда я вызываю таблицу jqGrid из jQuery.load ().Я обнаружил, что это работает только в первый раз.Позже вызываемый не будет работать, а браузер-отладчик не выведет ни одной ошибки.Я только вижу, что таблица вывода 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 несколько раз, спасибо Олегу ===========
У меня есть форма с некоторыми вариантами, я надеюсь, что это возможно: когда пользователь выбирает параметры, нажимает кнопку отправки, сервер отвечает на них и выводит таблицу.форма, подобная этой.
<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 получить данные.когда я вижу сообщение Олега, я понимаю, что вы имеете в виду, дизайн раньше плохой.
Я думаю, что, возможно, приведенный ниже дизайн будет в порядке, надеюсь, вы можете дать предложение. Спасибо.
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';
}
});