`
zheyiw
  • 浏览: 1009215 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

动态调整列宽

 
阅读更多 
<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>
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ListView 自动调整列宽

    在第二种自动调整列宽的方法中，我们通过遍历所有`ListViewItem`并使用`TextRenderer.MeasureText`方法测量每个项目文本的宽度来动态调整列宽。 ### 实现自动调整列宽 #### 方法一：使用 ...

    可调整列宽TABLE

    然而，HTML默认的表格布局并不支持动态调整列宽。为了实现这个功能，我们需要借助CSS和JavaScript。 在CSS中，我们可以通过设置`table`、`th`、`td`等元素的样式来控制表格的外观。例如，我们可以设定`white-space:...

    Qt 自定义Tableview，根据内容调整列宽

    自定义QTableView以根据内容动态调整列宽是一项实用功能，可以提高用户体验，确保所有数据显示完整，避免了用户手动调整列宽的不便。本文将详细讲解如何实现这一功能。 首先，我们需要理解QTableView的基本结构和...

    鼠标拖动调整table列宽实例

    这个实例利用JavaScript实现，允许用户通过简单的鼠标操作来动态调整表格列的宽度，从而更好地查看和理解数据。 JavaScript是一种强大的客户端脚本语言，它在浏览器环境中运行，为网页添加动态功能。在这个实例中，...

    完整版高级表格自动调整列宽例程.rar

    4. **编程实现**：在一些高级应用中，可以通过编程语言（如VBA for Excel，Python的pandas库等）编写自定义脚本来实现更复杂的自动调整逻辑，比如根据特定条件动态调整列宽。 5. **响应式设计**：在Web端的表格应用...

    html表格table调整列宽的例子

    在实际应用中，用户可能...这个插件的简单API使得集成到现有项目变得非常容易，只需几行代码就能赋予静态表格动态调整的能力。在处理大量数据或者需要用户个性化定制查看体验的场景下，ZTable是一个非常实用的工具。

    易语言源代码_超级列表框自动调整列宽.zip

    这个程序主要涉及了易语言中的“超级列表框”组件以及如何根据内容动态调整列宽的技术。 超级列表框是易语言提供的一种可视化控件，用于展示多行多列的数据。它在许多界面设计中被广泛应用，比如文件管理器、数据库...

    LabVIEW表格列宽自动调节.rar

    为此，我们可以编写代码来动态调整列宽。 1. **编程接口（API）**： - 使用`Get Table Column Properties`函数获取表格的列属性，包括当前的列宽。 - 使用`Set Table Column Properties`函数设置新的列宽。根据...

    自动调整gridview列宽的程序

    虽然动态调整列宽可以提供更好的用户体验，但也可能影响性能。为了避免不必要的测量和布局操作，可以在数据集变化不大时缓存列宽，只在必要的时候进行重新计算。 8. **兼容性测试**： 在不同的设备和屏幕尺寸上...

    FlexGrid自动设置列宽

    "FlexGrid自动设置列宽"这一主题涉及到如何让FlexGrid根据其内容动态调整列宽，以确保所有数据都能完全可见且布局美观。 在FlexGrid中，自动设置列宽意味着不再需要手动为每一列指定宽度，而是让系统根据单元格中的...

    JS可调整列宽表格

    这意味着表格应能在不同屏幕尺寸下自适应，列宽根据设备的可用空间动态调整。这可能需要用到媒体查询（media queries）或者 Flexbox 或 Grid 布局。 6. **性能优化**：频繁的DOM操作可能会影响页面性能。为了避免...

    自动调整列宽的列表控件

    运行Demo，观察窗口大小变化时列表控件列宽的动态调整，以及用户手动调整列宽时控件的响应，这将有助于你更好地理解和应用这个功能。 总之，CListCtrl控件在Windows应用程序开发中有着广泛的应用。通过重载特定的...

    易语言高级表格自动调整列宽源码

    易语言高级表格自动调整列宽源码是实现这一功能的代码实例，它通过分析表格内的数据长度，动态地计算并设置各列的宽度，确保最长的单元格内容能够完全显示，同时避免其他列过于宽大，浪费界面空间。这涉及到对表格...

    可以调整列宽的表格

    在IT行业中，尤其是在网页开发和...综上所述，实现“可以调整列宽的表格”涉及HTML表格布局、CSS样式控制以及JavaScript事件监听和动态调整。通过这样的功能，用户可以更方便地查看和管理表格中的数据，提升用户体验。

    PB自动实现列宽

    4. **结合用户交互**：可以允许用户通过双击列头来动态调整列宽，同时在数据窗口的ColumnResize事件中加入代码，保持其他列的相对比例，以实现更灵活的自适应效果。 5. **预定义样式**：如果项目中有多个数据窗口...

    pb数据窗口动态调整

    在PowerBuilder中，数据窗口不仅提供了静态的数据展示，还支持动态调整列宽这一高级功能。以下是关于数据窗口动态调整的一些关键知识点： 1. **数据窗口对象**：数据窗口是PowerBuilder的核心组件之一，用于显示和...

    VB中Felx Grid控件设计时如何改变列宽

    在实际应用中，可能需要根据数据内容动态调整列宽。例如，你可以编写一个函数来遍历每列，根据列中数据的最大长度来自动调整列宽： ```vb Sub AdjustColumnWidths() Dim i As Integer Dim maxLen As Integer ...

    易语言超级列表框列宽尺寸自动调整

    通过监听和响应这些事件，我们可以编写代码动态调整列宽。 3. **算法实现**：自动调整列宽通常需要一个算法来计算最佳的列宽。这个算法可能基于文字的长度、窗口的大小、字体的设置等因素。例如，可以遍历所有行，...

    DataGrid可调整列宽的表格可排序

    本主题将深入探讨“DataGrid可调整列宽的表格可排序”这一特性，以及与之相关的技术点。 首先，`DataGrid` 是一种网格布局控件，广泛应用于Windows Forms、WPF、ASP.NET、Xamarin.Forms等多个平台。它允许程序员以...

    解决wpf ListView最小列宽问题

    总结来说，解决WPF ListView最小列宽问题，可以通过在XAML中设置`MinWidth`属性、使用`Width`属性或伸展模式，以及监听`SizeChanged`事件动态调整列宽。结合自定义列头模板和用户交互，我们可以创建出高度可定制且...

Magicbox
Global site tag (gtag.js) - Google Analytics