JQGrid动态生成列头被追加无法替换旧列头的解决方案咨询

问题根因 #

你定义的ColModel是全局作用域的数组，每次执行create_colmodel方法时，都是往已有的数组里追加列配置。你调用的GridUnload只会销毁jqGrid的实例和对应渲染的DOM元素，不会清空这个全局数组里存储的旧列配置，所以第二次生成网格时，旧列头自然会和新列头叠加显示。

解决步骤 #

1. 每次生成列模型前，先清空ColModel数组里的旧数据
2. 移除无效的clearGridData调用：执行完GridUnload后jqGrid实例已经被销毁，此时调用clearGridData没有任何作用，属于冗余代码

修正后代码 #

var ColModel               = []
var availabilitydept       = ''
    
$("#button1").click(function() {
  availabilitydept = 'de85768424332'
  set_up_avgrid()
});

$("#button2").click(function() {
  availabilitydept = 'de56827997021'
  set_up_avgrid()
}); 
                                                                
function set_up_avgrid()
{
    $("#avgrid").jqGrid("GridUnload")
    // 清空全局列模型数组，移除旧数据
    ColModel = []
    create_colmodel() 
    create_grid()               
}
     
function create_colmodel()
{               
     ColModel.push({name      :'Date',index: 'dateindex',resizable : false, align:'left',  
                    frozen    : true, width : 80, search: false,
                    resizable : false});         
     $.ajax             
     ({             
      url: 'tl2_get_rooms_by_dept.php', 
      type: 'GET',
      async: false, // 若要调整为异步模式，需把create_grid放到ajax的success回调里执行
      data: 'userid='  + 'TL2-0001'                   
                        + '&deptid=' + availabilitydept,                                            
      dataType: 'json',                     
      success: function(rows)
        {                                                         
          for (var i in rows) 
          {
           var row  = rows[i];           
           ColModel.push({name: row.roomname, index: row.roomname + i, align:'center', resizable : false,  width:50, search:false});          
          }          
        }                         
     });         
}
             
function create_grid()
{                  
    $("#avgrid").jqGrid(
    {
      shrinkToFit: false,        
      height    : 200,
      width     : 290,       
      colModel: ColModel,            
    });
}

可选优化 #

如果你后续想去掉async: false的同步限制，可以把create_grid()的调用移到ajax请求的success回调最后，就可以支持异步请求生成列头了。

内容的提问来源于stack exchange，提问作者Nervous Elk