jqgrid的动态表头,及内容不刷新问题解决

最近做的一个项目,页面所有表格都用到jqgrid,其中有个查看详情的页面,居然有24个表弹窗,而且表头(字段)完全不一样。


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('
'); $("#dialog_AlgorithmGrid").append('
');
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('
'); $('#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, }); }

你可能感兴趣的:(jqgrid的动态表头,及内容不刷新问题解决)