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

grid拖动列头改变列宽

阅读更多

grid中,当某一单元格的内容很多时,要能够拖动grid标题行的各列列头改变列的宽度。

假设有这么一个简单的table:

<table>
 <tr>
   <td>序列</td>
   <td>姓名</td>
   <td>性别</td>
   <td>工作简历</td>
 </tr>
 <tr>
   <td>1</td>
   <td>lgx</td>
   <td>男</td>
   <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
 </tr>
</table>

 上面的table中,工作简历列有很多内容,需要拖动改变宽度。

具体的js代码如下(基于prototype):

/**
 * 拖动列头以改变列的宽度 
 * author:liugx
 */
function ResizeGridColumn(){
}
ResizeGridColumn.prototype ={
	cancelClick:function(event){
		event.returnValue=false;   
	  	event.cancelBubble=true; 
	},
	getEventElement:function(clickObject){
		var evt = Event.getEvent();
		return (evt)?(event.target || event.srcElement):clickObject;	
	},
	getTableObj:function(event){
		var oTable = "";
		try {
			oTable = Event.findElement(event,"TABLE");
		}catch(e){
			_alert(e.message);
			return "";
		}
		return oTable;
	},
	dragToResize:function(elementToDrag,event){
		var oTable = this.getTableObj(event);
    	var mouseDownX = event.clientX;
    	var pareneTdWidth = elementToDrag.parentElement.offsetWidth;
    	var pareneTableWidth = oTable.offsetWidth;
    	
    	this.cancelClick(event);
	    if (document.addEventListener) {  // DOM Level 2 event model
	        document.addEventListener("mousemove", moveHandler, true);
	        document.addEventListener("mouseup", upHandler, true);
	    }
	    else if (document.attachEvent) {  // IE 5+ Event Model
	        elementToDrag.setCapture( );
	        elementToDrag.attachEvent("onmousemove", moveHandler);
	        elementToDrag.attachEvent("onmouseup", upHandler);
	        // Treat loss of mouse capture as a mouseup event.
	        elementToDrag.attachEvent("onlosecapture", upHandler);
	    }
	    else {  // IE 4 Event Model
	        var oldmovehandler = document.onmousemove; // used by upHandler( )
	        var olduphandler = document.onmouseup;
	        document.onmousemove = moveHandler;
	        document.onmouseup = upHandler;
	    }

	    if (event.stopPropagation) event.stopPropagation( );  // DOM Level 2
	    else event.cancelBubble = true;                      // IE
	
	    if (event.preventDefault) event.preventDefault( );   // DOM Level 2
	    else event.returnValue = false;                     // IE

	    function moveHandler(e) {
	        if (!e) e = window.event;  // IE Event Model
	        
	        var newWidth= pareneTdWidth*1 + event.clientX*1 - mouseDownX;
			if(newWidth>0){
				elementToDrag.parentElement.style.width = newWidth;
				oTable.style.width = pareneTableWidth*1 + event.clientX*1 - mouseDownX;
			}
	        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
	        else e.cancelBubble = true;                  // IE
	    }

	    function upHandler(e) {
	        if (!e) e = window.event;  // IE Event Model
	
	        if (document.removeEventListener) {  // DOM event model
	            document.removeEventListener("mouseup", upHandler, true);
	            document.removeEventListener("mousemove", moveHandler, true);
	        }
	        else if (document.detachEvent) {  // IE 5+ Event Model
	            elementToDrag.detachEvent("onlosecapture", upHandler);
	            elementToDrag.detachEvent("onmouseup", upHandler);
	            elementToDrag.detachEvent("onmousemove", moveHandler);
	            elementToDrag.releaseCapture( );
	        }
	        else {  // IE 4 Event Model
	            document.onmouseup = olduphandler;
	            document.onmousemove = oldmovehandler;
	        }
	        // And don't let the event propagate any further.
	        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
	        else e.cancelBubble = true;                  // IE
	    }
	}
}
var resizeGridColumn = new ResizeGridColumn();

 css代码:

.resizeDivClass{
	position:absolute;
	background-color:#FFD700;
	width:3;
	height:expression(this.parentElement.clientHeight);
	z-index:1;
	left:expression(this.parentElement.clientWidth);
	top:0px;
	cursor:e-resize; 
} 

 使用:

<table>
 <tr>
   <td style='position:relative'><div class=\"resizeDivClass\" onmousedown=\"resizeGridColumn.dragToResize(this,event);\"></div>序列</td>
   <td style='position:relative'><div class=\"resizeDivClass\" onmousedown=\"resizeGridColumn.dragToResize(this,event);\"></div>姓名</td>
   <td style='position:relative'><div class=\"resizeDivClass\" onmousedown=\"resizeGridColumn.dragToResize(this,event);\"></div>性别</td>
   <td style='position:relative'><div class=\"resizeDivClass\" onmousedown=\"resizeGridColumn.dragToResize(this,event);\"></div>工作简历</td>
 </tr>
 <tr>
   <td>1</td>
   <td>lgx</td>
   <td>男</td>
   <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
 </tr>
</table>

注意:

1、拖动div的位置,拖动div必须与标题行的每个td的右边框的位置重叠。这时候用相应定位来解决,把标题栏的td的position设置为relative,再把拖动div的 position设置为absolute,然后设置把它的left,top,height,width。拖动div相对于标题td的left是它的clientWidth值,top是0,height是clientHeight值。

2、js代码难度不大,注意以下几点即可:

  1)要考虑浏览器的兼容性。

  2)

Event.findElement(event,"TABLE");

    这句代码是找触发事件元素往上的为table标识的元素,即找到了table,看看prototype源码就很清楚了。

3、css中用expression来计算值的用法。

4、table的td不能是:<td nowrap>,如果这样写就不能换行了,也不能够实现缩成多行效果来改变宽度。

5、对于width的大小位置的计算明白一下,这样,不管是用于table还是什么其它的元素,其原理是一样的。

 

分享到:
评论

相关推荐

    asp.net中的GridView自定义分页及可拖动改变列宽代码

    本知识点将深入探讨如何在GridView中实现自定义分页以及允许用户通过拖动列边界来改变列宽的功能。 一、自定义分页 默认情况下,GridView控件的分页功能是基于服务器端的,这意味着每次翻页都会导致服务器进行一次...

    asp.net中的GridView自定义分页及改变列宽代码

    例如,通过拖动列头来改变列宽,然后保存用户设定的宽度,下次加载页面时恢复。 以上就是关于ASP.NET中GridView自定义分页和动态改变列宽的主要内容。在实际开发中,你可能还需要考虑性能优化、用户体验和兼容性等...

    JGrid中拖动改变列宽的脚本 原型

    顺便,把我研究过的,如何隐藏、显示一列的方法也实现了一把。但是这个功能和 css border-collapse:collapse; 有冲突,详情见代码2 jgrid拖动改变表格宽度 拖动我1 拖动我2 拖动我3 拖动我4 ...

    可以拖动行头和列头的表格

    "可以拖动行头和列头的表格"是一个重要的功能,它为用户提供了一种自定义视图和优化数据浏览体验的方式。这个特性通常应用于数据分析、报告展示以及各种管理界面,让用户能够根据自己的需求调整列宽,从而更方便地...

    GridDemo.zip

    Grid组件支持列宽和行高的动态调整,用户可以通过拖动列边框改变列宽,通过拖动行边框改变行高,使得界面更加用户友好。 接下来,我们讨论数据绑定。在Flex中,Grid组件可以与数据提供者(如ArrayCollection)进行...

    JS可调整列宽表格

    在创建可调整列宽的表格时,我们需要为每个 `&lt;th&gt;` 或 `&lt;td&gt;` 添加一个拖动柄(通常是一个CSS样式处理的小竖线),用户可以通过拖动这个柄来改变列宽。 在"moveTab.js"中,我们可能会看到以下关键代码片段: 1. **...

    PB自动美化grid风格的dw(grid自动转成tabular)

    在PB中,可以启用数据窗口的动态列宽调整特性,允许用户通过拖动列边界来改变列宽,适应不同的数据长度和用户需求。 5. **支持多表头**: 多表头在复杂的数据展示中非常常见,可以提供更清晰的层次结构。PB提供了...

    ext三列拖动

    "三列拖动"意味着用户可以将表格的列头进行拖放操作,改变列的位置,从而根据需求重新排列显示的数据。 实现这个功能的关键在于使用`Ext.grid.header.Container`类和`Ext.grid.ColumnLayout`布局。`header....

    数据表格JqGrid自适应列宽度

    3. **自适应事件处理**:JqGrid提供了`resizeStop`和`gridResize`等事件,可以在窗口大小改变或列宽调整后执行特定的操作。你可以利用这些事件来调整列宽,以适应新的布局。 4. **调整列宽的函数**:JqGrid提供了...

    grid数据窗口选择显示列

    - 如果需要调整列的顺序,可以通过拖动字段来实现,这将改变数据窗口中列的显示顺序。 2. 配置列属性: - 宽度:可以调整列宽,以便优化数据的可视性。在“Width”属性中输入新值,或者使用属性窗口的右键菜单...

    GT-Grid 是一个基于Ajax技术的列表组件

    Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jspTag技术) GT-Grid 的主要 特性: Ajax实现 (翻页,数据的crud 基于ajax技术) 固定表头和工具栏 自定义复杂表头 可调整列宽: 拖动列表表头...

    jquery grid表格插件

    通过集成jQuery UI库中的draggable和droppable组件,用户可以直接通过鼠标拖拽来改变列的顺序,这种直观的操作方式极大地提升了用户的交互体验。实现这一功能的关键在于设置合适的事件监听器,捕获拖放动作,并更新...

    wpf GridSplitter拖动分隔Grid源码

    在Windows Presentation Foundation (WPF) 中,`GridSplitter` 是一个非常有用的控件,它允许用户通过拖动来调整`Grid`中的列或行的大小。本篇将深入探讨`GridSplitter`的使用,以及如何在VS2015环境下通过源码实现...

    GridView拖拽Item完美实现

    在拖动项时,可以改变其背景色或透明度,给用户明确的拖动反馈。同时,也可以高亮显示目标位置,以帮助用户判断放置位置。 7. **边界检查**: 在拖放过程中,需要检查项是否超出 GridView 的边界,避免无效的拖放...

    ExtJS获取字段宽度顺序调整后的状态

    2. **列宽度的动态调整**:在ExtJS中,用户可以通过鼠标拖动列头的边缘来改变列宽。这种交互设计是基于`column.resize`事件实现的,当用户释放鼠标后,该事件会被触发,我们可以监听这个事件来获取当前列的宽度信息...

    WPF之GridSplitter

    在初始示例中,我们有三个列,通过两个GridSplitter可以在1列和2列之间进行拖动,从而改变列宽。这是一个标准的应用场景,可以满足大多数基本需求。 然而,当需求发生变化,比如Grid的列数从3个增加到5个,并且有...

    VC++Grid 操作实例

    实例中可能包含如何在资源编辑器中添加Grid控件,以及在代码中初始化Grid的步骤,例如设置列宽、行高,加载初始数据。 5. **事件处理**: Grid控件的事件处理是关键部分,例如单击、双击、选中改变等。开发者需要...

    UltimateGrid

    你可以通过编程控制Grid的行为,如响应用户事件、调整列宽、自定义列头等。同时,UltimateGrid还支持多选、行模板、嵌套子网格等高级特性,极大地提高了用户体验。 除了基本的Grid控件,UltimateGrid还提供了一些...

    liguerGrid

    - **拖动调整**:liguerGrid默认支持用户通过鼠标拖动列头的边界来改变列宽。这个功能是开箱即用的,无需额外配置。 - **程序化调整**:在某些情况下,可能需要通过代码来改变列宽。可以使用`setColumnWidth`...

Global site tag (gtag.js) - Google Analytics