jQuery_jquery에서 ScrollableGridPlugin.js(고정 헤더) 플러그인 사용에 대한 단계별 분석

이 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에서는 이를 파악하지 못했습니다. 이해하는 친구들이 말해주길 바랍니다. 즉, Grid.getElementsByTagName("TR")은 다음과 같습니다. 13과 15[0]); 표면적으로는 이 명령문은 동일한 tr을 얻어야 합니다. 그렇죠? 그러나 브라우저를 통해 추적했을 때 13번의 호출이 그리드의 첫 번째 tr을 얻었음을 발견했습니다. 이는 15번째 열을 포함하는 제목 tr이기도 하지만 그리드의 첫 번째 tr이었습니다. td 열의 첫 번째 데이터 열 tr입니다.

이상한 점은 13을 실행한 후 그리드의 tr 개수가 1개 감소한다는 것입니다. 즉, 번째 열을 포함하는 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>