项目种有用到jqGrid,当表格列信息比较多的时候,头部的拖动效果还是蛮好的,但是存在一个bug,就是拖动之后表格主体部分的宽度会变化,导致thead和tbody部分在视觉上有很大的差距。
效果如下图所示:
修改方法:
在源代码种找到dragEnd: function(a) {}进行修改,我是将dragEnd中的以下代码直接删掉了:
$("table:first", this.bDiv).css("width", c.tblwidth + "px"), $("table:first", this.hDiv).css("width", c.tblwidth + "px"),this.hDiv.scrollLeft = this.bDiv.scrollLeft, c.footerrow && ($("table:first", this.sDiv).css("width", c.tblwidth + "px"), this.sDiv.scrollLeft = this.bDiv.scrollLeft)),
删除之后的dragEnd代码如下:
dragEnd: function(a) {
if (this.hDiv.style.cursor = "default", this.resizing) {
var b = this.resizing.idx,
e = this.headers[b].newWidth || this.headers[b].width;
e = parseInt(e, 10),
this.resizing = !1,
$("#rs_m" + $.jgrid.jqID(c.id)).css("display", "none"),
c.colModel[b].width = e,
this.headers[b].width = e,
this.headers[b].el.style.width = e + "px",
this.cols[b].style.width = e + "px",
this.footers.length > 0 && (this.footers[b].style.width = e + "px"),
c.forceFit === !0 ? (e = this.headers[b + c.nv].newWidth || this.headers[b + c.nv].width, this.headers[b + c.nv].width = e, this.headers[b + c.nv].el.style.width = e + "px", this.cols[b + c.nv].style.width = e + "px", this.footers.length > 0 && (this.footers[b + c.nv].style.width = e + "px"), c.colModel[b + c.nv].width = e) : (c.tblwidth = this.newWidth || c.tblwidth),
a && ($(d).triggerHandler("jqGridResizeStop", [e, b]), $.isFunction(c.resizeStop) && c.resizeStop.call(d, e, b))
}
this.curGbox = null,
document.onselectstart = function() {
return ! 0
}
},
这样,再次拖动表头的时候,就不会出现表格没有对齐的效果了。