使用jQuery重新调整表列大小
Table column re-sizing using jQuery
我正试图编写一段代码,为我的数据表启用列重新调整大小的功能。但是它不能正常工作。。我在网上浏览了几天,但除了一些插件什么也找不到。但我不想使用任何插件,因为我的数据表非常复杂,如果我使用它们,表的其他功能可能会被破坏。因此,我试着写自己的作品。你能检查并完善我的代码吗?或者建议任何其他符合我规范的代码…
注意:用户可以向右调整列的大小,直到表格宽度,但向左调整,它只在td的左侧位置
Eidt:Maxwell给出了一个很好的替代方案。。它运行良好,但有一种情况。如果我试图向左调整大小,这是不允许的,因为td宽度固定为它的内容宽度。。。但我想通过将td的样式设置为溢出:隐藏或其他方式,将其重新调整到左侧,直到其偏移()。left值。。。。
这是我的一段代码。。。。
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
table{
border-collapse:collapse;
}
table td{
border:1px solid red;
}
.vUiDtColResize{
width:2px;
height:20px;
border:1px solid blue;
float:right;
display:block;
cursor:w-resize;
position:relative;
right:-3px;
float:top;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>S.No <div class="vUiDtColResize"></div></td>
<td>Name <div class="vUiDtColResize"></div></td>
<td>Qualif <div class="vUiDtColResize"></div></td>
</tr>
</thead>
<tbody>
<tr> <td>1</td><td>Rama Rao</td><td>M.C.A</td></tr>
<tr> <td>2</td><td>Dushyanth</td><td>B.Tech</td></tr>
<tr> <td>3</td><td>AnandKumar</td><td>M.C.A</td></tr>
<tr> <td>4</td><td>Veera Reddy</td><td>B.Tech</td></tr>
</tbody>
</table>
<div id="helper"></div>
</body>
<script>
$('.vUiDtColResize').each(function(){
var _rsTd = $(this).parent('td');
var _rsTr = _rsTd.parent('tr');
var _rsTdRight,_thisLeft,_rsTdWidth;
$(this).draggable({axis:'x',containment:_rsTd,refreshPositions:true,
create:function(event,ui){
},
start:function(event,ui){
_rsTdRight = _rsTd.offset().left + _rsTd.outerWidth();
},
drag:function(event,ui){
var _sizeDiff = $(this).offset().left - _rsTdRight;
_rsTdRight = $(this).offset().left;
_rsTdWidth = _rsTd.outerWidth() + _sizeDiff;
_rsTd.outerWidth(_rsTdWidth);
},
stop:function(event,ui){
}
});
});
</script>
</html>
我将您的代码与我发现的一些技术进行了合并——http://jsfiddle.net/tpqn7/
IMHO,还是有一些问题。首先,我想如果可以通过按下每个TH来重新调整表头的大小,而不仅仅是小边框,那会更好(也更容易)。
希望这能有所帮助。
在互联网上探索了几天后,我得到了一个很好的代码,我对它进行了修改,使其也能满足我的要求(当然,我的更改有点小。它可能对其他人有用,所以我在这里发布…
样式
<link rel="stylesheet" href="E:'Examples'BSP'BSPExtensions'jquery-ui-1.8.18.custom.css"/>
<style>
table {
table-layout: fixed;
border-collapse: collapse;
border: 1px solid black;
}
tr.last td {
border-bottom: 1px solid black;
}
td {
border-right: 1px solid black;
border-bottom: 1px solid black;
position: relative;
white-space:nowrap;
padding: 2px 5px;
text-align: left;
overflow:hidden;
}
td.last {
border-right: none;
}
thead td div:first-child{
text-overflow:ellipsis;
overflow:hidden;
}
tbody td div:first-child{
overflow:hidden;
}
.scrollContainer {
overflow:auto;
width:700px;
height:auto;
display:inline-block;
border:1px solid red;
}
@-moz-document url-prefix() {
.resizeHelper,.ui-resizable-e {
position: relative;
float: right;
}
}
</style>
脚本
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script>
/**
* Enables resizable data table columns.
**/
(function($) {
$.widget("ih.resizableColumns", {
_create: function() {
this._initResizable();
},
_initResizable: function() {
var colElement, colWidth, originalSize;
var table = this.element;
this.element.find("thead td").resizable({
handles: {"e": ".resizeHelper"},
minWidth: 2, // default min width in case there is no label
// set correct COL element and original size
start:function(event, ui) {
var colIndex = ui.helper.index() + 1;
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
originalSize = ui.size.width;
},
// set COL width
resize: function(event, ui) {
var resizeDelta = ui.size.width - originalSize;
var newColWidth = colWidth + resizeDelta;
colElement.width(newColWidth);
// height must be set in order to prevent IE9 to set wrong height
$(this).css("height", "auto");
}
});
}
});
// init resizable
$("#MyTable").resizableColumns();
})(jQuery);
</script>
你的html就像:*
<div class="scrollContainer">
<table class="resizable" id="MyTable" width="100%">
<thead>
<tr>
<td class="ui-resizable" style="width:100px;">
<div>
<span >Column 1</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 2</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:300px;">
<div>
<span >Column 3</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:150px;">
<div>
<span >Column 4</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 5</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable last" style="width:100px;">
<div>
<span >Column 6</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
<tr class="last">
<td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
</tbody>
</table>
</div>
相关文章:
- HTML5在浏览器大小javascript/jquery上调整字体大小
- jQuery将侦听器的大小调整为只触发宽度的变化
- jQuery调整大小函数只适用于窗口
- 自动调整jQuery插件的大小,触发自动调整更新
- 使用css调整jquery表中的值
- 调整jQuery手风琴-打开所有选项卡
- 如何调整jQuery函数的属性值
- 在 WebGL/X3DOM 之上调整 jQuery UI 对话框的大小
- 如何调整Jquery Mobile中的所有元素的大小以适合iframe
- 窗口.打开图像大小调整 jQuery.
- 调整jQuery-File-Upload为用户个人资料图像
- 如何调整jQuery动画以使元素保持在中间
- 如何调整jQuery加载的内容的大小's使用CSS的加载方法
- 调整jQuery脚本以添加父元素的高度
- 调整jQuery进度目标表,使其包含待处理表
- 如何调整jQuery手风琴的大小一旦内容加载
- 当鼠标悬停时,是否可以调整jquery库中图形点的大小?
- 根据IFrame内容动态调整JQuery模态对话框的大小
- 根据屏幕宽度调整 jquery 参数
- 缺少像素&调整jquery大小时,Body停止居中