Javascript implémente les compétences de tri, d'édition, de glisser et de zoom des tableaux_javascript

Tri simple des tableaux

Vous pouvez double-cliquer pour modifier les règles modifiées personnalisées

Faites glisser les colonnes pour les remplacer

Vous pouvez pousser la bordure pour redimensionner la largeur de la colonne

Copier le code Le code est le suivant :

 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">







 
  
      
      
      
      
      
  
 
 
 
   
   
   
   
   
 
 
   
   
   
   
       
 
 
   
   
   
   
       
 
 
   
   
   
   
       
 
 
   
   
   
   
       
 
 
   
   
   
   
       
 
 
   
   
   
   
       
 
 
   
   
   
   
       
 
 
   
   
   
   
       
  ≪/tr>
 
   
   
   
   
       
 
 
   
   
   
   
       
  ≪/tr>                       
 

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	嘿嘿

(fonction(fenêtre,non défini){
window.Sys = fonction (ua){
    varb = {
        c'est-à-dire : /msie/.test(ua) && !/opera/.test(ua),
        opéra : /opera/.test(ua),
        safari : /webkit/.test(ua) && !/chrome/.test(ua),
        Firefox : /firefox/.test(ua),
        chrome : /chrome/.test(ua)
    },vMarque = "";
    pour (var i en b) {
        if (b[i]) { vMark = "safari" == i ? "version" : je; casser; >
    >
    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;  
    retourner b;
}(window.navigator.userAgent.toLowerCase());

window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);

fenêtre.$ = fonction(Id){
    return document.getElementById(Id);
};
window.addListener = function(element,e,fn){
    !element.events&&(element.events = {});
    element.events[e]&&(element.events[e][addListener.guid ]=fn)||(element.events[e] = {'0':fn});
    element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" e,fn);
};
window.addListener.guid = 1;
window.removeListener = function(element,e,fn){
    var gestionnaires = element.events[e],type;
    si(fn){
        pour (tapez les gestionnaires)
            if(handlers[type]===fn){
                element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" e,fn);
                supprimer les gestionnaires[type];
            >
    }autre{
        pour(tapez les gestionnaires){
            element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" e,handlers[type]);
            supprimer les gestionnaires[type];
        >
    }       
};
window.setStyle = fonction(e,o){
    si(typeof o=="string")
        e.style.cssText=o;
    autre   
        pour(var i in o)
            e.style[i] = o[i];
};

var slice = Array.prototype.slice;
window.Bind = fonction (objet, amusant) {
    var args = slice.call(arguments).slice(2);
    return function() {
            return fun.apply(object, args);
    };
};
window.BindAsEventListener = function(objet, fun,args) {
    var args = slice.call(arguments).slice(2);
    fonction de retour (événement) {
        return fun.apply(object, [event || window.event].concat(args));
    >
};
//copie depuis jQ
window.Extend = function(){
 var cible = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;
 if ( typeof target === "boolean" ) {
  profond = cible ;
  cible = arguments[1] || {};
  je = 2;
 >
 if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
  cible = {};
 pour(;je   if ( (options = arguments[ i ]) != null )
   pour(nom de la variable dans les options){
    var src = cible[ nom ], copie = options[ nom ];
    si (cible === copie)
     continuer ;
    if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
     target[ nom ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
    } 
    sinon if(copie !== non défini)
     cible[nom] = copie ;      
   >
 >
 cible de retour ;   
};
window.objPos = fonction(o){
 var x = 0, y = 0;
 faire{x = o.offsetLeft;y = o.offsetTop;}while((o=o.offsetParent));
 return {'x':x,'y':y};
>
window.Class = fonction (propriétés) {
    var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
    _class.prototype = propriétés;
    retourner _class;
};
window.hasClass  = function(element, className){
 return element.className.match(new RegExp('(\s|^)' className '(\s|$)'));
} ;
window.addClass  = function(element, className) {
 !this.hasClass(element, className)&&(element.className = " " className);
}
window.removeClass = function(element, className) {
 hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\s|^)' className '(\s|$)'),' ')) ;
}
})(fenêtre);

var Table = nouvelle classe({
Options :{
         minLargeur : 62
},
Initialiser : function(tab,set){
This.table = tab;
This.rows = []; //Enregistrez toutes les références tr
This.sortCol = null; //Enregistrez quelle colonne est triée
This.inputtd = null; //Enregistre quel td est en cours de modification
This.editconfig = {}; //Règles et astuces pour l'édition des tableaux
This.thead = tab.getElementsByTagName('thead')[0];
This.theadTds = tab.getElementsByTagName('thead')[0].getElementsByTagName('td'); //Les collections DOM couramment utilisées peuvent être référencées avec un attribut
This.tbodyTds = tab.getElementsByTagName('tbody')[0].getElementsByTagName('td');
This.closConfig = {
sur : faux,
                                                                                                                                                                                                                  totd : null
        };
This.widthConfig = {
td : nul,
suivant : nul,
x : 0,
tdwidth : 0,
largeur suivante : 0
};
Étendre(this,this.options);
//Je ne connais pas la raison, mais il sautera de manière aléatoire si je ne le configure pas
(Sys.ie6||Sys.chrome)&&(tab.width=tab.offsetWidth)
                                // Enregistrez ces cases à cocher, la radio est sélectionnée, c'est-à-dire que 6 ne se souviendra pas de ces états lors des opérations dom
Si(Sys.ie6){
This.checkbox = {};
               var checkboxs = tab.getElementsByTagName('input'),i=0,l=checkboxs.length;
pour(;i (checkboxs[i].type=="checkbox"||checkboxs[i].type=="radio")&&
                    addListener(checkboxs[i],"click",Bind(this,function(elm,i){
                    elm.checked==true?(this.checkbox[i] = elm):(supprimer this.checkbox[i]);
                  },cases à cocher[i],i));                                                                    };
      var i=0,l=set.length,rows =tab.tBodies[0].rows,d=document,tabTads=tab.getElementsByTagName('td'),length=this.theadTds.length;
//Entrée pour édition
This.input = d.createElement('input');
This.input.type = "texte";
This.input.className = 'edit';
​​​​ //Utilisé pour afficher le div en cours de déplacement
This.div = d.body.appendChild(d.createElement('div'));
This.div.className ="div";
//Lignes verticales affichées lors du zoom
This.line = d.body.appendChild(d.createElement('div'));
This.line.className = 'ligne';
This.line.style.top = objPos(tab).y "px";
//Parcourir l'ensemble et effectuer quelques réglages                                    pour(;i //Lier les événements aux chasseurs de têtes qui doivent être triés
              addListener(this.theadTds[set[i].id],'click',Bind(this, this.sortTable, this.theadTds[set[i].id],set[i].type));
// Définir la configuration requise pour les colonnes du tableau qui doit être édité
set[i].edit&&(this.editconfig[set[i].id]={rule:set[i].edit.rule,message:set[i].edit.message});
>
//Mettez tous les tr ​​dans un tableau pour les trier
pour( i=0,l=rows.length;i This.rows[i]=rows[i];
                                   
//Parcourez tous les tds et effectuez quelques réglages
pour( i=0,l=tabTads.length;i                       // Marquez tous les tds sur la tête. Utilisez
lorsque vous faites glisser.                  i //Ajoutez l'attribut edit au td qui doit être modifié
i>=length&&this.editconfig[i%length]&&tabTads[i].setAttribute('edit',i%length);
>
                             
// Lier les opérations de glisser et de zoom
         addListener(this.thead,'mousedown',BindAsEventListener(this,this.dragOrWidth));
                             
//Lorsque vous faites glisser, l'enregistrement est déplacé vers cette colonne de td
         addListener(this.thead,'mouseover',BindAsEventListener(this,this.theadHover));

//Hélas
addListener(this.thead,'mouseout',BindAsEventListener(this,this.theadOut));
                             
                       // Lier l'événement d'édition et déterminer quelle table est modifiée en fonction de e.srcElement ou de e.target                                                               addListener(tab,'dblclick',BindAsEventListener(this, this.edit));                                                        
//Enregistre le contenu modifié en quittant la saisie
AddListener(this.input,'blur',Bind(this,this.save,this.input)); },
SortTable :function(td,type){ //td est l'élément cliqué, n est la colonne à trier, type est le type de tri
      var frag=document.createDocumentFragment(),span=td.getElementsByTagName('span')(0],str= span.innerHTML;
Si(td===this.sortCol){
This.rows.reverse();
                 span.innerHTML =str.replace(/.$/,str.charAt(str.length-1)=="↓"?"↑":"↓") ;
         }autre{
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(/.$/,'')) ;//Supprimer la marque de tri de la colonne précédente
        };
pour(var i=0,l=this.rows.length;i                frag.appendChild(this.rows[i]);
This.table.tBodies[0].appendChild(frag);
Si(Sys.ie6){
pour (var s dans this.checkbox)
                this.checkbox[s].checked = true;
        >
        this.sortCol = td;   //记录哪一列正在排序中         
    },
    comparer :function(n,type){
  fonction de retour (a1,a2){
   var convertir ={
    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);
   return a1==a2?0:a1   };
    },
    modifier : fonction(e){
        var elem = this.inputtd=e.srcElement || e.cible;
        if(!elem.getAttribute('edit'))return;
        this.input.value = elem.innerHTML;
        elem.innerHTML = "";
        elem.appendChild(this.input);
        this.input.focus();
    },
    sauvegarder : fonction(elem){
  var editinfo=this.editconfig[elem.parentNode.getAttribute('edit')],status={
   "[Fonction objet]" : 'longueur' dans editinfo.rule&&editinfo.rule(this.input.value)||false,       
   "[object RegExp]"   : 'test' dans editinfo.rule&&editinfo.rule.test(this.input.value)||false
  }[Object.prototype.toString.call(editinfo.rule)],_self=this;
  //如果不符合条件  修改提示信息
  typeof status != "boolean"&&(editinfo.message = status);
  si(statut===true){
   this.inputtd.innerHTML = this.input.value;
   this.inputtd=null;
  }autre{
   alerte(editinfo.message);
   //firefox                           setTimeout(function(){_self.input.focus()},0);
  }                    
    },
    theadHover  : fonction(e){
        var elem = e.srcElement || e.cible;
        if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on){
            this.closConfig.totd = elem.getAttribute('clos');
   !hasClass(elem,'thover')&&addClass(elem,'thover');
  }        
    },
 theadOut : fonction(e){
        var elem = e.srcElement || e.cible;
        if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on)removeClass(elem,'thover')
 },
    dragOuLargeur : fonction(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 : fonction(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 = "aucun";
        removeListener(document,'mousemove');
        RemoveListener(document,'mouseup');
  Sys.ie&&this.thead.releaseCapture();
  closConfig.on = faux ; 
  if(closConfig.totd===null)return;
  removeClass(this.theadTds[closConfig.totd],'thover');
        //在同一列 不进行列替换
        if(closConfig.td === closConfig.totd)return;
  
  //进行列替换 如果
  si(closConfig.td*1 1===closConfig.totd*1){
   n = closConfig.totd;
   o = closConfig.td;
  }autre{
   n = closConfig.td;
   o = closConfig.totd;
  >
        pour(;i             td = rows[i].getElementsByTagName('td');
            rows[i].insertBefore(td[n],td[o]);
        }                
                  
        //重新标识表头
        pour(i=0,l=this.theadTds.length;i             this.theadTds[i].setAttribute('clos',i);
  closConfig.totd=closConfig.td=null;     
    },
 widthMove : fonction(e){
  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  var widthConfig = this.widthConfig,x = e.clientX - widthConfig.x,left = e.clientX,clientX=left;
  if(clientXwidthConfig.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 : fonction(){
  this.line.style.display = "aucun";
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(){
Fonction checkName(val){
If(val.replace(/^s $/g,'')==='') return 'L'entrée du nom ne peut pas être vide';
If(val.replace(/^s |s $/,'').length>10) return 'Le nom ne peut pas dépasser 10 caractères';
If(!/^[u4e00-u9fa5a-z] $/i.test(val)) return 'Le nom ne peut être saisi qu'en chinois ou en lettres';
        return true ;
};
fonction checkRemark(val){
if(val.replace(/^s $/g,'')===='') return 'L'entrée de remarque ne peut pas être vide';
if(val.replace(/^s |s $/,'').length>15) return 'La longueur de la note ne peut pas être supérieure à 15 caractères';
if(!/^[u4e00-u9fa5ws] $/i.test(val)) return 'Les remarques ne peuvent saisir que des chiffres chinois, des traits de soulignement et des espaces';
renvoie vrai ;
>
var ensemble = [
{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 :"Entrez la date 1985-02-30 dans ce format" }},
{id:4,type:"string",edit:{rule:checkRemark,message:''}}
];
nouveau Tableau($("tab"),set);
>

BUG connu :

Sous ie6, le chinois ne s'enroule pas automatiquement

C'est vraiment ennuyeux que les lettres et les chiffres ne s'ajustent pas automatiquement lorsqu'ils ne sont pas exécutés dans Internet Explorer

Il semble y avoir un gros problème lors du clic et de l'exécution dans le navigateur Chrome. Il serait préférable de faire un test local

.