注:我的原始问题是,我是否应当使用<代码><div>s 或<table>s for this mission。 我本人找到了答案:<div>s 超过“0”和“ Chrome”两倍以上,如果你有“2000年增长”。 因此,你必须为此使用<代码><table>。 我决定重新回答我的问题,以说明如何做到这一点(用可再生的栏目和用jQuery UI选择的行文)。 希望这对任何人都是有益的。
I m 提供网络应用(主要是数据输入和校内使用)。 a. 需要以一种直截了当的方式从表表上提供某些数据(浏览量,列栏),但有一些要求:
- Data are received as JSON array with rigid format and need to be inserted from JavaScript.
- Columns must be resizable.
- Rows must be selectable.
- Body must be scrollable, header must stay above.
这一功能中有许多现成的Java文本部分,但最完整的部分是吸收的,成本高昂,而且有ug。
由于我已经不得不利用 j作为模式的方言和标语,我决定尝试可使用和可当选效应。 我设法利用一些trick子,让他们为静默的超文本桌工作。 这里是法典。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type= text/javascript src= ../Scripts/jQuery.js ></script>
<script type= text/javascript src= ../Scripts/jQuery-ui.js ></script>
<link href="../Css/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<style type= text/css >
.selectable .ui-selecting { background: #FECA40; }
.selectable .ui-selected { background: #F39814; color: white; }
.NCList table { table-layout:fixed; }
.nc-cell { overflow: hidden; white-space:nowrap; }
.NCList .ui-resizable-e { background: gray; }
.NCList .y-scroll { overflow-y:auto; overflow-x:hidden; }
</style>
<script type="text/javascript">
$(function() {
var element = $( #MyParentDiv );
$(".selectable", element).selectable({filter: tr });
$(".th0", element).resizable({
alsoResize: #MyParentDiv .header-container ,
stop: function(event, ui) {
var width1 = $(".th0", element).width();
$( .col0 , element).width(width1);
width1 = $(".header-container", element).width();
$( .y-scroll , element).width(width1);
},
handles: e });
$(".th1", element).resizable({
alsoResize: #MyParentDiv .header-container ,
stop: function(event, ui) {
var width1 = $(".th1", element).width();
$( .col1 , element).width(width1);
width1 = $(".header-container", element).width();
$( .y-scroll , element).width(width1);
},
handles: e });
});
</script>
</head>
<body>
<div id="MyParentDiv" class="NCList">
<div class="header-container" style="width:215px;">
<table><thead><tr>
<th><div class="nc-cell th0" style="width:100px;">
Short name
</div></th>
<th><div class="nc-cell th1" style="width:100px;">
Name
</div></th>
</tr></thead></table>
</div>
<div class="y-scroll" style="max-height:100px;width:215px;">
<table class="valuefield">
<tbody class="selectable">
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<html>