`

可调节列宽的JavaScript示例

阅读更多
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #333333;
}
-->
</style>
</head>

<body>
<div>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;">
 <colgroup>
  <col style="width:200px;" />
  <col style="width:100px;" />
  <col style="width:100px;" />
  <col style="width:100px;" />
  <col style="width:100px;" />
 </colgroup>
 <tr>
  <td>拖动我1</td>
  <td>拖动我2</td>
  <td>拖动我3</td>
  <td>拖动我4</td>
  <td>拖动我5</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>
</div>
<script language="javascript" type="text/javascript">
var JPos = {};
(function($){
 
 $.getAbsPos = function(pTarget){
  var x_ = y_ = 0;
 
  if(pTarget.style.position != "absolute"){ 
   while(pTarget.offsetParent){
     x_ += pTarget.offsetLeft;
     y_ += pTarget.offsetTop;
     pTarget = pTarget.offsetParent;
   }
  }
   x_ += pTarget.offsetLeft;
   y_ += pTarget.offsetTop;
  return {x:x_,y:y_};
 }
 
 $.getEventPos = function(evt){
   var _x,_y;
   evt = JEvent.getEvent(evt);
   if(evt.pageX || evt.pageY){
    _x = evt.pageX;
    _y = evt.pageY;
   }else if(evt.clientX || evt.clientY){
    _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);
    _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);
   }else{
    return $.getAbsPos(evt.target);
   }
   return {x:_x,y:_y};
 }
 
})(JPos);

//=======================================================================================

var JEvent = {};
(function($){
 $.getEvent = function(evt){    
  evt = window.event || evt;
    
  if(!evt){
   var fun = JEvent.getEvent.caller;
   while(fun != null){
    evt = fun.arguments[0];
    if(evt && evt.constructor == Event)
     break;
    fun = fun.caller;
   }
  }
  
  return evt;
 }
 
 $.doEvent = function(fun){
  var args = arguments;
  return function(){
   return fun(args);
  }
 }
})(JEvent);
//=======================================================================================

var colIndex;
var dataTable = document.getElementById("dataTable");
var cols = dataTable.getElementsByTagName("COL");

var dragMask = document.createElement("DIV");
var mAWidth = mAHeight = 300;
document.body.insertBefore(dragMask,document.body.lastChild);
dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;";

var mask_mousemove = function(evt){
 if(document.selection){//IE ,Opera
  if(document.selection.empty)
   document.selection.empty();//IE
  else{//Opera
   document.selection = null;
  }
 }else if(window.getSelection){//FF,Safari
  window.getSelection().removeAllRanges();
 }
 
 var oPos = JPos.getAbsPos(this);
 var mPos = JPos.getEventPos(evt);
 
 var x = mPos.x - oPos.x - mAWidth / 2;
 var tmpX = parseInt(cols[colIndex].style.width) + x;
 dragMask.style.left = mPos.x - mAWidth / 2 + "px";
 cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px";
 if(!document.all)
  dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。
}

var mask_mouseup = function(evt){
 dragMask.style.display = "none";
}

dragMask.onmousemove = mask_mousemove;
dragMask.onmouseup = mask_mouseup;

var cell_mousedown = function(evt){
 colIndex = this.colIndex;
 var mPos = JPos.getEventPos(evt);
 with(dragMask.style){
  left = mPos.x - mAWidth / 2  + "px";
  top = mPos.y - mAHeight / 2 + "px";
  display = "";
 }
}

var chk_click = function(evt){
 var obj = cols[this.colIndex];
 if(this.checked){
  obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;";
 }else{
  obj.css_ = obj.style.cssText;
  obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;";
 }
}

var i , o;
var label ,chk;
for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){
 o.colIndex = i;
 o.onmousedown = cell_mousedown;
 
 label = document.createElement("LABEL");
 document.body.insertBefore(label,document.body.lastChild);
 chk = document.createElement("INPUT");
 chk.type = "checkbox";
 label.appendChild(chk);
 chk.onclick = chk_click;
 chk.colIndex = i;
 chk.checked = "checked";
 label.appendChild(document.createTextNode(o.innerHTML));
}
</script>
</body>
</html>
分享到:
评论

相关推荐

    实现bootstrap table可设置列宽和可拖动列宽

    - `bootstrap-table-colresize.min.js`:拖动列宽插件的 JavaScript 文件,实现拖动功能。 - 示例 HTML 文件:展示如何在实际代码中应用以上设置和插件。 - 示例数据文件:可能包含用于填充表格的数据。 总之,实现...

    可缩放Reloaded-一个针对可缩放元素的复用组件

    - **调节栏**:组件支持显示蓝色的调节栏,默认为`pinned: true`。此特性可以帮助用户直观地看到元素大小的变化情况。 示例: ```javascript var custom = new YAHOO.ext.Resizable('custom', { wrap: true, ...

    ko-grid:用于显示表格数据的可扩展 UI 组件

    ko-grid ko-grid 是一个可扩展的 UI 组件,用于显示表格数据。 它是基于的,其绑定名称只是grid 。 如果您想了解 ko-grid 的实际运行情况,可以查看一些。 相应的源位于。 要开始,请查看中的简短、自包含示例。特征...

    cmd-bat-批处理-脚本-Progress bar 1.zip

    cmd-bat-批处理-脚本-Progress bar 1.zip

    小红书2024年度Java编程开发面试题及参考答案-超详细解析

    该资源是小红书 2024 年度Java 编程开发面试题,内容非常详细,适合应届毕业生和准备寻求更高发展的Java工程师,希望给你们带来帮助。

    RISC-V指令集五级流水线CPU设计与验证:基于Verilog的实现及应用 CPU设计

    内容概要:本文详细介绍了基于RISC-V指令集的五级流水线CPU设计及其验证过程。首先,文章阐述了RISC-V指令集的特点及其在CPU设计中的优势,接着深入解析了每个流水线阶段(取指、解码、执行、访存、写回)的Verilog源代码实现。此外,提供了汇编验证代码用于测试CPU的功能,并附带详细的说明文档和PPT,确保设计的完整性和易理解性。最后,在Vivado平台上进行了全面的仿真和实际硬件测试,验证了设计的正确性和性能。 适合人群:从事嵌入式系统设计、CPU架构研究及相关领域的工程师和技术人员。 使用场景及目标:①理解和掌握RISC-V指令集在五级流水线CPU设计中的应用;②学习Verilog语言在CPU硬件设计中的具体实现方法;③通过汇编验证代码测试CPU功能,确保设计的可靠性。 其他说明:本文不仅提供了完整的Verilog源代码和汇编验证代码,还包括详细的说明文档和PPT,有助于读者更好地理解和实践CPU设计过程。

    基于51单片机与HC-05蓝牙模块的Android手机通信程序

    本程序实现了51单片机与手机之间的字符及数字通信功能,且代码中配有详尽的注释说明。关于通信原理的详细阐述,可在我的其他相关文章中查阅。

    cmd-bat-批处理-脚本-run dialogue.zip

    cmd-bat-批处理-脚本-run dialogue.zip

    多智能体编队技术中48智能体点对点转换的分布式模型预测控制及应用 多智能体系统

    内容概要:本文详细介绍了多智能体编队技术,特别是针对4智能体和8智能体的点对点转换分布式模型预测控制。首先概述了多智能体编队的概念及其广泛应用,如无人驾驶、无人机编队等。接着深入探讨了分布式模型预测控制的方法论,强调每个智能体依据自身模型和邻近智能体信息进行预测并制定控制策略,从而提升系统灵活性和鲁棒性。随后阐述了点对点转换的具体机制,即智能体间通过高效的信息交换实现状态间的平滑过渡。最后展示了简化的Python代码示例来解释这一过程,并提供了相关领域的权威参考文献。 适合人群:对多智能体系统、分布式控制系统感兴趣的科研人员和技术开发者。 使用场景及目标:适用于希望深入了解多智能体编队控制理论的研究者以及从事无人驾驶、无人机编队等相关项目的技术人员。目标在于掌握分布式模型预测控制的基本原理及其在实际工程中的应用。 其他说明:文中提供的代码仅为概念验证性质,实际部署时还需考虑更多因素如网络延迟、数据同步等。此外,附带的参考文献为读者进一步学习提供了宝贵的资料来源。

    2023年系统分析师真题及解析

    2023年系统分析师真题及解析

    IMG_20250521_201207.jpg

    IMG_20250521_201207.jpg

    基于鲸鱼算法的光伏风电选址定容优化及其经济性评估 多目标优化

    内容概要:本文探讨了利用鲸鱼算法(Whale Optimization Algorithm)对光伏和风电项目的选址和定容进行优化的方法。鲸鱼算法是一种新颖的智能算法,它模仿座头鲸的捕食行为,具有较少的参数调整需求和强大的寻优能力。文中详细介绍了该算法的核心机制,如气泡网攻击策略,并展示了如何将其应用于新能源项目的选址定容问题中。具体来说,通过定义合适的目标函数来衡量不同方案的表现,包括网损、节点电压偏差和投资成本等因素。此外,还讨论了如何通过调整权重系数来平衡各个目标之间的关系,从而获得最佳解决方案。最终,通过对实验结果的分析,证明了鲸鱼算法在处理此类多维度优化问题上的优越性能。 适合人群:从事新能源规划、电力系统工程及相关领域的研究人员和技术人员。 使用场景及目标:适用于需要对光伏和风电项目进行科学合理的选址和定容决策的情境下,旨在提高能源利用效率的同时降低成本,确保电网稳定性和可靠性。 其他说明:文中提供了具体的Python代码示例,帮助读者更好地理解和实现鲸鱼算法的应用。同时强调了在实际操作过程中应注意的一些关键因素,如数据预处理方法的选择以及参数设置的影响等。

    工业自动化领域威纶通A2触摸屏程序标准精美模板及其应用

    内容概要:本文详细介绍了威纶通标准精美模板,一套专为A2触摸屏程序开发提供的可直接套用的界面模板。模板涵盖了多个实用功能界面,如配方管理、报警记录、操作记录、登录、设备使用说明、参数设置、系统设置、权限设置、趋势显示、电机设置、IO监控、工位用时、文档设置和维修界面。每个界面均经过精心设计,确保界面清新整洁,不带复杂的宏指令,便于操作和维护。此外,模板还支持XY曲线、树状图、数据统计等功能,能够灵活配置和调用。这套模板不仅适用于快速开发,也为新手和在校生提供了宝贵的学习资源。 适用人群:工业自动化领域的开发人员、工程师、新手和在校学生。 使用场景及目标:① 开发人员可以通过直接套用或复制模板,快速完成A2触摸屏程序开发;② 新手和在校生可以利用模板学习触摸屏程序的设计和实现,掌握工业自动化领域的关键技能。 其他说明:模板中的功能和界面设计充分考虑了工业自动化的需求,确保了系统的稳定性和实用性。

    一种三元锂电池析锂特性以及检测方法研究.zip

    一种三元锂电池析锂特性以及检测方法研究.zip

    大规模无线传感 器网络中稀疏信号的数据收集策略.pdf

    大规模无线传感 器网络中稀疏信号的数据收集策略.pdf

    cmd-bat-批处理-脚本-One_Click_StockPrice.zip

    cmd-bat-批处理-脚本-One_Click_StockPrice.zip

    cmd-bat-批处理-脚本-installed-package-contents.zip

    cmd-bat-批处理-脚本-installed-package-contents.zip

    2025年网络媒体项目解决方案.docx

    2025年网络媒体项目解决方案.docx

    实证数据-2010-2023年上市公司-管理层情感语调数据-社科经管.rar

    该数据集为2010-2023年中国A股上市公司管理层情感语调的年度面板数据,覆盖45,320条样本,数据源自年报及半年报的"管理层讨论与分析"部分。通过构建中文金融情感词典(融合《知网情感分析用词典》与L&M金融词汇表),采用文本分析方法计算情感语调指标,包括:正面/负面词汇数量、文本相似度、情感语调1((积极词-消极词)/总词数)和情感语调2((积极词-消极词)/(积极词+消极词))。同时包含盈利预测偏差、审计意见类型等衍生指标,可用于研究信息披露质量、市场反应及代理问题。该数据复刻了《管理世界》《财经研究》等期刊的变量构建方法,被应用于分析语调操纵对债券市场的影响,学术常用度与稀缺度较高。

    cmd-bat-批处理-脚本-green.zip

    cmd-bat-批处理-脚本-green.zip

Global site tag (gtag.js) - Google Analytics