动态调整列宽

最新推荐文章于 2024-03-15 09:35:51 发布

包达叔

最新推荐文章于 2024-03-15 09:35:51 发布

阅读量166

点赞数

<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>

包达叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态调整列宽

[code="java"] 动态调整列宽-包子剑客-V3 table{table-layout:fixed}td{white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}th{border:1px solid Black;}var curCol,curTable;//获取左边的位置v...
复制链接

扫一扫