JqGrid 表格水平滚动条不显示导致表格字段没显示全无法查看问题处理(解决)

最近使用了JqGrid表格,但是在设置水平滚动条时,一直没有效果,列也没有显示全。效果如下所示:

解决这个问题的方法:

如代码块中所示,必须要像下面一样设置下面的三个属性,shrinkToFit一定是false,默认是 true 的,也需要 autowidth 为 true 

    // 自定义列宽 必须属性
     shrinkToFit: false,
     // 设置水平滚动条
     autoScroll : true,
     // 自适应宽度 
     autowidth:true,

要是还不显示就强行设置,在  loadComplete  事件和  gridComplete  事件中都强行设置

$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });

具体的代码请查看下面的代码块,为了方面阅读代码块,代码块中只保留了部分属性和事件,方便查看上面的红色字体是在哪个地方的。

$("#jqGrid").jqGrid({
     url: baseURL + 'XXXXX',
     datatype: "json",
     postData: {"project":option, "testDate":testDate, "station": stationVal},
     colModel: [
            { label: "主键", name: "id", hidden: true,formatter:"integer", formatoptions: { defaultValue: '0' } , key: true},
            { label: '时间', name: 'testDate', hidden: true}
     ],
     // 表格名称
     caption : "明细",
     // 加载完成后事件
     loadComplete:function () {
		 // 水平滚动条
		 $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
		 // 垂直滚动条
		 $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-y" : "scroll" });
     },

     // 自定义列宽 必须属性
     shrinkToFit: false,
     // 设置水平滚动条
     autoScroll : true,
	 // 自适应宽度 
     autowidth:true,

     height: 385,
     viewrecords: true,
     width:"100%",
     rowNum: 10,
     rowList : [10,26,50],
     rownumbers: true,
     rownumWidth: 25,
     multiselect: true,
     gridComplete:function(){
            // X 轴和 Y 轴的滚动条 隐藏  $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
            // $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
      }
}).trigger("reloadGrid");

然后应该能出来,反正我这是出来了,至于为什么,我是一点儿都不清楚。

希望这个东西对你们有帮助

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值