最近做的一个项目,页面所有表格都用到jqgrid,其中有个查看详情的页面,居然有24个表弹窗,而且表头(字段)完全不一样。
<div id="dialog_AlgorithmGrid" style="display: none;">
<table id="algorithmInfoGrid"></table>
<div id="resultDataGridPager"></div>
</div>
jqgrid的格式不用多说,需要一个table和一个page,包围他的dialog_AlgorithmGrid是弹窗(或者tablemod)。
通过百度搜索到,如果要重新加载jqgrid表,(也就是用同一个table和pager,但是加载不同的表头,及内容),百度到以下方法
jQuery("#gridTable").jqGrid("clearGridData");//先清除表数据
$("#grid").jqGrid().setGridParam({
url: //新的url路径,或者穿不同的参数
postData: {},
datatype:'json'
}).trigger('reloadGrid');
通过尝试后发现并没有什么作用,最后在每次调用方法之前,先把弹窗(或者包裹Grid表的div)给清空,再append一个table,和一个pager,注意id一致就行。即可实现动态表。至于动态表头,请看最后的完整代码
$("#dialog_AlgorithmGrid").html("");
$("#dialog_AlgorithmGrid").append('<table id="algorithmInfoGrid"></table>');
$("#dialog_AlgorithmGrid").append(' <div id="resultDataGridPager"></div>');
function showAnalyticalAlgorithmInfo(rowId) {
$.ajax({
url: contextPath +"。。。。。。。",
data: {'id': rowId},
type: "POST",
dataType: "json",
traditional: true,
success: function (obj) {
var titles = obj[0];//json对象的第一个对象
var columns=[];
for (var key in titles){
//因为jqgrid的表头格式为columns=[{label:'分析结果',name:'fxResult',align:'center',hidden: true,},..........等]
//此处可以通过遍历后台传过来的json数据的key值,动态生成表头
var s = {label:""+key+"",name:""+key+"",align:'center' };
columns.push(s);
}
initTable(rowId,columns);
}
});
}
function initTable(rowId,columns) {
$("#dialog_AlgorithmGrid").html("");
$("#dialog_AlgorithmGrid").append('<table id="algorithmInfoGrid"></table>');
$('#dialog_AlgorithmGrid').dialog({
resizable: false,
width: 1000,
height: 530,
modal: true,
title:"分析过程追溯明细",
buttons: {
"关 闭": function () {
$(this).dialog("close");
}
},
close: function () {
$(this).dialog("destroy");
}
});
$("#algorithmInfoGrid").jqGrid('setGridParam', {
postData: {'id': rowId}, //发送数据
}).trigger("reloadGrid"); //重新载入
jqGridBase({
jqUrl: .......................,
jqMtype: "POST",
jqId: "#algorithmInfoGrid",
jqPostData:{'id': rowId},
jqColModel: columns,
jqSearch: false,
});
}