0

我正在寻找任何需要在 X 和 Y 轴上具有行和列标题的 GWT 网格小部件。这些需要在 X 和 Y 轴上无缝滚动。

本质上，我正在寻找一个 GWT 小部件，如下面的 URL 所示

jsfiddle.net/jschlick/Gv26h/

我们需要在上面的 URL 中加上 http:// 前缀。以上完全用Java脚本实现。

是否有任何具有上述功能的 GWT 小部件？

任何帮助将非常感激。

    <html>
<header>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body, input {
    /*font: 15px/1em Arial, Helvetica, sans serif;*/
}
-webkit-scrollbar {
    height: 7px;
    width: 7px;
    -webkit-appearance: none;
}
-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.5);
    border-radius: 4px;
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
#divHeader {
    border-bottom: 1px solid #d7d7d7;
    overflow: hidden;
    padding: 0 0 5px 0;
    width: 284px;
}
#firstcol {
    border-right: 1px solid #d7d7d7;
    height: 200px;
    overflow: hidden;
    padding: 0 10px;
}
#table_div {
    height: 210px;
    overflow: scroll;
    position: relative;
    width: 300px;
}
#table_div td {
}
</style>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  fnAdjustTable();
});

fnAdjustTable = function(){

  var colCount = $('#firstTr>td').length; //get total number of column

  var m = 0;
  var n = 0;
  var brow = 'mozilla';

  jQuery.each(jQuery.browser, function(i, val) {
    if(val == true){
      brow = i.toString();
    }
  });

  $('.tableHeader').each(function(i){
    if (m < colCount){

      if (brow == 'mozilla'){
        $('#firstTd').css("width",$('.tableFirstCol').innerWidth());//for adjusting first td
        $(this).css('width',$('#table_div td:eq('+m+')').innerWidth());//for assigning width to table Header div
      }
      else if (brow == 'msie'){
        $('#firstTd').css("width",$('.tableFirstCol').width());
        $(this).css('width',$('#table_div td:eq('+m+')').width()-2);//In IE there is difference of 2 px
      }
      else if (brow == 'safari'){
        $('#firstTd').css("width",$('.tableFirstCol').width());
        $(this).css('width',$('#table_div td:eq('+m+')').width());
      }
      else {
        $('#firstTd').css("width",$('.tableFirstCol').width());
        $(this).css('width',$('#table_div td:eq('+m+')').innerWidth());
      }
    }
    m++;
  });

  $('.tableFirstCol').each(function(i){
    if(brow == 'mozilla'){
      $(this).css('height',$('#table_div td:eq('+colCount*n+')').outerHeight());//for providing height using scrollable table column height
    }
    else if(brow == 'msie'){
      $(this).css('height',$('#table_div td:eq('+colCount*n+')').innerHeight()-2);
    }
    else {
      $(this).css('height',$('#table_div td:eq('+colCount*n+')').height());
    }
    n++;
  });

}

//function to support scrolling of title and first column
fnScroll = function(){
  $('#divHeader').scrollLeft($('#table_div').scrollLeft());
  $('#firstcol').scrollTop($('#table_div').scrollTop());
}
</script>
</header>
<body>
<table cellspacing="0" cellpadding="0" border="1" >
  <tr>
    <td id="firstTd">
    </td>
    <td>
      <div id="divHeader">
        <table cellspacing="0" cellpadding="10" border="1">
          <tr>
            <td>
              <div class="tableHeader">28</div>
            </td>
            <td>
              <div class="tableHeader">30</div>
            </td>
            <td>
              <div class="tableHeader">32</div>
            </td>
            <td>
              <div class="tableHeader">34</div>
            </td>
            <td>
              <div class="tableHeader">36</div>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
  <tr>

    <td valign="top">
      <div id="firstcol">
        <table cellspacing="0" cellpadding="10" border="1">
          <tr>
            <td class="tableFirstCol">32</td>
          </tr>
          <tr>
            <td class="tableFirstCol">32.5</td>
          </tr>
          <tr>
            <td class="tableFirstCol">33</td>
          </tr>
          <tr>
            <td class="tableFirstCol">33.5</td>
          </tr>
          <tr>
            <td class="tableFirstCol">34</td>
          </tr>
          <tr>
            <td class="tableFirstCol">34.5</td>
          </tr>
          <tr>
            <td class="tableFirstCol">36</td>
          </tr>
          <tr>
            <td class="tableFirstCol">36.5</td>
          </tr>
          <tr>
            <td class="tableFirstCol">38</td>
          </tr>
        </table>
      </div>
    </td>

    <td valign="top">
      <div id="table_div" onscroll="fnScroll()" >
        <table width="500px" cellspacing="0" cellpadding="10" border="1">
          <tr id="firstTr">
            <td>Row1Col1</td>
            <td>Row1Col2</td>
            <td>Row1Col3</td>
            <td>Row1Col4</td>
            <td>Row1Col5</td>
          </tr>
          <tr>
            <td>Row2Col1</td>
            <td>Row2Col2</td>
            <td>Row2Col3</td>
            <td>Row2Col4</td>
            <td>Row2Col5</td>
          </tr>
          <tr>
            <td>Row3Col1</td>
            <td>Row3Col2</td>
            <td>Row3Col3</td>
            <td>Row3Col4</td>
            <td>Row3Col5</td>
          </tr>
          <tr>
            <td>Row4Col1</td>
            <td>Row4Col2</td>
            <td>Row4Col3</td>
            <td>Row4Col4</td>
            <td>Row4Col5</td>
          </tr>
          <tr>
            <td>Row5Col1</td>
            <td>Row5Col2</td>
            <td>Row5Col3</td>
            <td>Row5Col4</td>
            <td>Row5Col5</td>
          </tr>
          <tr>
            <td>Row6Col1</td>
            <td>Row6Col2</td>
            <td>Row6Col3</td>
            <td>Row6Col4</td>
            <td>Row6Col5</td>
          </tr>
          <tr>
            <td>Row7Col1</td>
            <td>Row7Col2</td>
            <td>Row7Col3</td>
            <td>Row7Col4</td>
            <td>Row7Col5</td>
          </tr>
          <tr>
            <td>Row8Col1</td>
            <td>Row8Col2</td>
            <td>Row8Col3</td>
            <td>Row8Col4</td>
            <td>Row8Col5</td>
          </tr>
          <tr>
            <td>Row9Col1</td>
            <td>Row9Col2</td>
            <td>Row9Col3</td>
            <td>Row9Col4</td>
            <td>Row9Col5</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>
</body>
</html>
4

0 回答 0