display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化

发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动;所有我就寻找了好多的办法;网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是我看不懂!


我模仿网上的核心代码来自己写了一个;因为我们知道display:table标签最后再页面展示的还是table表格所以我就在页面的最后面来更改table的样式:

思路:
1,捕获鼠标移动到表格竖线上时候改变鼠标样式:
2.   在改变样式的区域里,按下鼠标就会生成辅助线来拖动;同时设置单元格最小宽度为8px
3.  改变表头单元格宽度,改变表格宽度
我做了一个用Myeclipse开发的index.jsp页面: 工程源码下载




function TableAuto(divId){
	var cellIndex=-1;	//记录所作用的列索引
	var preWidth=0;		//记录列的原宽
	var preX=0;			//记录鼠标的原屏幕x坐标
	var preLeft=0;		//记录辅助线的初始位置
  	var currentTitleCell=null; //当前改变列宽的列的标题单元格
	var doTitleCellClick=null; //用于暂存标题行click响应行数
	var table = null;//表格对象
	var titleCells = null;//获取标题行
	
	//辅助线对象
	var scale = document.createElement("div");
	scale.style.cssText="border-left:dotted 1px #000;z-index:101;position:absolute;left:-1;width:0;";
	document.body.appendChild(scale);
	
	
    //函数:计算元素的绝对位置
	function getAbsPos(e){
		var rect = e.getBoundingClientRect()
		var body = document.body;
		return { left:rect.left+body.scrollLeft,top:(rect.top+body.scrollTop) };
	}
    
	//函数:改变列宽 (响应辅助线的 onmousemove 事件)
	function changeColWidth(){
		var evt = arguments.length==0 ? event : arguments[0];
		var newX = evt.screenX;
		var newWidth = preWidth+newX-preX;
		if(newWidth<8) newWidth=8;
		else scale.style.left=preLeft+newX-preX;
	}
	//函数:改变列宽 (响应辅助线 onmouseup 事件)
	function changeColWidthStop(){		
		scale.releaseCapture();
		scale.onmousemove = null;
		scale.onmouseup = null;
		scale.style.left=-1;
		var evt = arguments.length==0 ? event : arguments[0];
		var newX = evt.screenX;//鼠标现在坐标
		var mLong = newX-preX;//鼠标移动距离
		var tdNewWidth = mLong+preWidth;//调整后单元格宽度
		if(tdNewWidth<8) tdNewWidth=8;
		var tableNewWidth=eval($('#'+divId).width()-preWidth+tdNewWidth);//表格宽度=原始宽度表格宽度-单元格原始宽度+单元格现在宽度
		var trs = table.getElementsByTagName("tr");
		$('#'+divId).width(tableNewWidth);//调整表格宽度
		//for ( var j = 0; j < trs.length; j++) {//调整列宽
               trs[0].cells[cellIndex].width =tdNewWidth;
        //}
		
		
		
	}
    //函数:改变列宽 (响应标题行单元格的 onmousedown 事件)
	function doMouseDown(){
		var evt = arguments.length==0 ? event : arguments[0];
		preX = evt.screenX;
		var pos = getAbsPos(this);
		preLeft = pos.left+this.offsetWidth;
		scale.style.left=preLeft-2;
		scale.style.top = pos.top-2;
		scale.style.height=table.offsetHeight-4;
		
		scale.setCapture();
		scale.onmousemove = changeColWidth;
		scale.onmouseup = changeColWidthStop;
		cellIndex = this.cellIndex;
		preWidth = this.offsetWidth;

	}
    //函数:响应标题单元格 mousemove 事件
	function doTitleCellMousemove(){
		var evt = arguments.length==0 ? event : arguments[0];
		if(this.offsetWidth-evt.offsetX<10){//单元格的宽-鼠标在单元格的水平坐标
			this.style.cursor="col-resize";
			this.οnmοusedοwn=doMouseDown;
		}else{
			this.style.cursor="";
			this.οnmοusedοwn=null;
		}
	}
    //添加控制元素的代码
    function applyCtrl(tableId){
    	table = document.getElementById(tableId);//获取表格
    	table.getElementsByTagName("tr")[0].className="scrollColThead";
    	//获取标题行
    	titleCells = table.getElementsByTagName("tr")[0].cells;
    	//给每个标题行单元格绑顶 onmousemoce 事件处理函数
		for(var i=1;i<titleCells.length;i++){
			titleCells[i].οnmοusemοve=doTitleCellMousemove;
		}
    }
    //此处为表格添加控制元素。
    applyCtrl(divId);

}



有不清楚的很愿意与大家交流:ydcun@163.com


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值