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

最近做的一个项目,页面所有表格都用到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,
    });
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值