- 浏览: 171367 次
- 性别:
- 来自: 福州
文章分类
最新评论
-
mncc:
太好了!!!Mark一下!不过貌似那个冒泡的还少个右下角吧? ...
Google Maps 图标地址收藏 -
ivorytower:
去年5月捡了命回来,现在不评论那些豆腐渣工程……
汶川地震留给我们什么?单单建什么地震纪念馆是没有用的 -
lgx2351:
wtusmchen 写道blog写的不错啊,以后多过来学习:) ...
js学习笔记2-函数 -
wtusmchen:
blog写的不错啊,以后多过来学习:)
js学习笔记2-函数
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还是什么其它的元素,其原理是一样的。
发表评论
-
在一个定时器里频繁发ajax请求
2011-04-11 10:07 1730在一个定时器里频繁发ajax请求,最好设置一个全局变量,当请求 ... -
前台开发总结
2011-01-12 10:35 7691、如果在频繁地发送ajax请求,最好在前面的请求发送完成返回 ... -
TD中长串英文字母不能自动换行而汉字却可以自动换行
2010-12-23 10:06 1911例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaa ... -
Google Maps 图标地址收藏
2010-11-27 10:46 2777Google Maps 图标 - ... -
js乱码
2010-05-30 16:08 01)在同一个工程下没有问题,可是如果跨工程的话,且引入的js有 ... -
ajax请求提供接口的讨论
2009-12-26 15:33 1027要提供一个查询某点周边的最近设施的功能给同事,在gis端的实现 ... -
ie8与ie6取form的讨论
2009-12-16 10:49 1368多frames下,在ie6下通过frames[i]为取得某个f ... -
把一个jsp分为两个div布局记录
2009-12-15 16:41 5584一个jsp页面想分成左右两块分开显示两块内容。这种效果很不错, ... -
js取整数四舍五入
2009-11-21 22:08 3383http://blog.csdn.net/Feiin/arch ... -
读“javascript权威指南”笔记(更新中。。。)
2009-11-14 13:00 0第一章: 第二章: 第三章: 第四章: 第五章: 第 ... -
js常用功能-drag功能总结
2009-09-18 13:50 1192在做web开发中,拖动一个元素是很常见的功能,特别是对于浮动层 ... -
常用功能-tip相关知识总结
2009-09-18 08:48 1198在应用开中很常用的功能是tip,比如鼠标放在某个需要说明的元素 ... -
js学习笔记4-事件和事件处理
2009-09-16 22:18 9831. 总述: 本章将讲三种完全不同的不兼容的事件处理模型 ... -
构造结果集实现类似grid显示
2009-09-16 20:24 866在做应用开发中,最经常的操作是到后台数据库去获取数据,在前台用 ... -
grid里用右键来实现功能菜单
2009-09-15 20:22 1175在自定义grid中,如果一个grid的列很多,窗口无法显示这么 ... -
js学习笔记3-构造函数、类和原型
2009-09-06 16:18 26543. 构造函数、类和原型总述:对象是我们很熟悉的,常在程序中用 ... -
gird分页时form与url参数的探讨
2009-09-05 22:35 1139大家可能很常用一个查 ... -
js学习笔记2-函数
2009-09-02 23:01 13762. 函数 2.1函数直接量函数直接量是用作表达式,而不是用作 ... -
下拉提示文本框
2009-08-24 18:46 1676文本框在当用户输入时,常常需要把相近的信息提示给用户,以方便用 ... -
js学习笔记1-对象和数组
2009-08-19 23:03 8411. 对象和数组 总述对象 ...
相关推荐
VB中Felx Grid控件设计时如何改变列宽
顺便,把我研究过的,如何隐藏、显示一列的方法也实现了一把。但是这个功能和 css border-collapse:collapse; 有冲突,详情见代码2 jgrid拖动改变表格宽度 拖动我1 拖动我2 拖动我3 拖动我4 ...
jquey 实现grid 的列的自由拖动 和内容的自由展示和压缩 类似于excel效果。
asp.net中的GridView自定义分页及改变列宽代码
用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助
修改grid行或列颜色修改grid行或列颜色修改grid行或列颜色修改grid行或列颜色修改grid行或列颜色
鼠标拖动列宽 浏览器兼容性 firefox ie opera 用法说明 simpleHtmlDataGrid与目前市场中的datagrid控件不同,它更加像一个插槽,开发者需要按照具体所需进行扩展。 参考目录中的例子及api,实例可查看源代码 ...
自定义表格列头,利用PopupButton做的过滤界面,延伸可以利用PopupButton实现很多按钮弹出过滤界面的功能,内部有些代码可以删除
这两天项目需要,临时做了一个,没有封装,该grid可以实现列和行的自定义添加和删除,包括修改标题,以及列的右击添加事件。希望对你们有所帮助!双击列名可以对列名进行修改,右键列名可以选择左侧和右侧添加列以及...
dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法dhtmlxGrid取一列方法
在一个外层grid列里生成一个grid布局的内容。比如,某班某人的各科成绩。外层是某人的信息,在这个一行里,有他的语数外三科(一个几行几列的grid)的成绩。 不是为了利益大众,是为了自己,也当做自己曾经写的一个...
Sigma Grid ajax动态表格(支持分页、列宽拖动、数据排序).
一个功能比较强的Grid,支持拖动列、排序、翻页、统计、图表等,很值得关注啊!!!
NULL 博文链接:https://babydeed.iteye.com/blog/778606
通过cookie保存portal的位置和grid的列的顺序,以及grid的列是否显示的保存 cookie 保存 portal grid的列 个人风格保存
dhtmlxGrid ajax表格控件 支持排序 拖动 分组等,支持Ajax的JavaScript表格控件,方便您在网页上显示表格数据,含有强大的API脚本,界面美观大方,表格可以调整列宽、排序、拖拽、搜索、分组等功能。
PB数据窗口自适应列宽!Grid类;
Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jspTag技术) GT-Grid 的主要 特性: Ajax实现 (翻页,数据的crud 基于ajax技术) 固定表头和工具栏 自定义复杂表头 可调整列宽: 拖动列表表头...