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 を取得したことがわかりました。これは、 番目の列を含むタイトル tr です。15 の呼び出しもグリッドの最初の 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>