for (var i = 0; i < cells.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {//16、如果标题格的宽度大于数据列的宽度
width = headerCellWidths[i];
}
else {//17、如果标题格的宽度小于数据列的宽度
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
cells[i].style.width = parseInt(width - 3) + "px";
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";//18、将每个标题列和数据列的宽度均调整为取其中更宽的一个,-3是出于对表格的样式进行微调考虑,不是必须
}
parentDiv.removeChild(grid);//19、删除gridview控件(注意只是从文档流中删除,实际还在内存当中,注意27条),现在的情况是table里只有一个表头
var dummyHeader = document.createElement("div");//20、在文档中再创建一个div元素
dummyHeader.appendChild(table);//21、把表头table加入其中
parentDiv.appendChild(dummyHeader);//22、把这个div插入到原来gridview的位置里
if (options.Width > 0) {//23、如果我们最初传入了一个想要的表格宽度值,就将gridWidth赋上这个值
gridWidth = options.Width;
}
var scrollableDiv = document.createElement("div");//24、再创建一个div
gridWidth = parseInt(gridWidth) + 17;//25、在原基础上+17是因为这是一个具有滑动条的table,当出现滑动条的时候,会在宽度上多出一个条的宽度,为了使数据列与标题列保持一致,要把这个宽度算进行,17这个值也不是必须,这个可以试验着来。
scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";//26、给具有滚动条的div加上样式,height就是我们想让它在多大的长度时出现滚动条
scrollableDiv.appendChild(grid);//27、将gridview(目前只存在数据存在数据列)加到这个带有滚动条的div中,这里是从内存中将grid取出
parentDiv.appendChild(scrollableDiv);//28、将带有滚动条的div加到table的下面
});
};
})(jQuery);
只有弄明白插件内部是怎么回事,才能知道如何去修改。
其实这里有个地方我还是不太明白,baidu之后也没能弄明白,希望明白的朋友能告诉一下,就是13和15这两个地方都用了grid.getElementsByTagName(“TR”)[0]);这条语句,从表面上看应该是得到的同一个tr吧?但是我通过浏览器去跟踪的时候,发现13里调用的,得到的是grid的第一个tr,就是包含th列的标题tr,15里的也是grid里的第一个tr,但是包含的是td列的第一条数据列tr。
怪就怪在执行完13后,grid里tr数少了1,就是少了包含th列的tr。我以为是appendChild方法是转移元素进行插入,而不是复制元素进行插入,但是通过查这个方法并没有明确说明是我想的那么回事。我就有些懵了。










