<html>
<head>
<title> 动态调整列宽-包子剑客-V3 </title>
<!--2010.02.04 包子剑客 广州-->
<style>
table{table-layout:fixed}
td{white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}
th{border:1px solid Black;}
</style>
<script>
var curCol,curTable;//获取左边的位置
var curCol_left,newPlace;
var dragState=0;
function getTable(item)
{
var obj = null;
do {
if (item.tagName == "TABLE"){
obj = item;
break;
}
item = item.offsetParent;
} while (item != null);
return obj;
}
function calculateOffset(item, offsetName)
{
var totalOffset = 0;
do{
totalOffset += eval('item.offset' + offsetName);
item = item.offsetParent;
} while (item != null);
return totalOffset;
}
function drag_colMov(objCol){
if (dragState > 1) return true;
curCol_left = calculateOffset(objCol, "Left");
curTable =getTable(objCol);
if (window.event.x + window.document.body.scrollLeft > curCol_left + objCol.offsetWidth - 5){
//移动到了相应的部位,改变鼠标指针
dragState = 1;
curTable.style.cursor = "col-resize";
curCol = objCol;
}else if (dragState<=1){
dragState = 0;
curTable.style.cursor = "default";
}
}
function drag_colOut(objCol){
if (dragState<=1) {
curTable.style.cursor = "default";
dragState = 0;
}
}
function drag_tableDow(objTable){
if (1 == dragState){
curTable.style.cursor = "col-resize";
dragState = 2;
}else{
curTable.style.cursor = "default";
}
}
function drag_tableMov(objTable) {
if (dragState >= 2) {
curTable.style.cursor = "col-resize";
dragState=3;
var newPlace = window.event.x + window.document.body.scrollLeft
var curWidth = newPlace - curCol_left;
curCol.style.width = curWidth + "px"; //调整列宽度
}
}
function drag_tableUp(objTable){
curTable.style.cursor = "default";
dragState=0;
}
</script>
</head>
<body>
<!--
使用自动省略的条件:
table 样式包含 style="table-layout:fixed;"
td 样式包含 style="white-space:nowrap;overflow: hidden;text-overflow:ellipsis;"
-->
<table style="border:1px solid red;table-layout:fixed;" onmousedown="drag_tableDow(this)" onmouseup="drag_tableUp(this)" onmousemove="drag_tableMov(this)" >
<tr>
<th width="25%" onmousemove="drag_colMov(this)" onmouseout="drag_colOut(this)">id</th>
<th width="10%" onmousemove="drag_colMov(this)" onmouseout="drag_colOut(this)">name</th>
<th width="15%" onmousemove="drag_colMov(this)" onmouseout="drag_colOut(this)">pass</th>
<th>sec</th>
</tr>
<tr>
<td>多出部分自动省略的效果,这里有自动省略的效果</td>
<td>baoziasfgdsgasdgsadfsffsdf</td>
<td>12345421545235235636</td>
<td>1</td>
</tr>
<tr>
<td>112412453245235235325</td>
<td>zhqwryqeirtearfew</td>
<td>1254215qei略的略的qeiqeiqei45234</td>
<td>0</td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
在第二种自动调整列宽的方法中,我们通过遍历所有`ListViewItem`并使用`TextRenderer.MeasureText`方法测量每个项目文本的宽度来动态调整列宽。 ### 实现自动调整列宽 #### 方法一:使用 ...
然而,HTML默认的表格布局并不支持动态调整列宽。为了实现这个功能,我们需要借助CSS和JavaScript。 在CSS中,我们可以通过设置`table`、`th`、`td`等元素的样式来控制表格的外观。例如,我们可以设定`white-space:...
自定义QTableView以根据内容动态调整列宽是一项实用功能,可以提高用户体验,确保所有数据显示完整,避免了用户手动调整列宽的不便。本文将详细讲解如何实现这一功能。 首先,我们需要理解QTableView的基本结构和...
这个实例利用JavaScript实现,允许用户通过简单的鼠标操作来动态调整表格列的宽度,从而更好地查看和理解数据。 JavaScript是一种强大的客户端脚本语言,它在浏览器环境中运行,为网页添加动态功能。在这个实例中,...
4. **编程实现**:在一些高级应用中,可以通过编程语言(如VBA for Excel,Python的pandas库等)编写自定义脚本来实现更复杂的自动调整逻辑,比如根据特定条件动态调整列宽。 5. **响应式设计**:在Web端的表格应用...
在实际应用中,用户可能...这个插件的简单API使得集成到现有项目变得非常容易,只需几行代码就能赋予静态表格动态调整的能力。在处理大量数据或者需要用户个性化定制查看体验的场景下,ZTable是一个非常实用的工具。
这个程序主要涉及了易语言中的“超级列表框”组件以及如何根据内容动态调整列宽的技术。 超级列表框是易语言提供的一种可视化控件,用于展示多行多列的数据。它在许多界面设计中被广泛应用,比如文件管理器、数据库...
为此,我们可以编写代码来动态调整列宽。 1. **编程接口(API)**: - 使用`Get Table Column Properties`函数获取表格的列属性,包括当前的列宽。 - 使用`Set Table Column Properties`函数设置新的列宽。根据...
虽然动态调整列宽可以提供更好的用户体验,但也可能影响性能。为了避免不必要的测量和布局操作,可以在数据集变化不大时缓存列宽,只在必要的时候进行重新计算。 8. **兼容性测试**: 在不同的设备和屏幕尺寸上...
"FlexGrid自动设置列宽"这一主题涉及到如何让FlexGrid根据其内容动态调整列宽,以确保所有数据都能完全可见且布局美观。 在FlexGrid中,自动设置列宽意味着不再需要手动为每一列指定宽度,而是让系统根据单元格中的...
这意味着表格应能在不同屏幕尺寸下自适应,列宽根据设备的可用空间动态调整。这可能需要用到媒体查询(media queries)或者 Flexbox 或 Grid 布局。 6. **性能优化**:频繁的DOM操作可能会影响页面性能。为了避免...
运行Demo,观察窗口大小变化时列表控件列宽的动态调整,以及用户手动调整列宽时控件的响应,这将有助于你更好地理解和应用这个功能。 总之,CListCtrl控件在Windows应用程序开发中有着广泛的应用。通过重载特定的...
易语言高级表格自动调整列宽源码是实现这一功能的代码实例,它通过分析表格内的数据长度,动态地计算并设置各列的宽度,确保最长的单元格内容能够完全显示,同时避免其他列过于宽大,浪费界面空间。这涉及到对表格...
在IT行业中,尤其是在网页开发和...综上所述,实现“可以调整列宽的表格”涉及HTML表格布局、CSS样式控制以及JavaScript事件监听和动态调整。通过这样的功能,用户可以更方便地查看和管理表格中的数据,提升用户体验。
4. **结合用户交互**:可以允许用户通过双击列头来动态调整列宽,同时在数据窗口的ColumnResize事件中加入代码,保持其他列的相对比例,以实现更灵活的自适应效果。 5. **预定义样式**:如果项目中有多个数据窗口...
在PowerBuilder中,数据窗口不仅提供了静态的数据展示,还支持动态调整列宽这一高级功能。以下是关于数据窗口动态调整的一些关键知识点: 1. **数据窗口对象**:数据窗口是PowerBuilder的核心组件之一,用于显示和...
在实际应用中,可能需要根据数据内容动态调整列宽。例如,你可以编写一个函数来遍历每列,根据列中数据的最大长度来自动调整列宽: ```vb Sub AdjustColumnWidths() Dim i As Integer Dim maxLen As Integer ...
通过监听和响应这些事件,我们可以编写代码动态调整列宽。 3. **算法实现**:自动调整列宽通常需要一个算法来计算最佳的列宽。这个算法可能基于文字的长度、窗口的大小、字体的设置等因素。例如,可以遍历所有行,...
本主题将深入探讨“DataGrid可调整列宽的表格可排序”这一特性,以及与之相关的技术点。 首先,`DataGrid` 是一种网格布局控件,广泛应用于Windows Forms、WPF、ASP.NET、Xamarin.Forms等多个平台。它允许程序员以...
总结来说,解决WPF ListView最小列宽问题,可以通过在XAML中设置`MinWidth`属性、使用`Width`属性或伸展模式,以及监听`SizeChanged`事件动态调整列宽。结合自定义列头模板和用户交互,我们可以创建出高度可定制且...