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

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

您可能感兴趣的文章:

• jquery方法+js一般方法+js面向对象方法实现拖拽效果
• JS基于面向对象实现的拖拽功能示例
• JS基于面向对象实现的拖拽库实例
• js实现拖拽效果
• 使用js实现的简单拖拽效果
• js完美的div拖拽实例代码
• JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
• javascript拖拽上传类库DropzoneJS使用方法
• 使用javaScript实现鼠标拖拽事件
• JavaScript实现水平进度条拖拽效果
• JavaScript使用面向对象实现的拖拽功能详解