Simple dataGrid
1. Méthode de tri personnalisée
2.Edit
3. Faites glisser et traîner
4. Pagination
5. Sélection linéaire à choix multiple à choix unique (CTRL) (Shift)
6. Le rendu de texte doit colorer le texte, par exemple, supérieur à 0, rouge ou moins de 0, vert
7. Masquer l'affichage de la colonne
8. Groupement
Juste un exemple sans aucune excuse avec l'arrière-plan
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 retourné.
La copie de code est la suivante:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Table </Title>
<style type = "text / css">
* {margin: 0; rembourrage: 0;}
.h {Line-Height: 20px;}
.C {Zoom: 1;}
.c: après {contenu: "."; Affichage: bloc; hauteur: 0; Clear: les deux; Visibilité: cachée;}
.l {float: gauche;}
.r {float: à droite;}
ul {style liste: aucun;}
.demo {largeur: 832px; Hauteur: 400px; taille de police: 12px; marge: 20px automatique; Position: relative}
.demo .m_a {marge-droite: 8px;}
.Demo .NobReak {White-espace: Keep-all; * White-espace: normal; text-overflow: ellipsis; débordement: caché; hauteur: 22px; largeur: 100%;}
.Demo .Container {
Border: 1px solide # 99BBE8;
Hauteur: Auto;
}
.demo .i_a {border: 1px solide #ccc; margin-top: 2px;}
.demo .t_a {border-left: 1px solide # 99bbe8; border-bottom: 1px solide # 99bbe8;}
.demo .t_a td {fond-couleur: #fff; bordure-droite: 1px solide #ccc; border-top: 1px solide #ccc;}
.Demo Table TD {
hauteur de ligne: 22px;
hauteur: 20px;
}
.Demo Table thead .headfocus {
Contexte: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -163px;
}
.Demo Table thead td {
débordement: caché;
}
.demo .t_a tbody td {padding-left: 8px;}
.demo .Title {hauteur: 24px; hauteur de ligne: 22px; Police-poids: Bold; Padding-Left: 20px; Couleur: # 666666; Contexte: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -300px;}
.demo .bar {_display: en ligne de bloc; line-height: 20px; hauteur: 20px; Border-top: 1px solide # 99BBE8; Contexte: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-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 .next_div_no, .Demo. .Last_div_no {float: gauche; largeur: 18px; hauteur: 16px; marge: 3px; curseur: pointeur; affichage: bloc; margin-droite: 5px; arrière-plan: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png)
.Demo .First_Div {Position d'arrière-plan: -12px -58px;}
.demo .First_div_no {position de fond: 4px -58px; curseur: normal}
.Demo .Prev_Div {Position d'arrière-plan: -11px -78px;}
.demo .prev_div_no {position de fond: 5px -78px; curseur: normal}
.demo .next_div {position de fond: -65px -78px;}
.demo .next_div_no {position de fond: -49px -78px; curseur: normal}
.Demo .Last_Div {Position d'arrière-plan: -67px -58px;}
.demo .last_div_no {position de fond: -51px -58px; curseur: 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) sans répétition; largeur: 45px; Text-Align: Centre; hauteur: 20px; couleur: # 333; Affichage: Block; Text-Decoration: Aucun; Float: gauche;}
.demo .delbtn {position de fond: -55px 0;}
.Demo .Delbtn: Hover {Position en arrière-plan: -55px -30px; couleur: # 666}
.Demo Tableau {
taille de police: 12px;
Table-Layout: fixe;
-Moz-user-Select: -moz-non;
-Webkit-user-Select: Aucun;
-Khtml-User-Select: Aucun;
}
.demo .tabContainer {
Largeur: 99%;
débordement: auto;
rembourrage: 2px 0 0 2px;
Color d'arrière-plan: # fffbf7;
Position: relative;
}
.Demo Table thead td {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -100px;}
.Demo Table thead a {
Z-Index: 1000;
Color 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;
en haut: 0;
à droite: 0;
}
.Demo Table thead div {position: relatif; z-index: 1;}
.Demo Table thead P {
Largeur: 1px;
Hauteur: 22px;
Color en arrière-plan: # 99BBE8;
flottant: à gauche;
Affichage: bloc;
curseur: E-Resize;
marge-droite: 2px;
}
.Demo Table tr.trfocus td {
Color d'arrière-plan: # EBF2FB
}
.demo div Table, .demo div table tr, .demo div table tr td {
-Moz-user-Select: -moz-non;
-Webkit-user-Select: Aucun;
}
.Demo Table tr td {background-Color: #fff; débordement: caché; Text-overflow: ellipsis; Espace blanc: nowrap;}
.Demo .Loading {Position: Absolute; Z-index: 9999; Left: 0; top: 0; fond: # e5e5e5; filtre: alpha (opacité = 50); opacité: 0,5; -moz-opacité: 0,5; -Khtml-opacity: 0,5;}
.Demo .LoadDiv {position: Absolute; z-index: 99999; largeur: 98px; hauteur: 28px; bordure: 1px solide # 6593cf; arrière-plan: #fff url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) -300px; rembourrage: 2px;}
.demo .loadgif {background: #fff url (images / charging_small.gif) sans répétition 4px 5px; rembourrage: 5px 0 0 27px; largeur: 68px; hauteur: 21px; bordure: 1px solide # 6593cf;}
.demo .LoadText {Color: # 000;}
.Demo .EDITTable {Border: 1Px solide # C4C4C4;}
.Demo .EDIttable TD {Background: # ebf2fb; hauteur: 24px;}
.Demo .EditBtn {padding: 5px; largeur: 100px; marge: 0 auto; arrière-plan: # ebf2fb; bordure: 1px solide # c4c4c4; bordure: aucun;}
.demo .delbtn, .ajaxtable .delbtn: hover {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) sans répétition; largeur: 45px; Text-Align: Centre; hauteur: 20px; couleur: # 333; Affichage: Block; Text-Decoration: Aucun; Float: gauche;}
.demo .delbtn {position de fond: -55px 0;}
.Demo .Delbtn: Hover {Position en arrière-plan: -55px -30px; couleur: # 666}
.demo .btn_a, .ajaxtable .btn_a: hover {cursor: pointer; background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) sans répétition; Text-Align: Centre; padding-top: 5px; largeur: 45px; hauteur: 17px; affichage: bloc; float: gauche; curseur: pointeur; text-decoration: aucun;}
.demo .btn_a {position de fond: 0 0; couleur: # 333;}
.Demo .BTN_A: Hover {Position en arrière-plan: 0 -30px; couleur: # 666;}
.sort-asc .head_span {
hauteur: 12px; Largeur: 24px;
Affichage: bloc;
flottant: à gauche;
rembourrage à droite: 18px;
Contexte: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat droit -423px;
}
.head_span {Float: Left; Line-Height: 22px; Affichage: Block;}
.sort-desc .head_span {
hauteur: 12px; Largeur: 24px;
Affichage: bloc;
flottant: à gauche;
rembourrage à droite: 18px;
Contexte: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat droit -391px;
}
.x-menu {
Position: absolue;
Contexte: URL (menu.gif) répéter-y # f0f0f0;
Border: 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: 20px;}
.x-menu-list li.focus {backround: # 09f;}
ax-menu-item {
Affichage: bloc;
curseur: pointeur;
hauteur de ligne: 18px;
hauteur: 20px;
Color de contour: -moz-use-text-coulor;
style contour: aucun;
largeur de ligne: 0;
Largeur: 100px;
padding-gauche: 27px;
Position: relative;
Décoration du texte: aucune;
Espace blanc: Nowrap;
taille de police: 12px;
Couleur: # 222;
}
ax-m_a {padding-left: 8px; largeur: 120px;}
AX-MENU-ISTEM Entrée {marge-droite: 8px}
ax-menu-item: hover {background-color: # d9e8fb}
.asc {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-repeat -53px -218px;}
.desc {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat -53px -243px;}
.Columns {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat -53px -268px;}
.SubMenu {
Position: absolue;
Z-Index: 1500;
Contexte: # F0F0F0;
Border: 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;}
ax-m_a {padding-left: 8px; largeur: 120px;}
AX-MENU-ISTEM Entrée {marge-droite: 8px}
ax-menu-item: hover {background-color: # d9e8fb}
.doubler{
Largeur: 1px; fond-couleur: #cccccc; position: absolue; affichage: aucun; Z-Index: 100;
}
.rouge{
Couleur: # FF0000;
}
.avidité{
Couleur: # 33FF00;
}
</ style>
</ head>
<body>
1. Méthode de tri personnalisée
<br>
2.Edit
<br>
3. Faites glisser et traîner
<br>
4. Pagination
<br>
5. Sélection linéaire à choix multiple à choix unique (CTRL) (Shift)
<br>
6. Le rendu de texte doit colorer le texte, par exemple, supérieur à 0, rouge ou moins de 0, vert
<br>
7. Masquer l'affichage de la colonne
<br>
8. Groupement
<br>
<div id = 'démo' class = 'Demo'> </div>
<br> <br> Les éléments suivants sont regroupés et il existe une méthode de tri personnalisée qui est bonne, généralement pauvre <br> <br>
<div id = 'Demo1' class = 'Demo'> </div>
<script type = "text / javascript">
(fonction (doc, indéfini) {
var win = this;
win.sys = fonction (ua) {
var b = {
ie: /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)
}, vmark = "";
pour (var i en b) {
if (b [i]) {vmark = "safari" == i? "Version": i; 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;
retour b;
} (win.navigator.useragent.tolowercase ());
win.sys.ie6 && doc.execcommand ("backgroundImageCache", false, true);
win. $$ = fonction (id) {
RETOUR TYPE OF ID === 'String'
? doc.getElementByid (id)
: identifiant;
};
win. $ q = fonction (nom, parent) {
return parent.getElementsByTagName (name);
}
win. $ c = fonction (nom, parent) {
var elem = typeof name === 'objet'? Nom: doc.CreateElement (nom);
parent && parent.appendChild (elem);
retour elem;
};
win.addListener = fonction (élément, e, fn) {
! element.events && (élément.events = {});
element.events [e] && (élément.events [e] [addListener.guid ++] = fn) || (élément.events [e] = {'0': fn});
element.addeventListener? element.addeventListener (e, fn, false): element.attachevent ("on" + e, fn);
};
win.addListener.guid = 1;
win.removeListener = fonction (élément, e, fn) {
Var Handlers = element.Events [E], type;
if (fn) {
pour (tapez dans 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 dans les gestionnaires) {
element.reMoveEventListener? Element.RemoveEventListener (E, Handlers [Type], False): element.Detachevent ("ON" + E, Handlers [Type]);
supprimer les gestionnaires [type];
}
}
};
win.fireevent = fonction (élément, eventname) {
if (element [EventName]) {
element [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 (elems, style, valeur) {
if (! elems.length) elems = [elems];
if (typeof style == "String") {
style = valeur === Undefined? {csstext: style} :( function (o) {
return (o [style] = valeur, o);
}) ({});
};
chacun (elems, fonction (i, elem, style) {
VAR VALE, NOM, IE = SYS.IE;
pour (nom dans le style) {
value = style [name];
if (name === "Opacité" && ie) {
elem.style.filter = (elem.currentStyle.filter || "") .replace (/ alpha / ([^)] * /) /, "") + "alpha (opacité =" + valeur * 100 + ")";
} else if (name === "float") {
elem.style [c'est-à-dire? "stylefloat": "cssfloat"] = valeur;
}autre{
name = name.replace (/ - ([az]) / ig, fonction (all, lettre) {
Return Letter.ToupperCase ();
});
elem.style [name] = valeur;
}
}
}, style);
};
win.setattr = fonction (dom, att) {
if (typeof att! == 'objet')
retour;
pour (nom var dans att)
dom.setAttribute (nom, att [name]);
}
var slice = array.prototype.slice;
win.bind = fonction (objet, amusant) {
var args = Slice.Call (arguments) .slice (2);
return function () {
return fun.apply (objet, args);
};
};
win.bindaseventListener = fonction (objet, amusant, args) {
var args = Slice.Call (arguments) .slice (2);
return function (event) {
return fun.apply (objet, [événement || win.event] .concat (args));
}
};
win.Extend = function () {
var cible = arguments [0] || {}, i = 1, longueur = arguments.length, deep = true, options;
if (typeof cible === "booléen") {
Deep = Target;
Target = arguments [1] || {};
i = 2;
}
if (typeof Target! == "Object" && object.prototype.tostring.call (cible)! = "[Fonction objet]")
Target = {};
pour (; i <length; i ++) {
if ((options = arguments [i])! = null)
pour (nom var dans les options) {
var src = cible [name], copy = options [name];
if (cible === copie)
continuer;
if (deep && copy && typeof copy === "objet" &&! copy.nodeType) {
cible [name] = arguments.callee (Deep, src || (copy.length! = null? []: {}), copy);
}
sinon si (copie! == Undefined)
Target [name] = copy;
}
}
cible de retour;
};
win.class = fonction (propriétés) {
var _class = function () {
return (arguments [0]! == null && this.inialize && typeof (this.inialize) == 'function')
? this.Initialize.apply (ceci, arguments)
: ce;
};
_class.prototype = propriétés;
return _class;
};
win.each = fonction (objet, rappel, args) {
var name, i = 0, longueur = object.length;
if (args) {
args = array.prototype.slice.call (arguments) .slice (2);
if (longueur === Undefined) {
pour (nom dans l'objet)
if (callback.apply (objet [nom], [nom, objet [name]]. Concat (args)) === false)
casser;
} autre
pour (; i <durée; i ++)
if (callback.Apply (objet [i], [i, objet [i]]. Concat (args)) === false) //
casser;
} autre {
if (longueur === Undefined) {
pour (nom dans l'objet)
if (callback.call (objet [nom], nom, objet [name]) === false)
casser;
} autre
pour (var valeur = objet [0];
i <longueur && callback.call (valeur, i, valeur)! == false; valeur = objet [++ i]) {}
}
retour objet;
};
win.currentStyle = fonction (élément) {
return element.currentStyle || doc.defaultView.getCompuledStyle (élément, null);
};
win.objpos = fonction (elem) {
var gauche = 0, top = 0, droit = 0, en 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; en bas = top + elem.offsetheight;
} autre {
var rect = elem.getBoundingClientRect ();
Left = droite = doc.DocumentElement.Scrollleft || doc.body.scrollleft;
top = inférieur = doc.documentElement.scrollleft || doc.body.scrollleft;
gauche + = rect.left; droit + = rect.Right;
top + = rect.top; inférieur + = rect.bottom;
}
return {"gauche": gauche, "haut": haut, "droite": droite, "inférieur": en bas};
};
win.contains = fonction (k, j) {
Retour document.comparedocumentPosition
? K.Ch .pareDocumentPosition (J) & 16
: k! == J && k.contains (j);
};
win.hasclass = fonction (élément, className) {
return element.classname.match (new regexp ('(// s | ^)' + classname + '(// s | $)'));
};
win.addclass = function (élément, className) {
if (! win.hasclass (élément, classNname))
element.classname.replace (// s / g, '') === ''
? element.classname = className
: element.classname + = "" + className;
};
win.RemoveClass = fonction (élément, className) {
win.hasclass (élément, className) && (élément.classname = element.classname.replace (new regexp ('(// s * | ^)' + classname + '(// s * | $)'), ''));
}
})(document);
(fonction (doc, indéfini) {
var win = ceci,
UUID = -1;
/ *
Vérifiez s'il y a une clé dans la chaîne
S'il y a et que la clé est suivie de - Retour - quelque chose par la suite, autrement, renvoyez True
Aucune détection ne renvoie faux
* /
fonction Checkreg (str, key) {
var reg = new regexp ('(?: ^ | // s)' + key + '// b-? (. *?) (?: // s | $)', 'i');
if (reg.exec (str)! = null) {
Retour regexp. 1 $ === ''? Vrai: Regexp. 1 $;
}autre{
retourne false;
}
};
/ *
Modifier la valeur correspondant à la clé de la chaîne
* /
Fonction Modify (str, key, valeur) {
var reg = new regexp ('(^ | // s) (' + key + '// b -). *? (// s | $)', 'i');
return str.replace (reg, '1 $ 2' + valeur + '3 $');
};
win.easygrid = new class ({{
Options: {
Perfaut: 10,
currPage: 0,
total page: 0,
Compter: 10,
Page: 0,
iSedit: faux,
widthConfig: {
TD: NULL,
prevtd: null,
x: 0,
tdwidth: 0,
prevwidth: 0
},
CellMinwidth: 50,
sortType: {
int: function (v) {return parseInt (v)},
float: function (v) {return parsefloat (v)},
Date: fonction (v) {return v.toString ()},
String: fonction (v) {return v.toString ()}
},
Titre: «Titre»
},
initialiser: fonction (options) {
var op = extend (true, {}, this.options),
options = this.defaults = extension (op, options),
contener = this.continer = $ c ('div', options.Container),
dataconfig = options.dataconfig,
title = $ c ('div', conteneur);
contener.classname = 'conteneur';
title.innerhtml = options.Title;
title.classname = 'title';
this.primaryKey = options.primaryKey;
this.top = $ c ('div', conteneur);
this.top.classname = 'bar';
this.top.innerhtml = '<div> <a href = "javascript:;" page = "start"> </a> <a href = "javascript:;" page = "next"> </a> <div> <div> <input type = "text" /> </div> <div> </div> <a href = "javascript:;" page = "pre"> </a> <a href = "javascript:;" page = "end"> </a> <v> <a href = "javascript:;" go = "go"> Jump </a> <a href = "javascript:;" del="del">Delete</a><div>The current page has a total of one page, and one piece of data, a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of des données, et un total d'une seule données, et un total d'une seule pièce de données, et un total d'une seule pièce de données, et un total d'une seule pièce de données, et un total d'un morceau de données, et un total d'un élément de données, et un total d'un morceau de données, et un total de données, et un total de données, et un total de données, et un total de données, et un total de données, et un total d'un total de données, et d'un total de données, et d'un total de données, et d'un total de données, et d'un total de données, et d'un total de données, et d'un total de données, et d'un total de données les données, et un total de données, et un total de données,
var tabContainer = this.tabContainer = $ c ('div', conteneur);
this.bottom = $ c (this.top.clonenode (true), conteneur);
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", cellpacing: "0", bordure: "0"});
this.tead = $ c ('tête', tableau);
this.tbody = $ c ('tbody', table);
this.tbody.style.display = 'Aucun';
//chargement
this.loading_bg = $ c ('div', conteneur);
this.loading_bg.classname = 'chargement';
setStyle (this.loading_bg, {
largeur: conteneur.offsetwidth + 2 + 'px',
hauteur: conteneur.offsetheight + 2 + 'px'
});
this.loading = $ c ('div', conteneur);
this.loading.classname = 'loadDiv'
setStyle (this.loading, {
gauche: (conteneur.offsetwidth / 2-45) + 'px',
en haut: (conteneur.offsetheight / 2-14) + 'px'
});
this.loading.innerhtml = '<div> chargement ... </div>';
// Combien de colonnes y a-t-il dans le tableau
this.colCount = options.fields.length;
// Le formulaire de source de données est [[], [], [], [], []]
this.data = [];
// Tous les formulaires d'en-tête de regroupement dans la source de données actuellement demandée sont [Trdom1, Trdom2]
this.grouphead = [];
// Enregistrez le tr [tr1, tr2, tr3] du groupe qui a été inséré dans la table
this.inserttrs = [];
// Index de colonne
// Form [[TD11, TD12, TD13, TD14], [TD21, TD22, TD23, TD24]]
this.columns = [];
// vrai signifie ordre positif faux signifie ordre inversé
this.ascSort = true;
// Enregistrer quelle colonne trie l'en-tête TD
this.sortColumn = '';
// Toutes les lignes de TR s'il n'y a pas de formulaire de regroupement [TR1, TR2, TR3, TR4]
// s'il y a un regroupement [[TR1, TR2, TR3, TR4], [TR5, TR6, TR7, TR8]]
this.Rows = [];
// Menu de niveau 1
this.popMenu = $ c ('div', doc.body);
this.popmenu.classname = 'x-menu';
this.popmenu.innerhtml = '<ul> <li> <a href = "javascript:;" menutype = "asc"> asc </a> </li> <li> <a href = "javascript:;" menutype = "desc"> vers le bas </a> </li> <li> <a href = "javascript:;" menutype = "colonnes"> toutes les colonnes </a> </li> </ul> ';
// Créer un sous-menu
this.subpopMenu = $ c ('div', doc.body);
this.subpopMenu.classname = 'SubMenu';
// si la couche pop-up de premier niveau de l'en-tête de table est ouverte. S'il est ouvert, enregistrez le TD
this.ismenuopen = false;
// Enregistrez si une colonne dans toutes les colonnes s'affiche ou num caché comme compteur pour voir combien de colonnes y a-t-il.
// Format ferme: [true, false, true, true] La colonne 1,3,4 montre la deuxième colonne cachée
this.isshowtrs = {
Num: 0,
CLOR: []
};
// Créez la ligne de base affichée lors de la traînée
this.line = $ c ('div', doc.body);
this.line.classname = 'line';
// Enregistrer la ligne
// Les quantités incrémentielles d'attribut UUID sont telles que {1: Dom, 2: Dom}
this.selectedrows = {};
// Enregistrer la dernière ligne sélectionnée
this.LastSelectrow = {dom: null, index: null};
this.currenteditrow = {index: 0, dom: null};
this.editData = [];
this.EditForm = $ c ('div', tabContainer) ;;
setStyle (this.editform, {
Position: «absolu»,
Affichage: «Aucun»,
«Z-index»: «120»
});
this.edittable = $ c ('table', this.editform);
setAttr (this.edittable, {
Platation: «0»,
Cellpadding: '0',
Border: '0'
});
var btnc = $ c ('div', this.editform);
btnc.classname = 'editbtn';
btnc.style.textalign = 'Centre';
btnc.Innerhtml = '<div> <a do = "soumider" href = "javaScript :;"> soumettre </a> <a do = "annuler" href = "javaScript :;"> annuler </a> </ div>';
this.edittable.classname = 'edittable';
var etr = $ c ('tr', $ c ('tbody', this.edittable));
// Créez une copie de TR car le nœud peut être copié directement lorsque TR est généré ultérieurement
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.head),
Twidth = 0,
self = ceci,
ul = $ c ('ul', this.subpopmenu),
li;
chacun (options.Fields, fonction (i, o) {
var td = $ c ('td', the-thert),
largeur = o.width? O.Width: '80 ',
div = i === 0? '<div>': '<div> <p> </p>';
td.innerhtml = [div, '<span>', o.name, '</span> <a href = "javascript :;"> </a> </div>']. join ('');
setAttr (td, {Clos: i, largeur: largeur, non sélectable: 'on', 'class': o.type === Undefined? '': 'type -' + o.type});
self.CreateInput (i, o, etr);
Twidth = Twidth + (~~ largeur);
li = $ c ('li', ul);
li.innerhtml = [
'<a href = "javascript:;" > <input type = "checkbox" checked = "true" cols = "',
je,
'"/>',
O.name,
'</a>'
].rejoindre('');
// Créez le premier élément de chaque colonne de l'index de colonne
self.columns [i] = [td];
$ c ('td', self.copytr) .setAttribute ('non sélectable', 'on');
// Calculez l'indice de colonne et le nombre total de colonnes num
self.isshowtrs.num ++;
self.isshowtrs.clos [i] = true;
});
setAttr (this.table, {width: twidth + options.fields.length + 1})
// Générer le TR dans le TBODY Génére de TR en fonction de Perpage. Il s'agit d'un élément de configuration qui montre le nombre de données actuellement disponibles.
var i = 0,
trslen = options.perpage,
frag = doc.createdocumentfragment (),
arr = nouveau tableau (options.fields.length),
tr,
TDS;
pour (; i <trrslen; 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 === 'objet') {
setTimeout (function () {self.getDatacallback (dataConfig);}, 5);
}autre{
}
/ *
Faire glisser la table
Tri de table
Attendez certaines opérations
* /
addListener (this.tread, 'click', bindaseventListener (this, this.sortable));
AddListener (this.tead, 'MouseOver', bindAsEventListener (this, this.teadover));
addListener (this.tead, 'muouseout', bindaseventListener (this, this.teadout));
AddListener (this.tead, 'Mousedown', bindaseventListener (this, this.dragwidth));
/ *
Lier les événements de clic de calque pop-up pour le tri
Menu de niveau 2 reliant pour masquer la colonne
* /
addListener (this.popMenu, 'click', bindaseventListener (this, this.menuclick));
AddListener (this.popMenu, 'Mouseover', bindaseventListener (this, this.menuover));
addListener (this.subpopMenu, 'click', bindaseventListener (this, this.subMenUclick));
/ *
Mettez les rangées de table et devenez plus épais
* /
AddListener (this.tbody, 'MousMove', bindaseventListener (this, this.rowhighlight, true));
addListener (this.tbody, 'muouseout', 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 (data) {
Var Options = this.defaults,
self = ceci,
totla = 0;
this.data.length = 0;
if (data.data) {
if (data.data [0] .groupName) {
var Grouphead = this.grouphead;
Grouphead.length = 0;
chaque (data.data, fonction (i, o) {
var gtr = self.grouptr.clonenode (true);
$ q ('td', gtr) [0] .InnerHtml = o.groupname;
Grouphead.push (GTR);
chaque (o.Rows, fonction (j, d) {
// Le dernier élément de données dans ce.data est index
d.push (i);
self.data.push (d);
});
});
this.showGroup = true;
}autre{
chaque (data.data, fonction (i, o) {
self.data.push (o);
});
this.showGroup = false;
}
}autre{
retour;
}
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) {
if (this.data.length === 0) {
this.tbody.style.display = 'Aucun';
retour;
}
var i = 0,
J = 0,
self = ceci,
data = this.data,
Options = this.defaults,
trslen = options.perpage,
tdslen = options.fields.length,
tbody = this.tbody,
trs = tbody.getElementsByTagName ('tr'),
start = pagenum * options.perpage,
tr;
this.Rows.length = 0;
if (this.showgroup) {
var groupe = {},
Indice,
arr = [],
inserttrs = this.inserttrs;
// effacer le groupe TR précédemment inséré
inserttrs.length! = 0 && chacun (inserttrs, fonction (i, o) {
self.tbody.removechild (o);
});
insertTrs.Length = 0;
// transférer les données de remplissage vers ce.Rows
var num = - 1;
pour (; i <trrslen; i ++) {
tr = trs [i];
// s'il n'y a pas de données, commencez à cacher les lignes restantes
if (! data [i + start]) {
tr.style.display = 'Aucun';
continuer;
}
// Faire le tag TR quelles données dans les données correspondent à
tr.setAttribute ('dataindex', i + start);
tr.style.display = 'bloc';
tds = tr.getElementsByTagName ('td');
// x est l'identification de différents groupes de groupes dans le groupe
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
// Si c'est le même groupe, ajoutez la dernière colonne de ceci.Rows
// Créer une colonne qui n'est pas le même groupe
num == x
? this.Rows [this.Rows.length-1] .push (tr)
: (this.Rows [this.Rows.length] = [tr], num = x);
// Utilisez le tableau Arr pour se souvenir de la position du premier TR de chaque groupe car l'en-tête TR I est inséré plus tard à la position Num est le numéro de séquence du groupe.
! (num in groupe) && (groupe [num] = i + start, arr.push ([num, i]));
pour (j = 0; j <tdslen; j ++) {
td = tds [j];
var txt = data [i + start] [j] === ''? '': data [i + start] [j];
render = options.fields [j] .render;
td.innerhtml = rendu
? Render (txt)
:SMS;
}
tr.style.display = '';
}
chaque (arr.reverse (), fonction (i, o) {
inserttrs.push (self.grouphead [o [0]]);
self.tbody.insertbefore (self.grouphead [o [0]], trs [o [1]]);
});
}autre{
pour (; i <trrslen; i ++) {
tr = trs [i];
// Faire le tag TR quelles données dans les données correspondent à
tr.setAttribute ('dataindex', i + start);
this.Rows.push (tr);
// masquer le TR sans données
if (! data [i + start]) {
tr.style.display = 'Aucun';
continuer;
}
tr.style.display = '';
tds = $ q ('td', tr);
pour (j = 0; j <tdslen; j ++) {
var txt = data [i + start] [j] === ''? '': data [i + start] [j];
render = options.fields [j] .render;
tds [j] .innerhtml = rendu
? 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');
if (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 = 'Aucun';
},
Écriture d'écriture: fonction (total) {
Var Options = this.defaults,
base = total / options.perpage,
topspans = this.top.getElementsByTagName ('span'),
BasingSpans = this.bottom.getElementsByTagName ('span');
options.totalpage = base> parseInt (base)
? PARSEINT (BASE) +1
: base;
bas inférieur [0] .InnerHtml = topspans [0] .InnerHtml = ~~ Options.currPage + 1;
bas inférieur [1] .InnerHtml = topspans [1] .InnerHtml = options.totalpage;
bas inférieur [2] .InnerHtml = topspans [2] .InnerHtml = options.perpage;
BasingSpans [3] .InnerHtml = topspans [3] .InnerHtml = total;
},
sortable: fonction (e) {
var elem = e.target || e.srcelement,
self = ceci,
Options = this.defaults,
eleMmame = elem.NodeName.tolowerCase (),
showGroup = this.showgroup,
tdelem = elem,
name = elemmame;
// cliquez peut être déclenché lors du glisser. La raison en est que tous les codes sous IE sont liés à ceci.Table. Voir glisser-déposer.
if ($ q ('td', elem) .length> 1)
retour;
if (name! == 'td') {
while (name! == 'td') {
tdelem = tdelem.parentNode;
name = tdelem.nodename.tolowercase ();
}
}
var issort = checkreg (tdelem.classname, 'srier'),
Type = Checkreg (tdelem.classname, «type»)
//Trier
if (eleMmame! == 'a' && type) {
var fragment = doc.CreateDocumentFragment ();
if (this.sortColumn! == Tdelem && this.sortColumn! == '') {
RemoveClass (this.sortColumn, 'sort-asc');
RemoveClass (this.sortColumn, 'sort-desc');
}
if (issort) {
// Il y a des groupements, chaque groupe sera inversé séparément et non regroupé, et sera inversé directement.
groupe de spectacle
? chacun (this.Rows, fonction (i, o) {o.reverse ();})
: this.Rows.reverse ();
tdelem.classname = modifier (tdelem.classname, 'srie', issort === 'asc'? 'desc': 'asc');
}autre{
groupe de spectacle
? chacun (this.Rows, fonction (i, o) {
O.Sort (self.Compare (tdelem.getAttribute ('CLOR'), type));
})
: this.rows.sort (this.compare (tdelem.getAttribute ('clos'), type));
// S'il est trié dans un ordre positif, ajoutez le drapeau de l'ordre positif.
if (this.ascSort) {
addClass (tdelem, 'sort-asc');
}autre{
// Le tri inverse inversera le tri d'origine et ajoutera le drapeau de tri
groupe de spectacle
? chacun (this.Rows, fonction (i, o) {o.reverse ();})
: this.Rows.reverse ();
addClass (tdelem, 'sort-desc');
}
}
// Rendez les données triées à un tableau
var inserttrs = this.inserttrs,
len = inserttrs.length-1,
arr = [];
chacun (this.Rows, fonction (i, tr) {
arr = [inserttrs [Len-i]]. Concat (tr);
groupe de spectacle
? chaque (arr, fonction (idx, obj) {frag.appendChild (obj);})
: frag.ApendChild (tr);
});
this.tbody.appendChild (frag);
this.sortColumn = tdelem;
}
// -------------------------------------------------------------------------------------
/ *
Si vous cliquez sur la balise A dans l'en-tête, un menu apparaîtra
* /
if (eleMmame === 'a') {
/ *
Lorsque vous cliquez en dehors du menu, modifiez la fonction exécutée
Utilisé pour effacer le calque caché de l'événement de clic du document pour supprimer le style de TD et un
* /
fonction documentClick () {
self.popmenu.style.display = 'Aucun';
self.subpopmenu.style.display = 'Aucun';
if (self.ismenuopen) {
removeListener (document, 'click');
RemoveClass ($ q ('div', self.ismenuopen) [0], 'tête de tête');
$ q ('a', self.ismenuopen) [0] .style.display = 'Aucun';
}
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 ce.ismenuopen est vrai, la couche est ouverte et l'exécution du traitement lié à la ferme est effectuée.
this.ismenUopen && documentClick ();
if (! checkreg (td.classname, 'type')) {
addClass (lis [0], «handicap»);
addClass (lis [1], «handicap»);
}autre{
RemoveClass (lis [0], «Disabled»);
RemoveClass (lis [1], «handicap»);
}
Sys.ie
? e.cancelbubble = true
: e.stoppropagation ();
// Lors de l'affichage de la couche, le TD est attaché à ceci.
this.ismenuopen = td;
addListener (document, 'click', documentClick);
setStyle (this.popmenu, {
Gauche: gauche + 'PX',
TOP: TOP + 'PX',
Affichage: «Block»
});
}
},
comparer: fonction (n, type) {
var sortType = this.defaults.sortType,
txt =Sys.ie?'innerText':'textContent';
!sortType[type]&&(type = 'string');
return function(a1,a2){
a1 = sortType[type](a1.cells[n][txt]);
a2 = sortType[type](a2.cells[n][txt]);
return a1==a2?0:a1<a2?1:-1;
}
},
pageBarClick : function(e){
varelem = e.target || e.srcElement,
options = this.defaults,
typePage = elem.getAttribute('page'),
isGo = elem.getAttribute('go');
isDel = elem.getAttribute('del');
if(typePage){
var number = {
start : 0,
end : options.totalPage-1,
next : options.currPage-1,
pre : options.currPage+1
}[typePage];
this.toPage(number);
}
if(isDel){
this.del();
}
if(isGo){
var number = ~~elem.parentNode.getElementsByTagName('input')[0].value-1;
this.toPage(number);
}
},
toPage : function(num){
if(typeof num !=='number'||isNaN(num))return;
var options = this.defaults,
self = this,
dataConfig = options.dataConfig;
//如果请求的分页数小于0就默认为0 如果打越最大分页数就默认为最大分页数
num>=options.totalPage
&&(num = options.totalPage-1);
num<0&&(num = 0);
//s为当前面板的第一页e为当前面板的最后
var basePage = options.count/options.perPage,
s = options.page*basePage,
e = s + basePage-1;
this.tbody.style.display = 'none';
this.loading_bg.style.display = '';;
this.loading.style.display = '';
setTimeout(function(){self.buildTbody(num);},10);
},
del : function(){
//做删除的时候需要有主键的索引我全部保存在tr的
var selectedRows = this.selectedRows,
arr = []
for(var name in selectedRows){
arr.push(selectedRows[name].getAttribute('dataIndex'));
}
alert('选择了主键值为'+arr.join(','));
},
theadOver : function(e){
var elem = e.target || e.srcelement;
if(elem.nodeName.toLowerCase() === 'div'){
$q('a',elem)[0].style.display = 'block';
addClass(elem,'theadfocus');
}
},
theadOut : function(e){
var elem = e.target || e.srcElement,
toElem = e.toElement||e.relatedTarget,
elemName = elem.nodeName.toLowerCase();
if(this.isMenuOpen && contains(this.isMenuOpen,elem))
retour;
//如果离开了当前的td 隐藏显示出来的东西
if(elemName === 'div'&& elem !== this.isMenuOpen){
if(!contains(elem,toElem)){
$q('a',elem)[0].style.display = 'none';
removeClass(elem,'theadfocus');
}
}
if(elemName === 'a' || elemName ==='span' || elemName === 'p'){
var parent = elem.parentNode;
if(!contains(elem,toElem)){
$q('a',parent)[0].style.display = 'none';
removeClass(parent,'theadfocus');
}
}
},
menuClick : function(e){
var elem = e.target || e.srcElement,
className = this.isMenuOpen.className;
if(elem.nodeName.toLowerCase()==='a'){
//如果td的样式中不存在type 也就是说不需要排序则不进行排序阻止事件冒泡
if(!checkReg(className,'type')){
Sys.ie
? e.cancelBubble = true
: e.stopPropagation();
retour;
}
//如果a标签的menuType
var menuOp = elem.getAttribute('menuType'),
sortOrder = checkReg(className,'sort');
//选择所有列不进行排序
if(menuOp==='columns')
retour;
/ *
如果没有排序就根据menuOp来进行排序
如果已排序且与menuOp排序方式不同则进行排序
* /
if(sortOrder){
if(menuOp != sortOrder){
var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
fireEvent(td,'click');
}
}autre{
this.ascSort = {
desc : false,
asc : true
}[menuOp];
var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
fireEvent(td,'click');
}
//完成上面的操作后设置成正序因为之后点别的列默认还是按正序列来排
this.ascSort = true;
}
},
menuOver : function(e){
var elem = e.target || e.srcelement;
if(elem.nodeName.toLowerCase()==='a'&&elem.getAttribute('menuType')==='columns'){
var pos = objPos(elem),
left = pos.left+Math.max(document.documentElement.scrollLeft,document.documentElement.scrollLeft) + elem.offsetWidth,
top = pos.top+Math.max(document.documentElement.scrollTop,document.documentElement.scrollTop);
setStyle(this.subPopMenu,{left:left+'px',top:top+'px',display:'block'});
}
},
subMenuClick : function(e){
var elem = e.target || e.srcElement,
isA = elem.nodeName.toLowerCase() === 'a';
Sys.ie
? e.cancelBubble = true
: e.stopPropagation();
if(isA||elem.nodeName.toLowerCase() === 'input'){
var input = isA
? $q('input',elem.parentNode)[0]
: elem,
clos = input.getAttribute('cols'),
self = this;
isA
&&(input.checked = (!input.checked));
var checked = input.checked,
hideOrShow = checked ? '' : 'aucun';
//如果还剩一列并且这次是取消选中的
//则不执行隐藏
if(this.isShowTrs.num===1&&!checked){
input.checked = true;
return false;
}
À carreaux
?(this.isShowTrs.num++,this.isShowTrs.clos[clos]=true)
:(this.isShowTrs.num--,this.isShowTrs.clos[clos]=false);
//如果实现了分组还必须把组tr的colSpan属性改变
this.showGroup
&&each(this.insertTrs,function(i,tr){
$q('td',tr)[0].setAttribute('colSpan',self.isShowTrs.num);
});
//显示或隐藏选中列
each(this.columns[clos],function(i,o){
o.style.display = hideOrShow;
});
var width = ~~this.columns[clos][0].getAttribute('width');
setTimeout(function(){
À carreaux
? self.table.setAttribute('width',~~self.table.getAttribute('width') + width)
: self.table.setAttribute('width',~~self.table.getAttribute('width') - width)
},0);
}
},
rowHighlight : function(e,isHight){
var elem = e.target || e.srcElement,
toElem = e.toElement||e.relatedTarget,
parent = elem.parentNode;
Sys.ie
? e.cancelBubble = true
: e.stopPropagation();
while(parent.nodeName.toLowerCase()!='tr'){
parent = parent.parentNode;
}
if(isHight&&hasClass(parent,'rowfocus'))
retour;
//如果是分组的行tr 就返回
if(elem.nodeName.toLowerCase()==='td'&&parent.getAttribute('g')==='y')
retour;
isHight
? addClass(parent,'rowfocus')
: removeClass(parent,'rowfocus');
},
selectRow : function(e){
var elem = e.target || e.srcelement;
if(elem.getAttribute('g')||elem.parentNode.getAttribute('g'))
retour;
varself = this,
selectedRows = this.selectedRows,
lastSelectRow = this.lastSelectRow,
cellClick = false,
ctrlClick = false,
shiftClick = false;
if(elem.nodeName.toLowerCase() === 'td' ){
var parent = elem.parentNode,
className = parent.className,
options = this.defaults;
//按ctrl进行选择
if(e.ctrlKey===true){
index = checkReg(className,'select');
//选中那行的如果已经选中了就取消选中并且删除样式
//从this.selectedRows 中删除设置lastSelectRow={dom:null,index:null
if(hasClass(parent,'trfocus')){
if(index){
delete selectedRows[index];
removeClass(parent,'select-'+index);
removeClass(parent,'trfocus');
lastSelectRow.dom = lastSelectRow.index = null;
}
ctrlClick = false;
}autre{
selectedRows[++uuid] = parent;
addClass(parent,'trfocus ');
addClass(parent,'select-'+uuid);
ctrlClick = true;
}
}
//按住shift进行选择
if(e.shiftKey===true){
var lastDom;
if(lastSelectRow.dom===null){
shiftClick=true;
selectedRows[++uuid] = parent;
addClass(parent,'trfocus ');
addClass(parent,'select-'+uuid);
}autre{
var allRows = [];
//如果有分组个并所有的tr到一个数组
this.showGroup
? each(this.rows, function(i, o){
allRows = allRows.concat(o);
})
: allRows = this.rows;
each(allRows,function(i,o){
if(parent===o){
lastDom = {dom:o,index:i}
return false;
}
});
//清空掉之前所有选中tr的样式
each(selectedRows,function(i,o){
removeClass(o,'trfocus');
removeClass(o,'select-'+i);
delete selectedRows[i];
});
var len = Math.max(lastSelectRow.index,lastDom.index);
for(var i = Math.min(lastSelectRow.index,lastDom.index);i<=len;i++){
selectedRows[++uuid] = allRows[i];
addClass(allRows[i],'trfocus ');
addClass(allRows[i],'select-'+uuid);
}
}
}
//进行单选
if(e.ctrlKey===false&&e.shiftKey===false){
each(selectedRows,function(i,o){
removeClass(o,'trfocus');
removeClass(o,'select-'+i);
delete selectedRows[i];
});
selectedRows[++uuid] = parent;
addClass(parent,'trfocus');
addClass(parent,'select-'+uuid);
if(parent != lastSelectRow.dom)
cellClick=true;
}
// 点击后记录最后点击的行。
if(ctrlClick||cellClick||shiftClick){
var allRows = [];
//如果有分组个并所有的tr到一个数组
this.showGroup
? each(this.rows, function(i, o){allRows = allRows.concat(o);})
: allRows = this.rows;
//寻找parent的索引
each(allRows,function(i,o){
if(o===parent){
self.lastSelectRow.dom = o;
self.lastSelectRow.index = i;
return false;
}
});
}
}
},
dragWidth : function(e){
var elem = e.target || e.srcelement;
if(elem.nodeName.toLowerCase() === "p"){
/ *
遍历当前选中的列的前面所有的列
如果没有或全部是隐藏的则返回
* /
for(var i=parseInt(elem.parentNode.parentNode.getAttribute('clos'))-1;i>=0;i--)
if(this.isShowTrs.clos[i]===true)break;
if(i<0)
retour;
var options = this.defaults,
self = this,
widthConfig = options.widthConfig,
td = elem.parentNode.parentNode;
widthConfig.x = e.clientX;
widthConfig.td = td;
Sys.ie
? this.table.setCapture(false)
: e.preventDefault();
widthConfig.prevTd = this.columns[i][0];
widthConfig.tdWidth = ~~td.width;
widthConfig.prevWidth = ~~widthConfig.prevTd.width;
var height = Math.min(this.tabContainer.offsetHeight,this.table.offsetHeight),
scrollHeight = this.tabContainer.offsetHeight>=this.table.offsetHeight?0:18,
documentScrollLeft = doc.body.scrollLeft;
setStyle(this.line,{
left : e.clientX + doc.documentElement.scrollLeft + 'px',
height : height-scrollHeight +"px",
top : objPos(this.tabContainer).top+Math.max(document.documentElement.scrollTop,document.documentElement.scrollTop)+2+'px'
});
addListener(doc,'mousemove',bindAsEventListener(this,this.widthMove));
addListener(doc,'mouseup',bindAsEventListener(this,this.widthUp));
}
},
widthMove : function(e){
win.getSelection
? win.getSelection().removeAllRanges()
: doc.selection.empty();
var options = this.defaults,
widthConfig = options.widthConfig,
left = e.clientX,
clientX = left,
cellMinWidth = options.cellMinWidth;
if(clientX>widthConfig.x&&e.clientX - widthConfig.x>widthConfig.tdWidth-cellMinWidth){
left = widthConfig.x +widthConfig.tdWidth -cellMinWidth;
}
if(clientX<widthConfig.x&&widthConfig.x-clientX>widthConfig.prevWidth-cellMinWidth){
left = widthConfig.x - widthConfig.prevWidth +cellMinWidth;
}
setStyle(this.line,{
left : left + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft)+"px",
display : "block"
});
},
widthUp : function(e){
this.line.style.display = 'none';
var widthConfig = this.defaults.widthConfig,
x = parseInt(this.line.style.left)- Math.max(doc.documentElement.scrollLeft,doc.body.scrollLeft) - widthConfig.x ;
widthConfig.prevTd.width = ~~widthConfig.prevWidth + x ;
widthConfig.td.width = ~~widthConfig.tdWidth -x;
Sys.ie && this.table.releaseCapture();
removeListener(doc,'mousemove');
removeListener(doc,'mouseup');
},
createInput : function(i,obj, parent){
var etd = $c('td',parent),
input = $c('input',etd),
type = obj.edit;
etd.width = obj.width
input.type = 'text';
input.setAttribute('index',i);
!taper
&&input.setAttribute('readonly','readonly')
etd.appendChild(input);
input.className ='x-form-text i_a';
setStyle(input,{
width : obj.width - 1 +'px',
background : 'white'
});
},
editRow : function(e){
var elem = e.target || e.srcElement,
self = this,
options = this.defaults,
nodeName = elem.nodeName.toLowerCase();
if(nodeName!=='td'){
while(elem.nodeName.toLowerCase()!=='td'){
elem = elem.parentNode;
}
}
var tr = elem.parentNode;
this.currentEditRow.index = tr.getAttribute('dataindex');
this.currentEditRow.dom = tr;
if(tr.getAttribute('g'))
retour;
var sTop = ~~this.tabContainer.scrollTop,
sLeft = ~~this.tabContainer.scrollLeft,
cTds = $q('td',tr);
pTds = $q('td',$q('tr',this.editTable)[0]),
txt = Sys.ie?'innerText':'textContent';
setStyle(this.editForm,{
top : tr.offsetTop + 'px',
left : tr.offsetLeft + 'px',
afficher : ''
});
each(cTds,function(i,td){
$q('input',pTds[i])[0].value = td[txt];
});
},
modifyTr : function(e){
var elem = e.target || e.srcelement;
if(elem.nodeName.toLowerCase()==='a'){
var tds = $q('td',this.editTable),
txt = txt =Sys.ie?'innerText':'textContent',
isC = false;
if(elem.getAttribute('do')==='submit'){
alert('索引为'+this.currentEditRow.index)
}
this.editForm.style.display = 'none';
}
}
});
})(document);
window.onload = function(){
var data ={
//total:'55',
données : []
}
var s='阿斯达三大散打三个而个呃奋斗个我是地方我师父威尔地方威尔威尔威尔豆腐干沃尔与体育56 范甘迪威尔请问额请问散阿萨德b你吗吗吗阿斯zweas dqwesdf 阿凡达散打有人6 斯蒂芬与',
b = ['人民币','欧元','美元'],
n = ['张三','李四','王五','赵六','陈七','猪八']
each(new Array(3000),function(i,o){
data.data.push([i+1,n[i%5]+i,(i%3===0?'-':'')+parseInt(Math.random()*1000),b[i%2],'1984-05-27',s.substring(Math.random()*10,Math.random()*10+15)])
});
data5 = {
total: 11,
données : [
{
groupName : '平安银行',
rows : [
[1,'平安银行一张同-账单','-29792.66','日元','1928-06-15','一般'],
[2,'平安银行信用卡-账单','26268.99','欧元','1950-04-14','一般'],
[3,'平安银行基金-账单','-84149.12','英磅','1927-05-08','一般'],
[4,'平安银行信用卡-账单','23782.40','欧元','1995-01-05','一般'],
[5,'平安银行国债-账单','-48355.53','人民币','1953-07-01','很好'],
[6,'平安银行信用卡-账单','14922.48','人民币','1954-08-04','一般'],
[7,'平安银行信用卡-账单','87252.78','人民币','1956-10-01','很好'],
[8,'平安银行基金-账单','-67287.72','英磅','1948-02-24','一般'],
[9,'平安银行基金-账单','-51724.44','美元','1943-09-11','很差']
]]
},
{
groupName : '交通银行',
rows : [
[151,'交通银行一张同-账单','23062.39','英磅','1959-01-03','一般'],
[152,'交通银行信用卡-账单','10634.01','英磅','1967-09-23','很好'],
[153,'交通银行基金-账单','-69832.32','美元','2000-06-07','很差'],
[154,'交通银行信用卡-账单','-22260.14','英磅','1999-05-27','很差'],
[155,'交通银行国债-账单','92868.28','英磅','1911-01-03','一般'],
[156,'交通银行信用卡-账单','77059.80','英磅','1990-08-03','一般']
]]
},
{
groupName : '渣打银行',
rows : [
[182,'渣打银行一张同-账单','26046.45','英磅','1923-01-22','很好'],
[183,'渣打银行信用卡-账单','-57036.21','欧元','1974-04-20','很差']
]]
},
{
groupName : '浦发银行',
rows : [
[218,'渣打银行信用卡-账单','51027.86','日元','1970-01-08','很好'],
[219,'渣打银行基金-账单','-58048.75','英磅','1948-02-12','一般'],
[220,'渣打银行信用卡-账单','-79938.95','欧元','1957-11-22','很差'],
[221,'渣打银行国债-账单','-65972.99','欧元','1953-07-01','很差'],
[222,'渣打银行信用卡-账单','44483.17','欧元','2000-06-11','一般']
]]
},
{
groupName : '招商银行',
rows : [
[238,'招商银行信用卡-账单','77695.90','美元','1919-09-20','很好'],
[239,'招商银行信用卡-账单','52517.41','欧元','1921-11-12','很好'],
[240,'招商银行基金-账单','-45174.21','欧元','1949-03-08','很差'],
[241,'招商银行信用卡-账单','-60409.65','英磅','1950-04-02','一般'],
[242,'招商银行国债-账单','32741.68','美元','2005-11-17','很差']
]]
},
{
groupName : '农业银行',
rows : [
[430,'农业银行一张同-账单','23474.59','日元','1983-01-13','一般'],
[431,'农业银行信用卡-账单','-64526.95','日元','1952-06-10','很好'],
[432,'农业银行基金-账单','49975.19','美元','1975-05-18','一般']
]]
}
]]
}
function xx(v){
return ~~v<0
? '<span>'+v+'</span>'
: '<span>'+v+'</span>'
}
new easyGrid({
container : $$('demo'),
//主键名删除编辑的时候需要这个东西
primaryKey : 'id',
fields : [
{name:'序号',param:'id',type:'int',width:'100'},
{name:'名称',param:'name',type:'string',edit:'edit',width:'140'},
{name:'余额',param:'money',type:'float',edit:'edit',render:xx,width:'100'},
{name:'币种',param:'type',type:'string',edit:'edit',width:'100'},
{name:'日期',param:'date',type:'date',edit:'edit',width:'100'},
{name:'备注',param:'note',type:'string',width:'255'}
],
dataConfig : data,
//一页有多少条
perPage : 1000,
//当前在第几页
currPage : 0,
//一共多少页
totalPage : 0,
//一次请求多少条数据
count : 2000,
//第几版数据
page : 0
});
easyGrid.prototype.options.sortType.cp=function(v){
if(v==='很好')
return 3
if(v==='一般')
return 2
if(v==='很差')
return 1
}
new easyGrid({
container : $$('demo1'),
//主键名删除编辑的时候需要这个东西
primaryKey : 'id',
fields : [
{name:'序号',param:'id',type:'int',width:'100'},
{name:'名称',param:'name',type:'string',edit:'edit',width:'140'},
{name:'余额',param:'money',type:'float',edit:'edit',render:xx,width:'100'},
{name:'币种',param:'type',type:'string',edit:'edit',width:'100'},
{name:'日期',param:'date',type:'date',edit:'edit',width:'100'},
{name:'备注',param:'note',type:'cp',width:'255'}
],
dataConfig : data5,
//一页有多少条
perPage : 20,
//当前在第几页
currPage : 0,
//一共多少页
totalPage : 0,
//一次请求多少条数据
count : 2000,
//第几版数据
page : 0
});
};
</cript>
</docy>
</html>
水平有限请多指教