博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析
阅读量:5869 次
发布时间:2019-06-19

本文共 4291 字,大约阅读时间需要 14 分钟。

1 /*! 2 * This plug-in is developed for ASP.Net GridView control to make the GridView scrollable with Fixed headers. 3 */ 4 (function ($) { 5     //1、定义一个jQuery实例方法,也是我们调用这个插件的入口 6     $.fn.Scrollable = function (options) { 7         var defaults = { 8             ScrollHeight: 300, 9             Width: 010         };11         //2、扩展集合,如果外部没有传入ScrollHeight的值,就默认使用300这个值,如果传入,就用传入的ScrollHeight值12         var options = $.extend(defaults, options);13         return this.each(function () {14             //3、获取当前gridview控件的对象15             var grid = $(this).get(0);16             //4、获取gridview的宽度17             var gridWidth = grid.offsetWidth;18             var headerCellWidths = new Array();19             //5、创建了一个存储表头各个标题列的宽度的数组20             for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {21                 headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;22             }23             //6、在文档中gridview的同级位置最后加一个div元素24             grid.parentNode.appendChild(document.createElement("div"));25             //7、gridview的父节点,是个div26             var parentDiv = grid.parentNode;27 28             //8、在dom中创建一个table元素29             var table = document.createElement("table");30             //9、把gridview的所有属性加到新创建的table元素上31             for (i = 0; i < grid.attributes.length; i++) {32                 if (grid.attributes[i].specified && grid.attributes[i].name != "id") {33                     table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);34                 }35             }36             //10、将样式也加到table元素上37             table.style.cssText = grid.style.cssText;38             //11、为table元素设置与gridview同样的宽39             table.style.width = gridWidth + "px";40             //12、为table元素加一个tbody元素41             table.appendChild(document.createElement("tbody"));42             //13、把gridview中的第一行数据加到tbody元素中,即table里现在存着一行gridview的标题元素,43             //同时在gridview里删除了标题这一行的元素44             table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);45             //14、取得表格标题列的集合46             var cells = table.getElementsByTagName("TH");47 48             //15、gridview中第一行数据列的集合49             var gridRow = grid.getElementsByTagName("TR")[0]; 50             for (var i = 0; i < cells.length; i++) {51                 var width;52                 //16、如果标题格的宽度大于数据列的宽度53                 if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {54                     width = headerCellWidths[i];55                 }56                 //17、如果标题格的宽度小于数据列的宽度57                 else {58                     width = gridRow.getElementsByTagName("TD")[i].offsetWidth;59                 }60                 cells[i].style.width = parseInt(width - 3) + "px";61                 //18、将每个标题列和数据列的宽度均调整为取其中更宽的一个,-3是出于对表格的样式进行微调考虑,不是必须62                 gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; 63             }64             //19、删除gridview控件(注意只是从文档流中删除,实际还在内存当中,注意27条,现在的情况是table里只有一个表头65             parentDiv.removeChild(grid);66             //20、在文档中再创建一个div元素67             var dummyHeader = document.createElement("div");68             //21、把表头table加入其中69             dummyHeader.appendChild(table);70             //22、把这个div插入到原来gridview的位置里 71             parentDiv.appendChild(dummyHeader);72             //23、如果我们最初传入了一个想要的表格宽度值,就将gridWidth赋上这个值73             if (options.Width > 0) {74                 gridWidth = options.Width;75             }76             //24、再创建一个div77             var scrollableDiv = document.createElement("div");78             //25、在原基础上+17是因为这是一个具有滑动条的table,当出现滑动条的时候,79             //会在宽度上多出一个条的宽度,为了使数据列与标题列保持一致,要把这个宽度算进行,80             //17这个值也不是必须,这个可以试验着来。81             gridWidth = parseInt(gridWidth) + 17;82             //26、给具有滚动条的div加上样式,height就是我们想让它在多大的长度时出现滚动条83             scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";84             //27、将gridview(目前只存在数据存在数据列)加到这个带有滚动条的div中,这里是从内存中将grid取出85             scrollableDiv.appendChild(grid);86             //28、将带有滚动条的div加到table的下面87             parentDiv.appendChild(scrollableDiv);88         });89     };90 })(jQuery);
1 2 

 

转载于:https://www.cnblogs.com/lgx5/p/10057706.html

你可能感兴趣的文章
13_04_Linux进程管理之二
查看>>
struts2防止重复提交
查看>>
MyEclipse8.6启动后提示内存不足的解决方案(亲测,完美解决)
查看>>
火狐优化技巧,优化之后速度远超chrome
查看>>
BMP格式图像文件详析
查看>>
去掉ListView GridView 点击内容,item背景出现黄色背景
查看>>
android 文件系统目录分析(手机系统目录分析)
查看>>
IE输入网址总是跳到搜狗页面
查看>>
我的友情链接
查看>>
文本在内存中的编码(1)——乱码探源(4)
查看>>
vsftp虚拟目录
查看>>
JS数组去重
查看>>
单例实现的一种巧妙方式
查看>>
我的友情链接
查看>>
Oracle数据库之SQL子查询详解
查看>>
linux 基础复习
查看>>
Nginx反向代理 代理参数配置
查看>>
hosts文件管理工具
查看>>
APP-V 5.0 单机部署实践-草稿
查看>>
一直在路上
查看>>