Javascript implementiert die Fähigkeiten zum Sortieren, Bearbeiten, Ziehen und Zoomen von Tabellen-js-Tutorial-php.cn

Einfache Tabellensortierung

Sie können doppelklicken, um die benutzerdefinierten bearbeiteten Regeln zu bearbeiten

Ziehen Sie Spalten zum Spaltenersetzen

Sie können den Rand verschieben, um die Spaltenbreite zu skalieren

Code kopieren Der Code lautet wie folgt: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> Table 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( http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp);color:#183C94;word-break:break-all } #tab tbody td{overflow:hidden;word-break:break-all;} #tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; } #tab td.tc{text-align:center;} .div{width:10px;height:6px; border:1px solid #999999; background-color:#FFFFFF; position:absolute; display:none;} .line{ width:2px; background-color:#999999; position:absolute; display:none} .dr{height:100%;width:2px;background:#CECFCE;float:right;margin-right:-1px;cursor:sw-resize} .r{float:right;} .l{float:left;} #tab thead td.thover{ background-image:url( http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif);background-repeat:repeat-x ;} ID 选中 姓名 生日 备注 1 小三 1982-05-27 杯具,全是杯具 3 李四 1983-06-27 恩恩我魔兽技术不错 2 王五 1987-05-27 波斯王子 时之刃还不错 4 赵六 1988-05-27 我叫赵六 5 朱八 1984-05-27 洗洗睡吧 6 阿斯多夫 1984-06-27 阿斯多夫暗室逢灯 7 杯具 1984-06-27 很多的杯具 8 餐具 1984-02-27 很多的餐具 8 洗具 1984-08-27 很多的洗具 9 内牛满面 1984-12-27 10 快一晚 10 犀利哥 1984-12-21 嘿嘿 (Funktion(Fenster,undefiniert){ window.Sys = Funktion (ua){ var b = { dh: /msie/.test(ua) && !/opera/.test(ua), Oper: /opera/.test(ua), Safari: /webkit/.test(ua) && !/chrome/.test(ua), Firefox: /firefox/.test(ua), chrome: /chrome/.test(ua) },vMark = ""; für (var i in b) { if (b[i]) { vMark = "safari" == i ? "Version" : i; brechen; } } b.version = vMark && RegExp("(?:" vMark ")[\/: ]([\d.] )").test(ua) ? RegExp.$1 : "0"; b.ie6 = b.ie && parseInt(b.version, 10) == 6; b.ie7 = b.ie && parseInt(b.version, 10) == 7; b.ie8 = b.ie && parseInt(b.version, 10) == 8; return b; }(window.navigator.userAgent.toLowerCase()); window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);

//Leider addListener(this.thead,'mouseout',BindAsEventListener(this,this.theadOut)); // Binden Sie das Bearbeitungsereignis und bestimmen Sie, welche Tabelle basierend auf e.srcElement oder e.target bearbeitet wird addListener(tab,'dblclick',BindAsEventListener(this, this.edit)); //Speichern Sie den geänderten Inhalt beim Verlassen der Eingabe AddListener(this.input,'blur',Bind(this,this.save,this.input)); }, SortTable :function(td,type){ //td ist das angeklickte Element, n ist die zu sortierende Spalte, type ist die Art der Sortierung var frag=document.createDocumentFragment(),span=td.getElementsByTagName('span')[0],str= span.innerHTML; If(td===this.sortCol){ This.rows.reverse(); span.innerHTML =str.replace(/.$/,str.charAt(str.length-1)=="↓"?" ↑":"↓") ; }sonst{ This.rows.sort(this.compare(td.getAttribute('clos'),type)); span.innerHTML = span.innerHTML " ↑ "; this.sortCol!=null&&(this.sortCol.getElementsByTagName('span')[0].innerHTML = this.sortCol.getElementsByTagName('span')[0].innerHTML.replace(/.$/,'')) ;//Entferne die Sortiermarkierung der vorherigen Spalte }; for(var i=0,l=this.rows.length;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; //记录哪一列正在排序中 }, vergleiche :function(n,type){ Rückgabefunktion (a1,a2){ var konvertieren ={ int : function(v){return parseInt(v)}, float : function(v){return parseFloat(v)}, Datum : 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); return a1==a2?0:a1 }; }, Bearbeiten: Funktion(e){ var elem = this.inputtd=e.srcElement || e.target; if(!elem.getAttribute('edit'))return; this.input.value = elem.innerHTML; elem.innerHTML = ""; elem.appendChild(this.input); this.input.focus(); }, Speichern: Funktion(elem){ var editinfo=this.editconfig[elem.parentNode.getAttribute('edit')],status={ "[object Function]" : 'length' in editinfo.rule&&editinfo.rule(this.input.value)||false, "[object RegExp]" : 'test' in editinfo.rule&&editinfo.rule.test(this.input.value)||false }[Object.prototype.toString.call(editinfo.rule)],_self=this; //如果不符合条件 修改提示信息 typeof status != "boolean"&&(editinfo.message = status); if(status===true){ this.inputtd.innerHTML = this.input.value; this.inputtd=null; }else{ alarm(editinfo.message); //firefox下 直接用input.focus()不会执行 用setTimeout可以以行 setTimeout(function(){_self.input.focus()},0); } }, theadHover : function(e){ var elem = e.srcElement || e.target; if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on){ this.closConfig.totd = elem.getAttribute('clos'); !hasClass(elem,'thover')&&addClass(elem,'thover'); } }, theadOut : function(e){ var elem = e.srcElement || e.target; if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on)removeClass(elem,'thover') }, dragOrWidth : function(e){ var elem = e.srcElement || e.target,widthConfig=this.widthConfig; //执行拖拽 if(elem.nodeName.toLowerCase()==='td'){ this.closConfig.td = elem.getAttribute('clos'); addListener(document,'mousemove',BindAsEventListener(this,this.dragMove)); addListener(document,'mouseup',Bind(this,this.dragUp)); this.closConfig.on = true; Sys.ie?this.thead.setCapture(false):e.preventDefault(); } //执行宽度缩放 if(elem.nodeName.toLowerCase()==='div'){ Sys.ie?(e.cancelBubble=true):e.stopPropagation(); //如果是最后一个td里面的div 不进行缩放 if(this.theadTds[this.theadTds.length-1]===elem.parentNode)return Sys.ie?this.thead.setCapture(false):e.preventDefault(); widthConfig.x = e.clientX; widthConfig.td = elem.parentNode; widthConfig.nexttd = widthConfig.td.nextSibling; while(widthConfig.nexttd.nodeName.toLowerCase()!="td"){ widthConfig.nexttd = widthConfig.nexttd.nextSibling; }; widthConfig.tdwidth = widthConfig.td.offsetWidth; widthConfig.nexttdwidth = widthConfig.nexttd.offsetWidth; this.line.style.height = this.table.offsetHeight "px"; addListener(document,'mousemove',BindAsEventListener(this,this.widthMove)); addListener(document,'mouseup',Bind(this,this.widthUp)); } }, DragMove: Funktion(e){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); setStyle(this.div,{display:"block",left:e.clientX 9 "px",top:e.clientY 20 "px"}); }, dragUp :function(){ var closConfig = this.closConfig,rows = this.table.getElementsByTagName('tr'),td,n,o,i=0,l=rows.length; this.div.style.display = "none"; removeListener(document,'mousemove'); removeListener(document,'mouseup'); Sys.ie&&this.thead.releaseCapture(); closConfig.on = false; if(closConfig.totd===null)return; removeClass(this.theadTds[closConfig.totd],'thover'); //在同一列 不进行列替换 if(closConfig.td === closConfig.totd)return; //进行列替换 如果 if(closConfig.td*1 1===closConfig.totd*1){ n = closConfig.totd; o = closConfig.td; }else{ n = closConfig.td; o = closConfig.totd; } for(;i td = rows[i].getElementsByTagName('td'); rows[i].insertBefore(td[n],td[o]); } //重新标识表头 for(i=0,l=this.theadTds.length;i this.theadTds[i].setAttribute('clos',i); closConfig.totd=closConfig.td=null; }, widthMove : function(e){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var widthConfig = this.widthConfig,x = e.clientX - widthConfig.x,left = e.clientX,clientX=left; if(clientX widthConfig.tdwidth-this.minWidth){ left = widthConfig.x - widthConfig.tdwidth this.minWidth; } if(clientX>widthConfig.x&&clientX - widthConfig.x>widthConfig.nexttdwidth-this.minWidth){ left =widthConfig.x widthConfig.nexttdwidth-this.minWidth; } setStyle(this.line,{display:"block",left:left "px"}); }, widthUp : function(){ this.line.style.display = "none"; var widthConfig = this.widthConfig,x= parseInt(this.line.style.left) - widthConfig.x; widthConfig.nexttd.style.width = widthConfig.nexttdwidth -x -1 'px'; widthConfig.td.style.width = widthConfig.tdwidth x -1 'px'; Sys.ie&&this.thead.releaseCapture(); removeListener(document,'mousemove'); removeListener(document,'mouseup'); } }); window.onload = function(){ Funktion checkName(val){ If(val.replace(/^s $/g,'')==='') return 'Namenseingabe darf nicht leer sein'; If(val.replace(/^s |s $/,'').length>10) return 'Der Name darf nicht länger als 10 Zeichen sein'; If(!/^[u4e00-u9fa5a-z] $/i.test(val)) return 'Der Name kann nur in Chinesisch oder Buchstaben eingegeben werden'; return true; }; Funktion checkRemark(val){ if(val.replace(/^s $/g,'')===='') return 'Bemerkungseingabe darf nicht leer sein'; if(val.replace(/^s |s $/,'').length>15) return 'Die Länge der Notiz darf nicht länger als 15 Zeichen sein'; if(!/^[u4e00-u9fa5ws] $/i.test(val)) return 'Anmerkungen können nur chinesische Zahlen, Unterstriche und Leerzeichen eingeben'; return true; } var set = [ {id:0,type:"int"}, {id:2,type:"string",edit:{rule:checkName,message:''}}, {id:3,type:"date",edit:{rule:/^d{4}-d{2}-d{2}$/, message:"Geben Sie das Datum 1985-02-30 in diesem Format ein" }}, {id:4,type:"string",edit:{rule:checkRemark,message:''}} ]; new Table($("tab"),set); }

Bekannter FEHLER: Unter ie6 wird Chinesisch nicht automatisch umbrochen

Es ist wirklich ärgerlich, dass Buchstaben und Zahlen nicht automatisch umgebrochen werden, wenn sie nicht im Internet Explorer ausgeführt werden

Es scheint ein großes Problem beim Klicken und Ausführen im Chrome-Browser zu geben. Es wäre besser, einen lokalen Test durchzuführen

ID	姓名	生日	备注
1	小三	1982-05-27	杯具,全是杯具
3	李四	1983-06-27	恩恩我魔兽技术不错
2	王五	1987-05-27	波斯王子时之刃还不错
4	赵六	1988-05-27	我叫赵六
5	朱八	1984-05-27	洗洗睡吧
6	阿斯多夫	1984-06-27	阿斯多夫暗室逢灯
7	杯具	1984-06-27	很多的杯具
8	餐具	1984-02-27	很多的餐具
8	洗具	1984-08-27	很多的洗具
9	内牛满面	1984-12-27	10 快一晚
10	犀利哥	1984-12-21	嘿嘿