js 表格排序(编辑+拖拽+缩放)

更新时间：2010年05月31日 23:34:54 作者：

js 表格排序(编辑+拖拽+缩放)实现代码，需要的朋友可以参考下。

<!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=gb2312" /> <title>Table</title> <style type="text/css"> body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ overflow:hidden} #tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; } #tab td.tc{text-align:center;} .cc{width:10px;height:6px; border:1px solid #999999; background-color:#FFFFFF; position:absolute; display:none;} #tab td.red{border-color:#f30;} .ww{height:100%;width:1px;background:#CECFCE;float:right;margin-right:-1px;cursor:sw-resize} .line{ width:2px; background-color:#999999; position:absolute; display:none} </style> </head> <body> <table id="tab" border="0" cellspacing="1" cellpadding="0"> <thead> <tr> <td width="60"class="tc" ><span>ID</span><div class="ww"></div></td> <td width="60"class="tc"><span>选中</span><div class="ww"></div></td> <td width="100" class="tc"><span>姓名</span><div class="ww"></div></td> <td width="100" class="tc" ><span>生日</span><div class="ww"></div></td> <td width="180" class="tc" ><span>备注</span><div class="ww"></div></td> </tr> </thead> <tbody> <tr> <td height="16">1</td> <td><input type ="checkbox"></td> <td>张三</td> <td>1982-05-27</td> <td>杯具,全是杯具</td> </tr> <tr> <td>3</td> <td><input type ="checkbox"></td> <td>李四</td> <td>1983-06-27</td> <td>恩恩我魔兽技术不错</td> </tr> <tr> <td>2</td> <td><input type ="checkbox"></td> <td>王五</td> <td>1983-05-27</td> <td>波斯王子 时之刃还不错</td> </tr> <tr> <td>4</td> <td><input type ="checkbox"></td> <td>赵六</td> <td>1983-05-27</td> <td>我叫赵六</td> </tr> <tr> <td>5</td> <td><input type ="checkbox"></td> <td>朱八</td> <td>1986-05-27</td> <td>洗洗睡吧</td> </tr> </tbody> </table> <script language="javascript"> var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([\d.]+)/)?true:false; s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false; s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; return s; })(navigator.userAgent.toLowerCase()); function $(Id){ return document.getElementById(Id); }; function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); }; function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); }; var Css = function(e,o){ if(typeof o=="string") { e.style.cssText=o; return; } for(var i in o) e.style[i] = o[i]; }; var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args); }; }; var BindAsEventListener = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || window.event].concat(args)); }; }; var Extend = function(destination, source){ for (var property in source) { destination[property] = source[property]; }; }; var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; var Table = new Class({ initialize : function(tab,set){ this.table = tab; this.thead = tab.getElementsByTagName('thead')[0]; //常用的dom元素做成索引 this.theadtds = this.thead.getElementsByTagName('td'); // this.rows = []; //里面tbodys记录所有tr的引用 这里用数组记录是因为数组有reverse方法,可以用来正序,反序 this.clos = {}; //里面记录所有列元素的引用 this.edits = {}; //编辑表格的规则和提示 this.sortCol = null; //记录哪列正在排序中 this.inputtd = null; //记录哪个input被编辑了 this.closarg ={ tdnum : null, totdnum : null, closmove : BindAsEventListener(this,this.closmove), closup : BindAsEventListener(this,this.closup) };//关于列拖拽的一些属性方法 this.widtharg ={ td : null, nexttd : null, x : 0, tdwidth : 0, nexttdwidth : 0, widthmove : BindAsEventListener(this,this.widthmove), widthup : BindAsEventListener(this,this.widthup) }; var i=0,j=0,d=document,rows =tab.tBodies[0].rows,tds1 = tab.tBodies[0].getElementsByTagName('td'),edit=[]; var divs = this.thead.getElementsByTagName('div'); this.input = d.createElement('input'); //编辑用的input this.input.type = "text"; this.input.className = 'edit'; this.img = d.body.appendChild(d.createElement('div')); this.img.className ="cc" ; this.line = d.body.appendChild(d.createElement('div')); this.line.className = 'line'; this.line.style.top = tab.offsetTop +"px"; if(Sys.IE6){ this.checkbox = {}; //记录那些checkbox被选中了 处理ie6不兼容的问题 var checkboxs = tab.getElementsByTagName('input'),k =0; for(var lll=checkboxs.length;k<lll;k++) checkboxs[k].type=="checkbox"&&addListener(checkboxs[k],"click",Bind(this,function(elm,k){ elm.checked==true?(this.checkbox[k] = elm):(delete this.checkbox[k]); },checkboxs[k],k)); }; for(var l=set.length;i<l;i++){ addListener(this.theadtds[set[i].id],'click',Bind(this,this.sortTable,this.theadtds[set[i].id],set[i].id,set[i].type)); set[i].edit&&(this.edits[set[i].id]={rule:set[i].edit.rule,message:set[i].edit.message}); }; for(l=rows.length;j<l;j++) this.rows[j]=rows[j]; for(var k=0,l=this.theadtds.length;k<l;k++){ this.clos[k]=[]; this.theadtds[k].setAttribute('clos',k) addListener(this.theadtds[k],'mousedown',BindAsEventListener(this,this.closdrag)); } for(var i=0,l=tds1.length;i<l;i++){ var p = i<this.theadtds.length-1?i:i%this.theadtds.length; this.clos[p][this.clos[p].length] = tds1[i]; this.edits[p]&&tds1[i].setAttribute('edit',p); } for(var i=0,l=divs.length;i<l;i++){ addListener(divs[i],'mousedown',BindAsEventListener(this,this.widthdrag)); } /*---------------------------------------------*/ /*---------------------------------------------*/ addListener(this.thead,'mouseover',BindAsEventListener(this,this.theadhover)); addListener(tab.tBodies[0],'dblclick',BindAsEventListener(this,this.edit)); addListener(this.input,'blur',Bind(this,this.save,this.input)); }, theadhover : function(e){ e = e || window.event; var obj = e.srcElement ||e.target; if(obj.nodeName.toLowerCase() =='td') this.closarg.totdnum = (obj).getAttribute('clos'); else if(obj.nodeName.toLowerCase() =='div') obj.style.cursor="sw-resize"; }, widthdrag : function(e){ if(Sys.IE){e.cancelBubble=true}else{e.stopPropagation()} this.widtharg.x = e.clientX; this.widtharg.td = (e.srcElement ||e.target).parentNode; if(Sys.IE){ this.widtharg.nexttd = this.widtharg.td.nextSibling; }else{ this.widtharg.nexttd = this.widtharg.td.nextSibling.nextSibling; } this.widtharg.tdwidth = this.widtharg.td.offsetWidth; this.widtharg.nexttdwidth = this.widtharg.nexttd.offsetWidth; this.line.style.height = this.table.offsetHeight +"px"; addListener(document,'mousemove',this.widtharg.widthmove); addListener(document,'mouseup',this.widtharg.widthup); }, widthmove : function(e){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var x = e.clientX - this.widtharg.x,left = e.clientX,clientx=e.clientX ; if(clientx<this.widtharg.x){ if(this.widtharg.x - clientx>this.widtharg.tdwidth-35) left = this.widtharg.x - this.widtharg.tdwidth+35; } if(clientx>this.widtharg.x) { if(clientx - this.widtharg.x>this.widtharg.nexttdwidth-35) left = this.widtharg.x + this.widtharg.nexttdwidth-35; } Css(this.line,{display:"block",left:left+"px"}); }, widthup : function(e){ this.line.style.display = "none"; var x= parseInt(this.line.style.left) - this.widtharg.x; this.widtharg.nexttd.style.width = this.widtharg.nexttdwidth -x +'px'; this.widtharg.td.style.width = this.widtharg.tdwidth + x +'px'; removeListener(document,'mousemove',this.widtharg.widthmove); removeListener(document,'mouseup',this.widtharg.widthup); }, closdrag : function(e){ e = e || window.event; var obj = e.srcElement ||e.target; if(obj.nodeName.toLowerCase()=="span")obj =obj.parentNode; this.closarg.tdnum = obj.getAttribute('clos');; addListener(document,'mousemove',this.closarg.closmove); addListener(document,'mouseup',this.closarg.closup); }, closmove : function(e){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); Css(this.img,{display:"block",left:e.clientX+9+"px",top:e.clientY+20+"px"}); }, closup : function(){ this.img.style.display = "none"; removeListener(document,'mousemove',this.closarg.closmove); removeListener(document,'mouseup',this.closarg.closup); if(this.closarg.totdnum==this.closarg.tdnum)return; var rows =this.table.getElementsByTagName('tr'),tds,n,o; if((parseInt(this.closarg.tdnum)+1)==parseInt(this.closarg.totdnum)) { o = this.closarg.tdnum; n = this.closarg.totdnum; } else { n = this.closarg.tdnum; o = this.closarg.totdnum; } for(var i=0,l=rows.length;i<l;i++) { tds = rows[i].getElementsByTagName('td'); try{ rows[i].insertBefore(tds[n],tds[o]); } catch(err){ return; } } for(var i=0,l=this.theadtds.length;i<l;i++) this.theadtds[i].setAttribute('clos',i); }, edit: function(e){ var o = e.srcElement || e.target; if(!o.getAttribute('edit'))return; this.inputtd = o; var v = o.innerHTML; o.innerHTML = ""; o.appendChild(this.input); this.input.value=v; this.input.focus(); }, save : function(o){ var edit=this.edits[o.parentNode.getAttribute('edit')]; if(edit.rule.test(this.input.value)){ this.inputtd.innerHTML = this.input.value; this.inputtd=null; }else{ alert(edit.message); } }, sortTable :function(td,n,type){ var frag=document.createDocumentFragment(),str= td.getElementsByTagName('span')[0].innerHTML,span=td.getElementsByTagName('span')[0]; if(this.row!=null||td==this.sortCol){ this.rows.reverse(); span.innerHTML =str.replace(/.$/,str.charAt(str.length-1)=="↓"?"↑":"↓") ; }else{ this.rows.sort(this.compare(n,type)); span.innerHTML = span.innerHTML + "↑"; this.sortCol!=null&&(this.sortCol.getElementsByTagName('span')[0].innerHTML = this.sortCol.getElementsByTagName('span')[0].innerHTML.replace(/.$/,'')); }; for(var i=0,l=this.rows.length;i<l;i++) frag.appendChild(this.rows[i]); this.table.tBodies[0].appendChild(frag); if(Sys.IE6){ for(var s in this.checkbox) this.checkbox[s].checked = true; } this.sortCol = td; }, compare :function(n,type){ return function (a1,a2){ var convert ={ int : function(v){return parseInt(v)}, float : function(v){return parseFloat(v)}, date : function(v){return v.toString()}, string : function(v){return v.toString()} }; !convert[type]&&(convert[type]=function(v){return v.toString()}); a1 =convert[type](a1.cells[n].innerHTML); a2 =convert[type](a2.cells[n].innerHTML); if(a1==a2)return 0; return a1<a2?-1:1; }; } }); window.onload = function(){ var set = [ {id:0,type:"int"}, {id:2,type:"string",edit:{rule:/^([a-z]|[\u4e00-\u9fa5]){2,}$/i,message:"请输入2位以上的汉字,或者是字母"}}, {id:3,type:"date",edit:{rule:/^\d{4}\-\d{2}\-\d{2}$/,message:"按这中格式输入日期1985-02-30"}}, {id:4,type:"string",edit:{rule:/^.{4,10}$/,message:"请输入4到10个字符"}} ]; new Table($("tab"),set); } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

livereload工具实现前端可视化开发【推荐】
本文将介绍一个工具--livereload。这是一款能根据你本地文件(html、css、js)的变化，自动跟踪刷新浏览器的实时刷新工具，有了这个工具，会大大减轻你刷新页面的工作量。下面跟着小编一起来看下吧
2016-12-12
利用Three.js如何实现阴影效果实例代码
使用three.js可以方便的让我们在网页中做出各种不同的3D效果，下面这篇文章主要给大家介绍了关于利用Three.js如何实现阴影效果的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09
禁用backspace网页回退功能的实现代码
下面小编就为大家带来一篇禁用backspace网页回退功能的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
JavaScript中DOM和BOM的区别与用处详解
这篇文章主要介绍了JavaScript中DOM和BOM的区别与用处,DOM和BOM是前端开发中常用的两个概念,它们分别表示不同的对象模型,用于操作浏览器的不同部分,了解它们的区别和用处,有助于在前端开发中灵活使用 JavaScript 操作页面和浏览器,需要的朋友可以参考下
2024-09-09
JavaScript中最常用的10种代码简写技巧总结
这篇文章主要总结了JavaScript中最常用的10种代码简写技巧的相关资料，其中包括三元操作符、短路求值简写方式、声明变量简写方法、if存在条件简写方法及JavaScript循环简写方法等等，分别给出了详细的示例代码供大家参考，需要的朋友们下面来一起看看吧。
2017-06-06
ECharts仪表盘实例代码(附源码下载)
大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率的统计应用
2016-02-02
HTTP 302 redirect应用及介绍
这篇文章主要为大家介绍了HTTP 302 redirect应用及作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-12-12
使用 JavaScript 进行函数式编程 (一) 翻译
本文是函数式编程系列的第一篇文章。这里我会简要介绍一下编程范式，然后会直接介绍使用 Javascript 进行函数式编程的概念，因为 JavsScript 是最被认可的函数式程序语言之一。我们鼓励读者通过参考资料部分进一步了解这一迷人的概念
2015-10-10
纯js实现遮罩层效果原理分析
这篇文章主要介绍了纯js实现遮罩层效果，下面就它的原理做下分析，感兴趣的朋友可以参考下
2014-05-05
Openlayers学习之地图比例尺控件
这篇文章主要为大家详细介绍了Openlayers学习之地图比例尺控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09

js 表格排序(编辑+拖拽+缩放)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具