jqgrid v5.0.1 列数多的时候 setGridWidth 表头和内容对不齐

经测,setGridWidth方法改的并不是第一行的宽度,而是第一行后几行的宽度。所以要加上第一行的宽度。

最后几行代码改的是最后一列的宽度,然而并没有用。滚动条在表格之外。

本地4263行开始

$.each($t.p.colModel, function(i) {
					if(this.hidden === false && !this.fixed){
						cw = this.widthOrg;
						cw = Math.round(aw*cw/($t.p.tblwidth-brd*vc-gw));
						if (cw < 0) { return; }
						this.width =cw;
						initwidth += cw;
						$t.grid.headers[i].width=cw;
						$t.grid.headers[i].el.style.width = cw + "px";
						$($t.grid.hDiv).find('.jqg-first-row-header th:eq(' + i + ')').css({width:cw + "px"});//mod by xss 窗口缩放时发现对不齐
						if($t.p.footerrow) { $t.grid.footers[i].style.width = cw+"px"; }
						if(cle) { $t.grid.cols[i].style.width = cw+"px"; }
						lvc = i;
					}
				});

				if (!lvc) { return; }

				cr =0;
				if (hs) {
					if(nwidth-gw-(initwidth+brd*vc) !== scw){
						cr = nwidth-gw-(initwidth+brd*vc)-scw;
					}
				} else if( Math.abs(nwidth-gw-(initwidth+brd*vc)) !== 1) {
					cr = nwidth-gw-(initwidth+brd*vc);
				}
				$t.p.colModel[lvc].width += cr;
				$t.p.tblwidth = initwidth+cr+brd*vc+gw;
				if($t.p.tblwidth > nwidth) {
					var delta = $t.p.tblwidth - parseInt(nwidth,10);
					$t.p.tblwidth = nwidth;
					cw = $t.p.colModel[lvc].width = $t.p.colModel[lvc].width-delta;
				} else {
					cw= $t.p.colModel[lvc].width;
				}
			    //mod by xss
				//$t.grid.headers[lvc].width = cw;
				//$t.grid.headers[lvc].el.style.width = cw + "px";
				//$($t.grid.hDiv).find('.jqg-first-row-header th:eq(' + lvc + ')').css({ width: cw + "px" });//mod by xss
				//if(cle) { $t.grid.cols[lvc].style.width = cw+"px"; }
				if($t.p.footerrow) {
					//$t.grid.footers[lvc].style.width = cw+"px";
				}

  

转载于:https://www.cnblogs.com/qmgcs/p/5567845.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用jqGrid的事件和方法来实现双击表头箭头展开该内容的功能。以下是一个简单的示例代码: ```javascript // 初始化jqGrid $("#grid").jqGrid({ url: "data.json", datatype: "json", colNames:['ID','姓名','年龄','性别'], colModel:[ {name:'id',index:'id', width:60}, {name:'name',index:'name', width:100}, {name:'age',index:'age', width:80}, {name:'gender',index:'gender', width:80} ], rowNum:10, rowList:[10,20,30], pager: '#pager', sortname: 'id', viewrecords: true, sortorder: "asc", caption:"双击表头箭头展开该内容" }); // 双击表头事件 $(".ui-jqgrid-labels").on("dblclick", "th", function () { var colIndex = $(this).index(); // 获取的索引 var colModel = $("#grid").jqGrid('getGridParam', 'colModel'); // 获取模型 var colName = colModel[colIndex].name; // 获取的名称 var rowData = $("#grid").jqGrid('getRowData'); // 获取所有行的数据 var rowDataArr = []; // 存储该所有行的数据 // 遍历所有行的数据,并将该的数据存储到数组中 for (var i = 0; i < rowData.length; i++) { rowDataArr.push(rowData[i][colName]); } // 将该的数据渲染到页面上 $(this).find(".ui-jqgrid-sortable").after("<div class='col-data'>" + rowDataArr.join("<br>") + "</div>"); }); // 点击其他位置收起数据 $(document).on("click", function (e) { var target = e.target; if (!$(target).hasClass("ui-jqgrid-labels") && !$(target).hasClass("col-data")) { $(".col-data").remove(); } }); ``` 在上面的代码中,我们首先初始化了一个jqGrid,并在双击表头事件中获取了该的数据并将其渲染到页面上。然后,我们通过点击其他位置来收起该的数据。你可以根据自己的需求来修改代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值