以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只结果,不追求过程

这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的。不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目。

对于js我完全是一个非常业余的选手,下面根据自己的现状对这个插件做了分析,反正自己是搞明白怎么回事了,有分析不对的,还请高手指教。

/*!* This plug-in is developed for ASP.Net GridView control to make the GridView scrollable with Fixed headers.*/(function ($) {  $.fn.Scrollable = function (options) {//1、定义一个jQuery实例方法,也是我们调用这个插件的入口    var defaults = {      ScrollHeight: 300,      Width: 0    };    var options = $.extend(defaults, options); //2、扩展集合,如果外部没有传入ScrollHeight的值,就默认使用300这个值,如果传入,就用传入的ScrollHeight值    return this.each(function () {      var grid = $(this).get(0);//3、获取当前gridview控件的对象      var gridWidth = grid.offsetWidth;//4、获取gridview的宽度      var headerCellWidths = new Array();      for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {        headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;      }//5、创建了一个存储表头各个标题列的宽度的数组      grid.parentNode.appendChild(document.createElement("div"));//6、在文档中gridview的同级位置最后加一个div元素      var parentDiv = grid.parentNode;//7、gridview的父节点,是个div      var table = document.createElement("table");//8、在dom中创建一个table元素      for (i = 0; i < grid.attributes.length; i++) {        if (grid.attributes[i].specified && grid.attributes[i].name != "id") {          table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);        }      }//9、把gridview的所有属性加到新创建的table元素上      table.style.cssText = grid.style.cssText;//10、将样式也加到table元素上      table.style.width = gridWidth + "px";//11、为table元素设置与gridview同样的宽      table.appendChild(document.createElement("tbody"));//12、为table元素加一个tbody元素      table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);//13、把gridview中的第一行数据加到tbody元素中,即table里现在存着一行gridview的标题元素,同时在gridview里删除了标题这一行的元素      var cells = table.getElementsByTagName("TH");//14、取得表格标题列的集合      var gridRow = grid.getElementsByTagName("TR")[0];//15、gridview中第一行数据列的集合      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方法是转移元素进行插入,而不是复制元素进行插入,但是通过查这个方法并没有明确说明是我想的那么回事。我就有些懵了。

这个插件的调用方法如下,感兴趣的朋友可以使用试试,感觉真的非常好。

  <script type="text/javascript" src="../Scripts/PlugIn/ScrollableGridPlugin.js"></script>  <script type="text/javascript">    jQuery(document).ready(function () {      jQuery("#<%=gv_bugList.ClientID %>").Scrollable({        ScrollHeight: 400,        width: 500      });    })  </script>
最新资讯
美国三轮打压下华为首个业绩出炉:三季度收入同比增长9.9%

美国三轮打压下华为首

华为表示,2020年前三季度业务经营结果基本符合预期。不
李楠上手iPhone 12 Pro:直言屏幕黑边开倒车

李楠上手iPhone 12 Pr

原魅族科技高级副总裁、怒喵科技创始人李楠第一时间入
短视频平台“金融鸡汤”漏洞百出 谁在收割智商税?

短视频平台“金融鸡汤

在这一广告视频中,背景音提问:如果中了500万,你会怎么花?
特斯拉:中国区全自动驾驶(FSD)目前不会涨价

特斯拉:中国区全自动驾

特斯拉对外事务副总裁陶琳发布微博表示:中国区FSD(完全
派费一降再降、罚款重,快递小哥掀起罢工潮

派费一降再降、罚款重

派送员张坤向猎云网透露到,这是自己罢工的第三天,与其说
陆金所赴美上市价格区间确定,IPO外部环境复杂致定价不高

陆金所赴美上市价格区

市场瞩目的陆金所赴美IPO有了重要进展。随着其招股书
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,