我正在寻找任何需要在X和Y轴上有行和列标题的GWT网格小部件。这些需要在X和Y轴上无缝滚动。
基本上我正在寻找一个GWT小部件，如下面的URL所示
jsfiddle.net/jschlick/Gv26h /
我们需要在上面的URL中使用http：//进行prifix。以上内容完全用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>