Le javascript natif implémente des compétences simples de table_javascript de données de grille de données-js tutoriel-php.cn

Grille de données simple

1. Tri Méthode de tri personnalisée

2. Modifier

3. Faites glisser

4. Pagination

5. Sélection unique, sélection multiple (ctrl), sélection linéaire (shift)

6. Le rendu du texte consiste à colorer le texte, par exemple en rouge s'il est supérieur à 0 et en vert s'il est inférieur à 0

7. Afficher et masquer les colonnes

8. Regroupement

Juste un exemple, pas d'excuses avec le backend

En fait, vous pouvez simplement écrire quelques rappels. Il y a une barre de chargement à l'intérieur, qui peut être affichée jusqu'à ce que le résultat soit renvoyé

Copier le code Le code est le suivant : http://www.w3.org/1999/xhtml "> tableau *{marge :0 ; remplissage :0;} .h{hauteur de ligne:20px;} .c{zoom:1;} .c:après {contenu:"."; affichage:bloc; hauteur : 0 ; clair : les deux ; visibilité: caché;} .l{float:gauche;} .r{float:right;} ul{list-style:aucun;} .demo{largeur:832px; hauteur : 400 px ; taille de police : 12 px ; marge : 20px automatique ; position : relative🎜> .demo .m_a{margin-right:8px;} .demo .nobreak{white-space:keep-all;*white-space:normal;text-overflow:ellipsis;overflow:hidden;height:22px;width:100%;} .démo .conteneur{ bordure : 1px solide #99bbe8 ; hauteur:auto; > .demo .i_a{border:1px solid #ccc;margin-top:2px;} .demo .t_a{border-left:1px solid #99bbe8;border-bottom:1px solid #99bbe8;} .demo .t_a td{background-color:#fff;border-right:1px solid #ccc;border-top:1px solid #ccc;} .demo table td{ hauteur de ligne : 22px ; hauteur:20px; > .demo table head .theadfocus{ background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) répétition-x 0 -163px; > .demo table head td{ débordement : masqué ; > .demo .t_a tbody td{padding-left:8px;} .demo .title{hauteur:24px; hauteur de ligne : 22 px ; poids de la police : gras ; remplissage-gauche : 20 px ; couleur : #666666 ; background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) répétition-x 0 -300px ; > .demo .bar{_display:inline-block;line-height:20px; hauteur : 20 px ; bordure supérieure : 1px solide #99bbe8 ; background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) répétition-x 0 -350px;padding:2px 0 2px 20px;} .demo .f_a{color:#3b526e;font-weight:bold;} .demo .first_div,.demo .prev_div,.demo .next_div,.demo .last_div,.demo .first_div_no,.demo .prev_div_no,.demo .next_div_no,.demo .last_div_no{float:left;width:18px;height : 16px;margin-top:3px;cursor:pointer;display:block;margin-right:5px;background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) pas de répétition🎜> .demo .first_div{background-position : -12px -58px;} .demo .first_div_no{background-position:4px -58px;cursor:normal} .demo .prev_div{background-position:-11px -78px;} .demo .prev_div_no{background-position:5px -78px;cursor:normal} .demo .next_div{background-position:-65px -78px;} .demo .next_div_no{background-position:-49px -78px;cursor:normal} .demo .last_div{background-position:-67px -58px;} .demo .last_div_no{background-position:-51px -58px;cursor:normal} .demo .rowfocus td{background-color:#ebf2fb} .demo .delbtn,.demo .delbtn:hover{background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) no-repeat;width:45px; text-align:center;height:20px;color:#333;display:block;text-decoration:none;float:left;} .demo .delbtn{background-position:-55px 0;} .demo .delbtn:hover{background-position:-55px -30px;color:#666} .table de démonstration{ taille de police : 12px ; disposition de la table : fixe ; -moz-user-select : -moz-none; -webkit-user-select:aucun; -khtml-user-select:aucun; > .demo .tabcontainer{ largeur:99%; débordement:auto; remplissage :2px 0 0 2px; couleur d'arrière-plan :#FFFBF7; position:relatif; > .demo table thead td{background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) répétition-x 0 -100px;} .demo table tête a{ indice z : 1000 ; couleur d'arrière-plan :#C3DAF9; background-image:url(" http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png "); affichage : aucun ; largeur:12px; hauteur:22px; position d'arrière-plan :0 -234px ; position:absolue; haut :0; à droite :0; > .demo table thead div{ position:relative; indice z : 1 ;🎜> .demo table tête p{ largeur:1px; hauteur:22px; couleur d'arrière-plan :#99BBE8; float:gauche; display:bloc; curseur:e-resize; marge droite:2px; > .demo table tr.trfocus td{ couleur d'arrière-plan :#ebf2fb > .demo div table,.demo div table tr,.demo div table tr td{ -moz-user-select : -moz-none; -webkit-user-select:aucun; > .demo table tr td{background-color:#fff; débordement : caché ; débordement de texte : points de suspension ; espace blanc:nowrap;} .demo .loading{position:absolute;z-index:9999;left:0;top:0;background:#e5e5e5;filter:Alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;-khtml -opacité :0,5 ;> .demo .loaddiv{position:absolute;z-index:99999;width:98px;height:28px;border:1px solid #6593cf;background:#fff url( http://images.cnblogs.com/cnblogs_com /wtcsy/294024/r_ajaxtable.png ) répétition-x 0 -300px;padding:2px;} .demo .loadgif{background:#fff url(images/loading_small.gif) sans répétition 4px 5px ; remplissage : 5px 0 0 27px ; largeur : 68px ; hauteur : 21px ; bordure : 1px solide #6593cf ;🎜> .demo .loadtext{color:#000;> .demo .edittable{border:1px solid #c4c4c4;} .demo .edittable td{background:#ebf2fb;height:24px;} .demo .editbtn{padding:5px;width:100px;margin:0 auto;background:#ebf2fb;border:1px solid #c4c4c4;border-top:none;} .demo .delbtn,.ajaxTable .delbtn:hover{background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) no-repeat;width:45px; text-align:center;height:20px;color:#333;display:block;text-decoration:none;float:left;} .demo .delbtn{background-position:-55px 0;} .demo .delbtn:hover{background-position:-55px -30px;color:#666} .demo .btn_a,.ajaxTable .btn_a:hover{ Cursor:pointer;background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) pas de répétition ; text-align:center;padding-top:5px;largeur:45px;height:17px;display:block;float:left;cursor:pointer;text-decoration:none;} .demo .btn_a{background-position:0 0;color:#333;} .demo .btn_a:hover{background-position:0 -30px;color:#666;} .sort-asc .head_span{ hauteur : 12 px ; largeur:24px; display:bloc; float:gauche; padding-right:18px; background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) pas de répétition à droite -423px; > .head_span{float:left;line-height:22px;display:block;} .sort-desc .head_span{ hauteur : 12 px ; largeur:24px; display:bloc; float:gauche; padding-right:18px; background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) pas de répétition à droite -391px; > .x-menu{ position:absolue; background:url(menu.gif) répéter-y #f0f0f0; bordure : 1px solide #718bb7 ; largeur:134px; affichage : aucun ; > .x-menu .disabled a{ couleur : #999; > .x-menu-list{padding:2px; débordement : caché ; marge :0;} .x-menu-list li{padding:1px; espace blanc:nowrap; hauteur : 20 px ;🎜> .x-menu-list li.focus{backround:#09F;} a.x-menu-item{ display:bloc; curseur : pointeur ; hauteur de ligne : 18 px ; hauteur:20px; couleur du contour : -moz-use-text-color ; style de contour : aucun ; largeur du contour : 0; largeur:100px; padding-left:27px; position : relative ; décoration de texte : aucune ; espace blanc : nowrap; taille de police : 12px ; couleur:#222; > a.x-m_a{padding-left:8px;width:120px;} a.x-menu-item input{margin-right:8px> a.x-menu-item:hover{background-color:#d9e8fb} .asc{background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) sans répétition -53px -218px;} .desc{background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) sans répétition -53px -243px;} .columns{background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) sans répétition -53px -268px;} .submenu{ position:absolue; indice z : 1500 ; arrière-plan :#f0f0f0; bordure : 1px solide #718bb7 ; largeur:134px; affichage : aucun ; > .x-menu-list .child-menu{background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) no-repeat right -444px;} a.x-m_a{padding-left:8px;width:120px;} a.x-menu-item input{margin-right:8px} a.x-menu-item:hover{background-color:#d9e8fb} .line{ width:1px;background-color: #cccccc;position:absolute;display:none; z-index:100; } .red{ color:#FF0000; } .greed{ color:#33FF00; } 1.排序 自定义排序方式

2.编辑

3.拖拽

4.分页

5.单选 多选(ctrl) 线性选(shift)

6.文字render 就是给文字着色 比如 大于0红色 小于0绿色

7.对列的显示隐藏

8.分组

下面是分组的 且有一个自定义排序方式 很好 一般 很差

(fonction(doc,indéfini){ var gagner = ceci; win.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; }(win.navigator.userAgent.toLowerCase()); win.Sys.ie6&&doc.execCommand("BackgroundImageCache", false, true); gagner.$$ = fonction(id){ return typeof id === 'string' ? doc.getElementById(id) : identifiant; }; win.$q = fonction (nom, parent){ return parent.getElementsByTagName(name); > win.$c = fonction(nom,parent){ var elem = type de nom === 'objet' ? nom : doc.createElement(nom); parent&&parent.appendChild(elem); renvoyer l'élément ; }; win.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); }; win.addListener.guid = 1; win.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]; > } }; win.fireEvent = function(element,eventName){ si (élément [nom de l'événement]) { élément[eventName](); }else if(element.fireEvent){ element.fireEvent('on' eventName); }else if(doc.createEvent){ var evt = doc.createEvent("MouseEvents"); evt.initEvent(eventName, true, true); element.dispatchEvent(evt); } }; win.setStyle = fonction (éléments, style, valeur){ if( !elems.length ) elems = [elems]; if( typeof style == "string"){ style = valeur === non défini ?{cssText:style}:(function(o){ return (o[style] = valeur,o); })({}); }; chacun(elems,function(i,elem,style){ var valeur, nom, ie=Sys.ie ; pour(nom avec style){ valeur = style[nom]; if (nom === "opacité" && ie) { elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha([^)]*)/, "" ) "alpha(opacity=" value * 100 ")"; }else if(name === "float"){ elem.style[c'est-à-dire ? "styleFloat" : "cssFloat" ] = valeur; }autre{ nom = nom.replace(/-([a-z])/ig, function(tout, lettre){ return letter.toUpperCase(); }); elem.style[nom] = valeur; > > },style); }; win.setAttr = fonction(dom,attr){ if(typeof attr !== 'object') revenir ; pour (nom de la variable en attr) dom.setAttribute(nom,attr[nom]); > var tranche = Array.prototype.slice; win.bind = fonction (objet, amusant) { var args = slice.call(arguments).slice(2); return function() { return fun.apply(object, args); }; }; win.bindAsEventListener = function(objet, fun,args) { var args = slice.call(arguments).slice(2); fonction de retour (événement) { return fun.apply(object, [event || win.event].concat(args)); > }; win.extend = fonction(){ 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 ; }; win.Class = fonction (propriétés) { var _class = fonction(){ return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : ceci; }; _class.prototype = propriétés; retourner _class; } ; win.each = function ( objet, rappel, arguments ) { nom du var, i = 0, longueur = objet.longueur ; si ( arguments ) { args = Array.prototype.slice.call(arguments).slice(2); if ( longueur === non défini ) { pour (nom dans l'objet) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) casser; } autre pour ( ; je if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // casser; } autre { if ( longueur === non défini ) { pour (nom dans l'objet) if ( callback.call( object[ name ], name, object[ name ] ) === false ) casser; } autre pour ( var valeur = objet[0]; je &Lt ; longueur && callback.call( valeur, i, valeur ) !== false; valeur = objet[ i] ){} } renvoyer l'objet ; } ; win.currentStyle = fonction (élément){ return element.currentStyle || doc.defaultView.getComputedStyle(element, null); }; win.objPos = fonction(elem){ var gauche = 0, haut = 0, droite = 0, bas = 0,doc = elem ? elem.ownerDocument : doc; if ( !elem.getBoundingClientRect || win.Sys.ie8 ) { var n = elem; while (n) { left = n.offsetLeft, top = n.offsetTop ; n = n.offsetParent ; }; droite = gauche elem.offsetWidth ; bottom = top elem.offsetHeight; } autre { var rect = elem.getBoundingClientRect(); gauche = droite = doc.documentElement.scrollLeft || doc.body.scrollLeft; haut = bas = doc.documentElement.scrollLeft || doc.body.scrollLeft; gauche = rect.gauche ; droite = rect.droite; top = rect.top ; bottom = rect.bottom; > return { "gauche" : gauche, "haut" : haut, "droite" : droite, "bas" : bas }; }; win.contains = function(k,j){ retourner document.compareDocumentPosition ? k.compareDocumentPosition(j)&16 : k!==j&&k.contains(j); }; win.hasClass = function(element, className){ return element.className.match(new RegExp('( \s|^)' className '(\s|$)' )); }; win.addClass = function(element, className){ if(!win.hasClass(element, className)) element.className.replace(/s/g,'')==='' ? element.className = className : element.className = " " className; }; win.removeClass = function(element, className){ win.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('( \s*|^)' className '(\s*|$)'),' ')); > })(document); (fonction(doc,indéfini){ var gagne = ceci, uuid = -1; /* 检查 字符串 中是否有clé 如果有 且key后面是- 返回-后面的东西 否则返回true 检测不到返回faux */ fonction checkReg(str,key){ var reg = new RegExp('(?:^|\s)' key '\b-?(.*?)(?:\s|$)','i'); if(reg.exec(str)!=null){ return RegExp.$1===''?true:RegExp.$1; }autre{ renvoie faux ; > }; /* 修改字符串中key对应的value */ fonction modifier (str, clé, valeur) { var reg = new RegExp('(^|\s)(' key '\b-).*?( \s|$)','i' ); return str.replace(reg,'$1$2' value '$3'); } ; win.easyGrid = nouvelle classe ({ options : { parPage : 10, currPage : 0, totalPage : 0, compte : 10, page : 0, isEdit : faux, widthConfig : { td : nul, précédentTd : nul, x : 0, tdLargeur : 0, précédentLargeur : 0 }, cellMinWidth : 50, Type de tri : { int : function(v){return parseInt(v)}, float : function(v){return parseFloat(v)}, date : function(v){return v.toString()}, string : function(v){return v.toString()} }, titre : '标题' }, initialiser : fonction(options){ var op = extend(true,{},this.options), options = this.defaults = extend(op,options), conteneur = this.container = $c('div',options.container), dataConfig = options.dataConfig, titre = $c('div',conteneur); conteneur.className = 'conteneur'; titre.innerHTML = options.titre; title.className = 'titre'; this.primaryKey = options.primaryKey; this.top = $c('div',conteneur); this.top.className = 'bar'; this.top.innerHTML = ' 跳转 删除 当前第 页 总共 页 一页 条数据 共 条数据 '; var tabContainer = this.tabContainer = $c('div',container); this.bottom = $c(this.top.cloneNode(true),container); tabContainer.className = 'tabcontainer'; tabContainer.style.height = ~~options.container.offsetHeight - 83+'px'; var table = this.table = $c('table',tabContainer); table.className = 't_a'; setAttr(table,{cellpadding :"0",cellspacing:"0",border :"0"}); this.thead = $c('thead',table); this.tbody = $c('tbody',table); this.tbody.style.display = 'none'; //loading条 this.loading_bg = $c('div',container); this.loading_bg.className = 'loading'; setStyle(this.loading_bg,{ width : container.offsetWidth+2+'px', height : container.offsetHeight+2+'px' }); this.loading = $c('div',container); this.loading.className ='loaddiv' setStyle(this.loading,{ left:(container.offsetWidth/2-45) + 'px', top:(container.offsetHeight/2-14) + 'px' }); this.loading.innerHTML = ' Loading... '; //表格有多少列 this.colCount = options.fields.length; // 数据源 形式是 [[],[],[],[],[],[]] this.data = []; // 当前请求到的数据源中 所有的分组头 形式是 [trdom1,trdom2] this.grouphead = []; //记录已经插入table的分组的tr [tr1,tr2,tr3] this.insertTrs = []; //列索引 //形式 [[td11,td12,td13,td14],[td21,td22,td23,td24]] this.columns = []; //true表示正序 false表示反序 this.ascSort = true; //保存哪一列正在排序中的表头td this.sortColumn = ''; //所有tr行 如果没有分组 形式是[tr1,tr2,tr3,tr4] //如果有分组 [[tr1,tr2,tr3,tr4],[tr5,tr6,tr7,tr8]] this.rows =[]; //一级菜单 this.popMenu = $c('div',doc.body); this.popMenu.className = 'x-menu'; this.popMenu.innerHTML = ' 升序 降序 所有列 '; // 创建子菜单 this.subPopMenu = $c('div',doc.body); this.subPopMenu.className = 'submenu'; //表头的第一级弹出层是否打开 如果打开 保存 该td this.isMenuOpen = false; //保存列所有列中 某一列是否显示 或隐藏 num为计数器 看有多少列是现实中的 //格式 clos: [ true,false,true,true] 1,3,4列显示 第2列隐藏 this.isShowTrs = { num : 0, clos: [] }; // 创建拖动时显示的基准线 this.line = $c('div',doc.body); this.line.className = 'line'; //保存行 //属性为uuid的递增量如 {1:dom,2:dom} this.selectedRows = {}; // 保存最后选中的行 this.lastSelectRow = {dom:null,index:null}; this.currentEditRow = {index:0,dom:null}; this.editData = []; this.editForm = $c('div',tabContainer);; setStyle(this.editForm,{ position : 'absolute', display : 'none', 'z-index': '120' }); this.editTable = $c('table',this.editForm); setAttr(this.editTable,{ cellspacing:'0', cellpadding:'0', border:'0' }); var btnC = $c('div',this.editForm); btnC.className = 'editbtn'; btnC.style.textAlign = 'center'; btnC.innerHTML = ' 提交 取消 '; this.editTable.className = 'edittable'; var etr = $c('tr', $c('tbody',this.editTable)); //创建一个 tr 的副本 因为后面生成tr的时候 可以直接复制节点 this.copyTr = $c('tr'); this.groupTr = $c('tr'); this.groupTr.setAttribute('g','y'); var ctd= $c('td',this.groupTr) ctd.setAttribute('colSpan',options.fields.length); var theadTr = $c('tr',this.thead), tWidth = 0, self = this, ul = $c('ul',this.subPopMenu), li; each(options.fields,function(i,o){ var td = $c('td',theadTr), width = o.width?o.width:'80', div = i===0?' ':'

'; td.innerHTML = [div,' ',o.name,' '].join(''); setAttr(td,{clos:i,width:width,unselectable:'on','class':o.type === undefined?'':'type-' o.type}); Self.createInput(i,o,etr); tLargeur = tLargeur (~~largeur); li = $c('li',ul); li.innerHTML = [ ' je, '"/>', o.nom, ' ' ].join(''); //Générer le premier élément de chaque colonne dans l'index de la colonne self.colonnes[i] = [td]; $c('td',self.copyTr).setAttribute('unselectable','on'); //Calculer l'index de colonne affiché et le nombre total de colonnes num Self.isShowTrs.num ; Self.isShowTrs.clos[i]=true }); setAttr(this.table,{width:tWidth options.fields.length 1}) //La génération de tr dans tbody génère simplement tr en fonction de perPage. Il s'agit d'un élément de configuration qui affiche le nombre de données disponibles actuellement . var je=0, trsLen = options.parPage, frag = doc.createDocumentFragment(), arr = nouveau tableau (options.fields.length), tr, tds; pour(;i tr = this.copyTr.cloneNode(true); tds = $q('td',tr); Chaque(arr,fonction(i){ //Générer tous les éléments de l'index de colonne Self.columns[i].push(tds[i]); }); $c(tr,frag); > This.tbody.appendChild(frag); if(typeof dataConfig === 'object'){ setTimeout(function(){self.getDataCallBack(dataConfig);},5 ); }autre{ > /* Glisser-déposer de formulaire Tri des tableaux En attente de quelques opérations */ AddListener(this.thead,'click',bindAsEventListener(this,this.sortTable)); AddListener(this.thead,'mouseover',bindAsEventListener(this,this.theadOver)); AddListener(this.thead,'mouseout',bindAsEventListener(this,this.theadOut)); AddListener(this.thead,'mousedown',bindAsEventListener(this,this.dragWidth)); /* Liez l'événement de clic du calque contextuel pour trier Liaison de menu de deuxième niveau pour masquer les colonnes et afficher */ AddListener(this.popMenu,'click',bindAsEventListener(this,this.menuClick)); AddListener(this.popMenu,'mouseover',bindAsEventListener(this,this.menuOver)); AddListener(this.subPopMenu,'click',bindAsEventListener(this,this.subMenuClick)); /* Mettre le contenu de la ligne du tableau devient plus épais */ AddListener(this.tbody,'mousemove',bindAsEventListener(this,this.rowHighlight,true)); AddListener(this.tbody,'mouseout',bindAsEventListener(this,this.rowHighlight,false)); AddListener(this.tbody,'mousedown',bindAsEventListener(this,this.selectRow,false)); AddListener(this.tbody,'dblclick',bindAsEventListener(this,this.editRow,false)); AddListener(btnC,'click',bindAsEventListener(this,this.modifyTr)); AddListener(this.top,'click',bindAsEventListener(this,this.pageBarClick)); AddListener(this.bottom,'click',bindAsEventListener(this,this.pageBarClick)); }, getDataCallBack : fonction (données) { var options = this.defaults, soi = ceci, Total = 0; this.data.length = 0; si(données.données){ si(data.data[0].groupName){ var grouphead = this.grouphead; grouphead.length = 0; chacun(data.data,function(i,o){ var gtr = self.groupTr.cloneNode(true); $q('td',gtr)[0].innerHTML = o.groupName; grouphead.push(gtr); chacun(o.lignes,fonction(j,d){ //this.data中数据的最后一项是 索引 d.push(i); self.data.push(d); }); }); this.showGroup=true; }autre{ chacun(data.data,function(i,o){ self.data.push(o); }); this.showGroup=false; > }autre{ revenir ; > total = data.total ? data.total>=this.data.length ? data.total : this.data.length : this.data.length; this.writeMessage(total); this.buildTbody(options.currPage); }, buildTbody : function(pageNum){ si(this.data.length===0){ this.tbody.style.display = 'aucun'; retour; > var je = 0, j = 0, soi = ceci, data = this.data, options = this.defaults, trsLen = options.perPage, tdsLen = options.fields.length, tbody = this.tbody, trs = tbody.getElementsByTagName('tr'), début = pageNum*options.perPage, tr; this.rows.length = 0; si(this.showGroup){ var groupe = {}, indice, arr = [], insertTrs = this.insertTrs; //清除掉之前插入的 分组tr insertTrs.length!=0&&each(insertTrs,function(i,o){ self.tbody.removeChild(o); }); insertTrs.length = 0; //遍历填充数据 给this.rows赋值 var num = - 1; pour(;i tr = très[i]; //如果没有数据了 就开始隐藏剩下的行 if(!data[je commence]){ tr.style.display = 'aucun'; continuer ; > //做标记 tr 里面的内容对应data中哪条数据 tr.setAttribute('dataIndex',je commence); tr.style.display = 'bloc'; tds = tr.getElementsByTagName('td'); //x为 分组的不同组的标识 var x = data[i start][data[i start].length-1]; //Utilisé pour déterminer si les données suivantes et les données précédentes sont dans le même groupe // S'ils sont dans le même groupe, sélectionnez la dernière colonne de this.rows et ajoutez //Créez une colonne qui n'est pas dans le même groupe et ajoutez

num==x ? this.rows[this.rows.length-1].push(tr) : (this.rows[this.rows.length] = [tr],num = x); //Utilisez le tableau arr pour mémoriser la position du premier tr de chaque groupe car l'en-tête tr sera inséré plus tard i est la position et num est le numéro de séquence du groupe . !(num dans le groupe)&&(group[num] = i start,arr.push([num,i])); pour(j = 0;j td = tds[j]; var txt = data[i start][j] ===''?':data[i start][j]; render = options.fields[j].render; td.innerHTML = rendu ?render(txt) :txt; > >

Chacun(arr.reverse(),fonction(i,o){ insertTrs.push(self.grouphead[o[0]]); Self.tbody.insertBefore(self.grouphead[o[0]],trs[o[1]]); });

}autre{ pour(;i //Marquer le contenu en tr correspondant à quelle donnée dans data tr.setAttribute('dataIndex',i start); This.rows.push(tr); //Masquer tr sans données Si(!data[je commence]){ tr.style.display = 'aucun'; Continuer ; > tr.style.display = ''; tds = $q('td',tr);

pour(j = 0;j var txt = data[i start][j] ===''?':data[i start][j]; render = options.fields[j].render; tds[j].innerHTML = render ?render(txt) :SMS; > } > options.currPage = pageNum; This.top.getElementsByTagName('span')[0].innerHTML=this.bottom.getElementsByTagName('span')[0].innerHTML = ~~pageNum 1; var topAs = this.top.getElementsByTagName('a'), bottomAs = this.bottom.getElementsByTagName('a'); si(options.totalPage===1){ bottomAs[0].className = topAs[0].className = 'first_div_no'; bottomAs[1].className = topAs[1].className = 'prev_div_no'; bottomAs[2].className = topAs[2].className = 'next_div_no'; bottomAs[3].className = topAs[3].className = 'last_div_no'; }else if(options.currPage===0){ bottomAs[0].className = topAs[0].className = 'first_div_no'; bottomAs[1].className = topAs[1].className = 'prev_div_no'; bottomAs[2].className = topAs[2].className = 'next_div'; bottomAs[3].className = topAs[3].className = 'last_div' }else if(options.currPage 1===options.totalPage){ bottomAs[0].className = topAs[0].className = 'first_div'; bottomAs[1].className = topAs[1].className = 'prev_div'; bottomAs[2].className = topAs[2].className = 'next_div_no'; bottomAs[3].className = topAs[3].className = 'last_div_no'; }autre{ bottomAs[0].className = topAs[0].className = 'first_div'; bottomAs[1].className = topAs[1].className = 'prev_div'; bottomAs[2].className = topAs[2].className = 'next_div'; bottomAs[3].className = topAs[3].className = 'last_div'; > this.tbody.style.display = ''; this.loading_bg.style.display = 'aucun'; this.loading.style.display ='none'; }, writeMessage : fonction (total){ var options = this.defaults, base = total/options.perPage, topSpans = this.top.getElementsByTagName('span'), bottomSpans = this.bottom.getElementsByTagName('span'); options.totalPage = base > parseInt(base) ? parseInt(base) 1 : base; bottomSpans[0].innerHTML = topSpans[0].innerHTML = ~~options.currPage 1; bottomSpans[1].innerHTML = topSpans[1].innerHTML = options.totalPage; bottomSpans[2].innerHTML = topSpans[2].innerHTML = options.perPage; bottomSpans[3].innerHTML = topSpans[3].innerHTML = total; }, sortTable : fonction(e){ var elem = e.cible || e.srcElement, soi = ceci, options = this.defaults, elemName = elem.nodeName.toLowerCase(), showGroup = this.showGroup, tdElem = elem, nom = elemName; //拖拽的时候可能会触发一次cliquez sur 原因是ie下全部绑定在this.table上 代码见拖拽 si($q('td',elem).length>1) revenir ; si(nom !== 'td'){ while(nom !== 'td'){ tdElem = tdElem.parentNode; nom = tdElem.nodeName.toLowerCase(); } > var issort = checkReg(tdElem.className,'sort'), type = checkReg(tdElem.className,'type') //进行排序 if(elemName !=='a'&&type){ var frag = doc.createDocumentFragment(); if(this.sortColumn!==tdElem&&this.sortColumn!==''){ removeClass(this.sortColumn,'sort-asc'); removeClass(this.sortColumn,'sort-desc'); } si(issort){ // 有分组，每组单独取反序 不分组，直接取反序 showGroup ? each(this.rows,function(i,o){ o.reverse();}) : this.rows.reverse(); tdElem.className = modifier(tdElem.className,'sort',issort==='asc'?'desc':'asc'); }autre{ showGroup ? chacun(this.rows,function(i,o){ o.sort(self.compare(tdElem.getAttribute('clos'),type)); }) : this.rows.sort(this.compare(tdElem.getAttribute('clos'),type)); // 如果是正序排序，加上正序排列的标志。 if(this.ascSort){ addClass(tdElem,'sort-asc'); }autre{ // 反序排列则将原有排序取反，并加上排序标志 showGroup ? chacun(this.rows,function(i,o){ o.reverse();}) : this.rows.reverse(); addClass(tdElem,'sort-desc'); > // Rend les données triées dans la table var insertTrs = this.insertTrs, len = insertTrs.length-1, arr = []; Chacun(this.rows,function(i,tr){ arr = [insertTrs[len-i]].concat(tr); AfficherGroupe ? chacun(arr,function(idx,obj){frag.appendChild(obj);}) : frag.appendChild(tr); }); This.tbody.appendChild(frag); This.sortColumn = tdElem; > //------------------------------------------------ --------------------------------------------- /* Si vous cliquez sur l'étiquette A dans l'en-tête, un menu apparaîtra */ if(elemName === 'a'){ /* En cliquant en dehors du menu, la fonction modifiée sera exécutée Utilisé pour effacer l'événement click du document Couche cachée Supprimer le style de td et a */ Fonction documentClick(){ Self.popMenu.style.display = 'aucun'; Self.subPopMenu.style.display = 'aucun'; Si(self.isMenuOpen){ removeListener(document,'click'); removeClass($q('div',self.isMenuOpen)[0],'theadfocus'); $q('a',self.isMenuOpen)[0].style.display = 'none'; self.isMenuOpen = false; > var pos = objPos(elem), left = pos.left Math.max(document.documentElement.scrollLeft,document.documentElement.scrollLeft), top = pos.top Math.max(document.documentElement.scrollTop,document.documentElement.scrollTop) elem.offsetHeight, td = elem.parentNode.parentNode, lis = $q('li',this.popMenu); //Si this.isMenuOpen est vrai, cela signifie que la couche est ouverte et effectue le traitement lié à la fermeture This.isMenuOpen&&documentClick(); Si(!checkReg(td.className,'type')){ addClass(lis[0],'disabled'); addClass(lis[1],'disabled'); }autre{ removeClass(lis[0],'disabled'); removeClass(lis[1],'disabled'); > Sys.ie ? e.cancelBubble = vrai : e.stopPropagation(); //Lors de l'affichage du calque, attachez le td à this.isMenuOpen This.isMenuOpen = td; AddListener(document,'click',documentClick); setStyle(this.popMenu,{ gauche haut : haut 'px', Affichage : 'bloquer' }); > }, comparer : function(n,type){ var sortType = this.defaults.sortType, txt =Sys.ie?'innerText':'textContent'; !sortType[type]&&(type = 'string'); Fonction de retour (a1,a2){ a1 = sortType[type](a1.cells[n][txt]); a2 = sortType[type](a2.cells[n][txt]); return a1==a2?0:a1 > }, pageBarClick : fonction(e){ var elem = e.cible || e.srcElement, options = this.defaults, typePage = elem.getAttribute('page'), isGo = elem.getAttribute('go'); isDel = elem.getAttribute('del'); si(typePage){ numéro var = { début : 0, fin : options.totalPage-1, suivant : options.currPage-1, pré : options.currPage 1 }[typePage]; this.toPage(numéro); > si(isDel){ this.del(); > si(isGo){ var number = ~~elem.parentNode.getElementsByTagName('input')[0].value-1; this.toPage(numéro); } }, versPage : fonction(num){ if(typeof num !=='number'||isNaN(num))return; var options = this.defaults, soi = ceci, dataConfig = options.dataConfig; //如果请求的分页数小于0就默认为0 如果打越最大分页数 就默认为最大分页数 num>=options.totalPage &&(num = options.totalPage-1); num //s为当前面板的第一页 e为当前面板的最后 var basePage = options.count/options.perPage, s = options.page*basePage, e = s basePage-1; this.tbody.style.display = 'aucun'; this.loading_bg.style.display = '';; this.loading.style.display = ''; setTimeout(function(){self.buildTbody(num);},10); }, del : fonction(){ //做删除的时候需要有主键的索引 我全部保存在tr的 var selectedRows = this.selectedRows, arr = [] for(nom de la variable dans les lignes sélectionnées){ arr.push(selectedRows[name].getAttribute('dataIndex')); > alert('选择了主键值为' arr.join(',')); }, theadOver : fonction(e){ var elem = e.cible || e.srcElement; if(elem.nodeName.toLowerCase() === 'div'){ $q('a',elem)[0].style.display = 'block'; addClass(elem,'theadfocus'); > }, theadOut : fonction(e){ var elem = e.cible || e.srcElement, toElem = e.toElement||e.ratedTarget, elemName = elem.nodeName.toLowerCase(); if(this.isMenuOpen && contient(this.isMenuOpen,elem)) revenir ; //如果离开了当前的td 隐藏显示出来的东西 if(elemName === 'div'&& elem !== this.isMenuOpen){ if(!contains(elem,toElem)){ $q('a',elem)[0].style.display = 'aucun'; removeClass(elem,'theadfocus'); > > if(elemName === 'a' || elemName ==='span' || elemName === 'p'){ var parent = elem.parentNode; if(!contains(elem,toElem)){ $q('a',parent)[0].style.display = 'aucun'; removeClass(parent,'theadfocus'); > > }, menuClic : fonction(e){ var elem = e.cible || e.srcElement, Nom de classe = this.isMenuOpen.className; Si(elem.nodeName.toLowerCase()==='a'){ //Si le type n'existe pas dans le style td, ce qui signifie qu'aucun tri n'est requis, aucun tri ne sera effectué pour empêcher la propagation d'événements Si(!checkReg(className,'type')){ Sys.ie ? e.cancelBubble = vrai : e.stopPropagation(); Retour ; > //Si le menuType d'une balise est

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Le javascript natif implémente des compétences simples de table_javascript de données de grille de données