Einfacher DataGrid
1. Custom Sorting -Methode
2.Dit
3. Ziehen und ziehen
4. Pagination
5. Lineare Selektion (Verschiebung) mit Einzel-Choice-Multiple-Choice (STRG)
6. Textrender soll den Text färben, zum Beispiel mehr als 0, rot oder weniger als 0, grün
7. Ausblenden Sie die Spaltenanzeige
8. Gruppierung
Nur ein Beispiel ohne Ausreden mit dem Hintergrund
Tatsächlich können Sie nur ein paar Rückrufe schreiben. Es gibt eine Ladestange im Inneren, die angezeigt werden kann, bis das Ergebnis zurückgegeben wird.
Die Codekopie lautet wie folgt:
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Tabelle </title>
<style type = "text/css">
*{Margin: 0; Polsterung: 0;}
.H {Zeilenhöhe: 20px;}
.c {zoom: 1;}
.c: nach {content: "."; Anzeige: Block; Höhe: 0; klar: beides; Sichtbarkeit: versteckt;}
.l {float: links;}
.r {float: rechts;}
UL {Listenstil: Keine;}
.demo {width: 832px; Höhe: 400px; Schriftgröße: 12px; Rand: 20px Auto; Position: Relativ}
.demo .m_a {margin-right: 8px;}
.demo .nobreak {weißer Raum: Keep-All;*Weißer Raum: Normal; Text-Overflow: Ellipsis; Überlauf: versteckt; Höhe: 22px; Breite: 100%;}
.demo .container {
Grenze: 1PX Solid #99BBE8;
Höhe: Auto;
}
.demo .i_a {border: 1px solid #ccc; margin-top: 2px;}
.demo .t_a {Border-Links: 1PX Solid #99bbe8; Border-Bottom: 1PX Solid #99bbe8;}
.demo .t_a td {background-color: #fff; Grenzrechte: 1px Solid #ccc; Border-Top: 1PX Solid #CCC;}
.Demo Tabelle TD {
Zeilenhöhe: 22px;
Höhe: 20px;
}
.Demo table thead .headfocus {
Hintergrund: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) Repeat -x 0 -163px;
}
.Demo table thead td {
Überlauf: versteckt;
}
.demo .t_a tbody td {padding-links: 8px;}
.demo .title {Höhe: 24px; Zeilenhöhe: 22px; Schriftgewicht: fett; Padding-Links: 20px; Farbe:#666666; Hintergrund: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) Repeat -x 0 -300px;}
.demo .bar {_display: Inline-Block; Linienhöhe: 20px; Höhe: 20px; Grenze: 1PX Solid #99bbe8; Hintergrund: 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; Schriftgewicht: BOLD;}
.demo. .last_div_no {float: links; width: 18px; Höhe: 16px; margin-top: 3px;
.demo .first_div {Hintergrundposition: -12px -58px;}
.demo .first_div_no {Hintergrundposition: 4px -58px; Cursor: Normal}
.demo .prev_div {Hintergrundposition: -11px -78px;}
.demo .prev_div_no {Hintergrundposition: 5px -78px; Cursor: Normal}
.demo .Next_div {Hintergrundposition: -65px -78px;}
.demo .Next_div_no {Hintergrundposition: -49px -78px; Cursor: Normal}
.demo .last_div {Hintergrundposition: -67px -58px;}
.demo .last_div_no {Hintergrundposition: -51px -58px; Cursor: Normal}
.Demo .Rowfocus td {Hintergrundfarbe:#EBF2FB}
.demo .delbtn, .demo .delbtn: hover {Hintergrund: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat; Breite: 45px; Text-Align: Mitte; Höhe: 20px; Farbe:#333; Anzeige: Block; Textdekoration: Keine; float: links;}
.demo .delbtn {Hintergrundposition: -55px 0;}
.demo .delbtn: Hover {Hintergrundposition: -55px -30px; Farbe:#666}
.demo table {
Schriftgröße: 12px;
Tischlayout: behoben;
-moz-user-select: -moz-none;
-Webkit-User-Select: Keine;
-khtml-user-Select: Keine;
}
.demo .tabcontainer {
Breite: 99%;
Überlauf: Auto;
Polsterung: 2px 0 0 2px;
Hintergrundfarbe:#fffbf7;
Position: Relativ;
}
.demo table thead td {Hintergrund: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repep -x 0 -100px;}
.Demo table thead a {
Z-Index: 1000;
Hintergrundfarbe:#C3DAF9;
Hintergrund-image: url ("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png");
Anzeige: Keine;
Breite: 12px;
Höhe: 22px;
Hintergrundposition: 0 -234px;
Position: absolut;
Top: 0;
Rechts: 0;
}
.Demo table thead div {Position: relativ; Z-Index: 1;}
.Demo Tabelle thead p {
Breite: 1PX;
Höhe: 22px;
Hintergrundfarbe:#99bbe8;
float: links;
Anzeige: Block;
Cursor: E-Resen;
Rand-Rechts: 2px;
}
.demo table tr.trfocus td {
Hintergrundfarbe:#EBF2FB
}
.demo div table, .demo div table tr, .demo div table tr td {
-moz-user-select: -moz-none;
-Webkit-User-Select: Keine;
}
.Demo Tabelle Tr td {Hintergrundfarbe: #fff; Überlauf: versteckt; Text-Overflow: Ellipsis; weißer Raum: Nowrap;}
.demo .Loading {Position: absolut; Z-Index: 9999; links: 0; Top: 0; Hintergrund:#e5e5e5; Filter: Alpha (Opazität = 50); Opazität: 0,5;
.demo .loadDiv {Position: absolut; Z-Index: 99999; Breite: 98px; Höhe: 28px; Grenze: 1PX Solid #6593cf; Hintergrund: #fff URL (http://images.cnblogs.com/cnblogs_com/wtcsy/2940224/294024/2924/2924/2924/2924/29024/r_ajaxtable.compo. -300px; Padding: 2px;}
.demo .loadgif {Hintergrund: #fff URL (Bilder/lade_small.gif) No-Repeat 4px 5px; Padding: 5px 0 0 27px; Breite: 68px; Höhe: 21px; Rand: 1px Feststoff #6593cf;}
.demo .loadText {color:#000;}
.Demo .Edittable {Border: 1px solide #C4C4C4;}
.Demo .Edittable TD {Hintergrund:#EBF2FB; Höhe: 24px;}
.demo .Editbtn {padding: 5px; width: 100px; Margin: 0 Auto;
.demo .delbtn, .ajaxtable .delbtn: hover {Hintergrund: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat; Breite: 45px; Text-Align: Mitte; Höhe: 20px; Farbe:#333; Anzeige: Block; Textdekoration: Keine; float: links;}
.demo .delbtn {Hintergrundposition: -55px 0;}
.demo .delbtn: Hover {Hintergrundposition: -55px -30px; Farbe:#666}
.demo .btn_a, .ajaxtable .BTN_A: Hover {Cursor: Pointer; Hintergrund: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat; Text-Align: Mitte; Padding-Top: 5px; Breite: 45px; Höhe: 17px; Anzeige: Block; Float: Links; Cursor: Zeiger; Textdekoration: Keine;}
.demo .BTN_A {Hintergrundposition: 0 0; Farbe:#333;}
.demo .BTN_A: Hover {Hintergrundposition: 0 -30px; Farbe:#666;}
.Sort-asc .head_span {
Höhe: 12px; Breite: 24px;
Anzeige: Block;
float: links;
Padding-Right: 18px;
Hintergrund: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No -Repeat rechts -423px;
}
.head_span {float: links; Zeilenhöhe: 22px; Anzeige: Block;}
.Sort-desc .head_span {
Höhe: 12px; Breite: 24px;
Anzeige: Block;
float: links;
Padding-Right: 18px;
Hintergrund: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No -Repeat rechts -391px;
}
.x-menu {
Position: absolut;
Hintergrund: URL (Menü.gif) Wiederholt-y #f0f0f0;
Grenze: 1PX Solid #718bb7;
Breite: 134px;
Anzeige: Keine;
}
.x-menu .Disabled a {
Farbe:#999;
}
.x-menu-list {padding: 2px; Überlauf: versteckt; Rand: 0;}
.x-menu-list li {padding: 1px; weißer Raum: Nowrap; Höhe: 20px;}
.x-menu-list li.focus {backRound:#09f;}
ax-Menu-item {
Anzeige: Block;
Cursor: Zeiger;
Zeilenhöhe: 18px;
Höhe: 20px;
Umrissfarbe: -moz-Use-Text-Color;
Umrissstil: Keine;
Umrissbreite: 0;
Breite: 100px;
Padding-Links: 27px;
Position: Relativ;
Textdekoration: Keine;
weißer Raum: Nowrap;
Schriftgröße: 12px;
Farbe:#222;
}
AX-M_A {Padding-Links: 8px; Breite: 120px;}
ax-Menu-item-Eingabe {Margin-Right: 8px}
ax-Menu-item: Hover {Hintergrundfarbe:#d9e8fb}
.asc {Hintergrund: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No -Repeat -53px -218px;}
.desc {Hintergrund: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No -Repeat -53px -243px;}
.Columns {Hintergrund: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No -Repeat -53px -268px;}
.submenu {
Position: absolut;
Z-Index: 1500;
Hintergrund:#f0f0f0;
Grenze: 1PX Solid #718bb7;
Breite: 134px;
Anzeige: Keine;
}
.x-menu-list .Child-menu {Hintergrund: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat Right -444px;}
AX-M_A {Padding-Links: 8px; Breite: 120px;}
ax-Menu-item-Eingabe {Margin-Right: 8px}
ax-Menu-item: Hover {Hintergrundfarbe:#d9e8fb}
.Linie{
Breite: 1px; Hintergrundfarbe: #cccccc; Position: Absolut; Anzeige: Keine; Z-Index: 100;
}
.Rot{
Farbe:#ff0000;
}
.Gier{
Farbe:#33ff00;
}
</style>
</head>
<body>
1. Custom Sorting -Methode
<br>
2.Dit
<br>
3. Ziehen und ziehen
<br>
4. Pagination
<br>
5. Lineare Selektion (Verschiebung) mit Einzel-Choice-Multiple-Choice (STRG)
<br>
6. Textrender soll den Text färben, zum Beispiel mehr als 0, rot oder weniger als 0, grün
<br>
7. Ausblenden Sie die Spaltenanzeige
<br>
8. Gruppierung
<br>
<div id = 'Demo' class = 'Demo'> </div>
<br> <br> Die folgenden sind gruppiert und es gibt eine benutzerdefinierte Sortiermethode, die gut ist, im Allgemeinen arm <br> <br>
<div id = 'Demo1' class = 'Demo'> </div>
<script type = "text/javaScript">
(Funktion (doc, undefiniert) {
var win = this;
win.sys = function (ua) {
var b = {
IE: /msie/.test(ua) &&! /opera/.test (ua),
Opera: /opera/.test(ua),
safari: /webkit/.test(ua) &&! /chrome/.test (ua),
Firefox: /firefox/.test(ua),
Chrome: /chrome/.test(ua)
}, vmark = "";
für (var i in b) {
if (b [i]) {vmark = "safari" == i? "Version": i; brechen; }
}
b.version = vmark && regexp ("(?:" + vmark + ") [///:] ([// d.] +)"). Test (ua)? Regexp. $ 1: "0";
b.ie6 = b.ie && parseInt (b.version, 10) == 6;
b.ie7 = b.ie && parseInt (b.version, 10) == 7;
b.ie8 = b.ie && parseInt (b.version, 10) == 8;
Rückkehr B;
} (win.navigator.useragent.tolowerCase ());
win.sys.ie6 && doc.execcommand ("HintergrundImageCache", false, true);
win. $$ = function (id) {
Rückgabe typeof id === 'String' '
? doc.getElementById (ID)
: Ausweis;
};
win. $ q = function (name, übergeordnet) {
return parent.getElementsByTagName (Name);
}
win. $ c = function (name, übergeordnet) {
var elem = typeof name === 'Objekt'? Name: doc.Createelement (Name);
Eltern && Elternteil.AppendChild (Elem);
Return Elem;
};
win.addListener = function (Element, e, fn) {
! element.events && (element.events = {});
element.events [e] && (element.events [e] [addierener.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 Handler = element.events [e], Typ;
if (fn) {
für (eingeben in Handlern)
if (Handler [Typ] === fn) {
Element.RemoveEventListener? Element.RemoveEventListener (e, fn, false): Element.DetAchEvent ("on" + e, fn);
Handler löschen [Typ];
}
}anders{
für (eingeben in Handlern) {
element.removeEventListener? element.removeEventListener (E, Handler [Typ], False): Element.DetACHEvent ("on" + E, Handler [Typ]);
Handler löschen [Typ];
}
}
};
win.fireEvent = function (Element, Ereignisname) {
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 = function (Elems, Stil, Wert) {
if (! Elems.length) elems = [Elems];
if (typeof style == "String") {
style = value === undefined? {CSSTEXT: STYLE} :( Funktion (o) {
return (o [style] = value, o);
}) ({});
};
Jede (Elems, Funktion (i, Elem, Stil) {
var Wert, Name, dh = sys.ie;
für (Name im Stil) {
value = style [name];
if (name === "opazität" && dh) {
Elem.Style.Filter = (Elem.CurrentStyle.filter || "") .Replace (/alpha/([^)] */)/, ") +" alpha (opacity = " + Wert * 100 +") ";
} else if (name === "float") {
Elem.Style [dh? "stylefloat": "cssfloat"] = Wert;
}anders{
name = name.replace (/-([az])/ig, Funktion (alle, Buchstaben) {
return bete.touppercase ();
});
Elem.Style [Name] = Wert;
}
}
}, Stil);
};
win.setattr = function (DOM, attr) {
if (typeof attr! == 'Objekt')
zurückkehren;
für (var name in attr)
Dom.SetatTribute (Name, Attr [Name]);
}
var Slice = Array.Prototype.slice;
win.bind = Funktion (Objekt, Spaß) {
var args = Slice.call (Argumente) .Slice (2);
return function () {
return Fun.Apply (Objekt, Args);
};
};
win.bindaseventListener = function (Objekt, Spaß, args) {
var args = Slice.call (Argumente) .Slice (2);
Rückgabefunktion (Ereignis) {
return Fun.Apply (Objekt, [Ereignis || Win.Event] .Concat (args));
}
};
win.extend = function () {
var target = argumente [0] || {}, i = 1, Länge = Argumente.length, Deep = true, Optionen;
if (typeof target === "boolean") {
Deep = Ziel;
Ziel = Argumente [1] || {};
i = 2;
}
if (typeof target! == "Object" && object.prototype.toString.call (Ziel)!
target = {};
für (; i <länge; i ++) {
if ((Optionen = Argumente [i])! = NULL)
für (var name in Optionen) {
var src = target [name], copy = options [name];
if (Ziel === Kopie)
weitermachen;
if (Deep && copy && typeof copy === "Objekt" &&! copy.nodetype) {
target [name] = argumente.callee (tiefe, src || (copy.length! = null? []: {}), copy);
}
sonst wenn (kopieren! == undefiniert)
Ziel [Name] = Kopie;
}
}
Ziel zurückgeben;
};
win.class = function (Eigenschaften) {
var _class = function () {
return (Argumente [0]! == null && this.initialize && typeof (this.initialize) == 'Funktion'))
? this.initialize.apply (this, Argumente)
: Das;
};
_class.Prototype = Eigenschaften;
Rückgabe _class;
};
win.each = function (Objekt, Rückruf, args) {
var name, i = 0, Länge = Objekt.Length;
if (args) {
args = array.prototype.slice.call (Argumente) .Slice (2);
if (Länge === undefiniert) {
für (Name im Objekt)
if (callback.apply (Objekt [Name], [Name, Objekt [Name]]. concat (args)) === false)
brechen;
} anders
für (; i <länge; i ++)
if (callback.apply (Objekt [i], [i, Objekt [i]]. concat (args)) === false) //
brechen;
} anders {
if (Länge === undefiniert) {
für (Name im Objekt)
if (callback.call (Objekt [Name], Name, Objekt [Name]) === false)
brechen;
} anders
für (var value = object [0];
I <Länge && callback.call (Wert, ich, Wert)! == false; value = Object [++ i]) {}
}
Objekt zurückgeben;
};
win.currentStyle = function (Element) {
return element.currentStyle || doc.DefaultView.getComputedStyle (Element, NULL);
};
win.objpos = function (elem) {
var links = 0, top = 0, rechts = 0, boden = 0, doc = elem? Elem.OwnerDocument: doc;
if (! Elem.getBoundingClientRect || Win.sys.ie8) {
var n = elem;
while (n) {links += n.offsetleft, top += n.offsettop; n = n.offsetParent; };
rechts = links + Elem.Offsetwidth; unten = ober + elem.offseteight;
} anders {
var rect = elem.getBoundingClientRect ();
links = rechts = doc.documentElement.scrollleft || doc.body.scrollleft;
ober = boden = doc.documentElement.scrollleft || doc.body.scrollleft;
links += rect.left; rechts += rect.Right;
ober += rect.top; unten += rect.bottom;
}
Rückkehr {"links": links, "oben": oben, "rechts": rechts, "unten": unten};
};
win.contains = function (k, j) {
return document.comParedocumentPosition
? k.comParedocumentPosition (J) & 16
: K! == J && K.Contains (j);
};
win.hasclass = function (element, className) {
return element.className.match (neuer regexp ('(// s |^)'+className+'(// s | $)'));
};
win.addclass = function (element, className) {
if (! Win.hasclass (Element, Klassenname))
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 (neuer regexp ('(// s*|^)'+className+'(// s*| $)'), '');
}
})(dokumentieren);
(Funktion (doc, undefiniert) {
var win = this,,
UUID = -1;
/*
Überprüfen Sie, ob in der Zeichenfolge ein Schlüssel vorhanden ist
Wenn es vorhanden ist und der Schlüssel folgt - kehren Sie ansonsten ansonsten zurück, kehren Sie ansonsten wahr zurück
Keine Erkennung gibt falsch zurück
*/
Funktion checkreg (str, key) {
var reg = new regexp ('(?:^| // s)'+key+'// b-? (.*?) (?: // s | $)', 'i');
if (reg.exec (str)! = null) {
return regexp. $ 1 === ''? TRUE: regexp. $ 1;
}anders{
false zurückgeben;
}
};
/*
Ändern Sie den Wert, der dem Schlüssel in der Zeichenfolge entspricht
*/
Funktion modifizieren (str, Schlüssel, Wert) {
var reg = new regexp ('(^| // s) ('+key+'// b-).*? (// s | $)', 'i');
return Str.Replace (Reg, '$ 1 $ 2'+Wert+'$ 3');
};
win.easygrid = new class ({{{
Optionen: {
Täter: 10,,
CurrPage: 0,,
Gesamtseite: 0,,
Graf: 10,
Seite: 0,
isedit: falsch,
widthconfig: {
TD: NULL,
vorab: null,
x: 0,
tdwidth: 0,
Prävwidth: 0
},
Cellminwidth: 50,
SortType: {
int: function (v) {return parseInt (v)},
float: function (v) {return parsefloat (v)},
Datum: Funktion (v) {return v.toString ()},
String: Funktion (v) {return v.toString ()}
},
Titel: 'Titel'
},
initialisieren: Funktion (Optionen) {
var op = extend (true, {}, this.options),
Optionen = this.defaults = Extend (OP, Optionen),
container = this.container = $ c ('div', options.container),
Dataconfig = options.dataconfig,
Titel = $ C ('Div', Container);
Container.ClassName = 'Container';
title.innerhtml = options.titel;
title.className = 'title';
this.primaryKey = options.primaryKey;
this.top = $ c ('div', Container);
this.top.className = 'Bar';
this.top.innerhtml = '<div> <a href = "javaScript:;" page = "start"> </a> <a href = "javaScript:;" page = "next"> </a> <div> <div> <Eingabe type = "text"/> </div> <div> </div> <a href = "javaScript:;" page = "pre"> </a> <a href = "javaScript:;" page = "end"> </a> <div> <a href = "javaScript:;" go = "go"> sprung </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 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 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 Daten und insgesamt ein Datenstück und insgesamt ein Datenstück,
var tabcontainer = this.tabContainer = $ c ('div', Container);
this.bottom = $ c (this.top.clonenode (true), Container);
tabcontainer.classname = 'tabcontainer';
Tabcontainer.Style.Height = ~~ Optionen.Container.Offseteight - 83+'PX';
var table = this.table = $ c ('table', tabcontainer);
table.className = 't_a';
setAttr (Tabelle, {cellpadding: "0", cellpacing: "0", Grenze: "0"});
this.tead = $ C ('Kopf', Tabelle);
this.tbody = $ c ('tbody', Tabelle);
this.tbody.style.display = 'none';
//Laden
this.loading_bg = $ c ('div', Container);
this.loading_bg.classname = 'laden';
setStyle (this.loading_bg, {
Breite: Container.Offsetwidth+2+'PX',,
Höhe: Container.Offseteight+2+'PX'
});
this.loading = $ c ('Div', Container);
this.loading.classname = 'loaddiv' '
setStyle (this.loading, {
Links: (Container.Offsetwidth/2-45) + 'PX',
Oben: (Container.Offseteight/2-14) + 'PX'
});
this.loading.innerhtml = '<div> laden ... </div>';
// Wie viele Spalten befinden sich in der Tabelle
this.colcount = options.Fields.length;
// Das Datenquellenformular lautet [[], [], [], [], []]
this.data = [];
// Alle Gruppierungs -Header -Formulare in der aktuell angeforderten Datenquelle sind [TrDom1, Trform2]
this.grouphead = [];
// Aufzeichnen Sie die TR [TR1, TR2, TR3] der Gruppe, die in die Tabelle eingefügt wurde
this.inserttrs = [];
// Spaltenindex
// Form [[TD11, TD12, TD13, TD14], [TD21, TD22, TD23, TD24]]
this.columns = [];
// True bedeutet positive Reihenfolge falsche Mittelwerte umgekehrte Reihenfolge
this.ascsort = true;
// Speichern Sie, welche Spalte die Header TD sortiert
this.sortcolumn = '';
// Alle TR -Zeilen, wenn es keine Gruppierungsform gibt [TR1, TR2, TR3, TR4]
// Wenn gruppiert [[TR1, TR2, TR3, TR4], [TR5, TR6, TR7, TR8]]
this.rows = [];
// Menü Level 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"> abwärts </a> </li> <li> <a href = "JavaScript:;" MENUType = "Spalten"> Alle Spalten </a> </li> </ul> ';
// Erstellen Sie ein Untermenü
this.subpopmenu = $ c ('div', doc.body);
this.subpopmenu.className = 'submenu';
// ob die erste Popup-Ebene des Tischkopfes geöffnet ist. Wenn es geöffnet ist, speichern Sie den TD
this.ismenuopen = falsch;
// Speichern Sie, ob eine Spalte in allen Spalten angezeigt wird oder die NUM als Zähler versteckt wird, um zu sehen, wie viele Spalten vorhanden sind.
// Format schließt: [True, False, True, True] Spalte 1,3,4 zeigt die zweite Spalte versteckt
this.isshowtrs = {
Num: 0,
Clos: []
};
// Erstellen Sie die Basis, die beim Ziehen angezeigt wird
this.line = $ c ('div', doc.body);
this.line.classname = 'line';
// Zeile speichern
// Inkrementelle Mengen an Attribut uUid sind wie {1: dom, 2: dom}
this.selectedRows = {};
// Speichern Sie die letzte ausgewählte Zeile
this.lastSelectrow = {dom: null, Index: null};
this.currentItrow = {index: 0, dom: null};
this.editdata = [];
this.editform = $ c ('div', tabcontainer) ;;
setStyle (this.editform, {
Position: 'absolut',
Anzeige: 'keine',
'Z-Index': '120'
});
this.Edittable = $ c ('Tabelle', this.editform);
setattr (this.ediTTable, {
Zellpaket: '0',
cellpadding: '0',
Grenze: '0'
});
var btnc = $ c ('div', this.editform);
btnc.className = 'editBtn';
btnc.style.textalign = 'Center';
btnc.innerhtml = '<div> <a do = "subieren" href = "javaScript:;"> subine </a> <a do = "abbrechen" href = "javaScript:;"> abbrechen </a> </div>';
this.Edittable.className = 'edittable';
var etr = $ c ('tr', $ c ('tbody', this.edITTable));
// Erstellen Sie eine Kopie von TR, da der Knoten direkt kopiert werden kann, wenn TR später generiert wird
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 = this,
ul = $ c ('ul', this.subpopmenu),
li;
Jede (Optionen.Fields, Funktion (i, o) {
var td = $ c ('td', headtr),
width = o.width? O. Width: '80 ',
div = i === 0? '<div>': '<div> <p> </p>';
td.innnerhtml = [div, '<span>', O.Name, '</span> <a href = "javaScript:;"> </a> </div>']. Join ('');
setAttr (td, {clos: i, width: width, nicht wählbar: 'on', 'class': o.type === undefiniert? '': 'type-'+o.type});
self.createinput (i, o, ETR);
Twidth = Twidth + (~~ Breite);
li = $ c ('li', ul);
li.innerhtml = [
'<a href = "JavaScript:;" > <Eingabe type = "CheckBox" checked = "true" cols = "',
ich,
'"/>',
O.Name,
"</a>"
].verbinden('');
// Erstellen Sie das erste Element jeder Spalte im Spaltenindex
self.columns [i] = [td];
$ c ('td', self.copytr) .SetAttribute ('nicht wählbar', 'on');
// Berechnen Sie den Spaltenindex und die Gesamtzahl der Spalten num
self.isshowtrs.num ++;
self.isshowtrs.clos [i] = true;
});
setAttr (this.table, {width: twidth+options.fields.length+1})
// Erzeugen Sie den TR im Tbody nur nach Täter. Es handelt sich um ein Konfigurationselement, das zeigt, wie viele Daten derzeit verfügbar sind.
var i = 0,
trslen = options.perpage,
Frag = doc.createdocumentFragment (),
arr = new Array (options.Fields.length),
TR, TR,
tds;
für (; i <trslen; i ++) {
tr = this.copytr.clonenode (true);
tds = $ q ('td', tr);
jeder (arr, Funktion (i) {
// Generieren Sie alle Elemente des Spaltenindex
self.columns [i] .push (tds [i]);
});
$ c (tr, frag);
}
this.tbody.Appendchild (Frag);
if (typeof Dataconfig === 'Objekt') {
setTimeout (function () {self.getDatacallback (DataConfig);}, 5);
}anders{
}
/*
Ziehen Sie den Tisch
Tischsortierung
Warten Sie auf einige Operationen
*/
addierener (this.Tread, 'click', bindaseventListener (this, this.sortTable));
addListener (this.tead, 'mouseover', BindaseventListener (this, this.teadover));
addListener (this.tead, 'mouseout', BindaseventListener (this, this.teadout));
addListener (this.tead, 'MouseDown', BindaseventListener (this, this.dagwidth));
/*
Binden Sie die Popup-Ebene Klicken Sie auf Ereignisse für die Sortierung
Stufe 2 Menübindung, um die Spalte auszublenden
*/
addierenerer (this.popmenu, 'click', bindaseventListener (this, this.menuclick));
addierener (this.popmenu, 'mouseover', BindaseventListener (this, this.menuover));
Addierener (this.subpopMenu, 'click', BindaseventListener (this, this.subMenuclick));
/*
Setzen Sie die Tischreihen an und werden Sie dicker
*/
addListener (this.tbody, 'Mousemove', BindaseventListener (this, this.rowHighlight, wahr));
addierener (this.tbody, 'mouseout', BindaseventListener (this, this.rowHighlight, false));
addListener (this.tbody, 'MouseDown', BindaseventListener (this, this.Selectrow, false));
addierener (this.tbody, 'dblclick', BindaseventListener (this, this.editrow, false));
addierener (btnc, 'click', bindaseventListener (this, this.modifytr));
addierener (this.top, 'click', bindaseventListener (this, this.PageBarclick));
addierener (this.bottom, 'click', BindaseventListener (this, this.PageBarclick));
},
getDatacallback: function (data) {
var options = this.defaults,
self = this,
totla = 0;
this.data.length = 0;
if (data.data) {
if (data.data [0] .GroupName) {
var Grouphead = this.grouphead;
Grouphead.Length = 0;
jeweils (Data.Data, Funktion (i, o) {
var gtr = self.grouptr.clonenode (true);
$ q ('td', gtr) [0] .innerhtml = O.Groupname;
Grouphead.push (GTR);
jeweils (O.Rows, Funktion (j, d) {
// Das letzte Datenelement in dieser.data ist der Index
d.push (i);
self.data.push (d);
});
});
this.showgroup = true;
}anders{
jeweils (Data.Data, Funktion (i, o) {
self.data.push (o);
});
this.showGroup = false;
}
}anders{
zurückkehren;
}
Total = Data.Total
? Data.total> = this.data.length
? Data.total
: this.data.length
: this.data.length;
this.writemessage (insgesamt);
this.buildtbody (options.currpage);
},
Buildtbody: Funktion (pagenum) {
if (this.data.length === 0) {
this.tbody.style.display = 'none';
zurückkehren;
}
var i = 0,
J = 0,
self = this,
Data = this.data,
Optionen = 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 Group = {},
Index,
arr = [],
Inserttrs = this.inserttrs;
// Löschen Sie die zuvor eingefügte Gruppe TR
Inserttrs.length! = 0 && jeweils (Inserttrs, Funktion (i, o) {
self.tbody.removechild (o);
});
InsertTrs.length = 0;
// Übertragen Sie die Fülldaten auf diese.Rows
var num = - 1;
für (; i <trslen; i ++) {
tr = trs [i];
// Wenn keine Daten vorhanden sind, verstecken Sie die verbleibenden Zeilen
if (! Daten [i+start]) {
tr.Style.display = 'none';
weitermachen;
}
// Machen Sie das Tag TR, welche Daten in den Daten entsprechen
Tr.SetatTribute ('dataindex', i+start);
tr.Style.display = 'Block';
tds = tr.GetElementsByTagName ('td');
// x ist die Identifizierung verschiedener Gruppengruppen in der Gruppe
var x = data [i+start] [data [i+start] .Length-1];
// Wird verwendet, um festzustellen, ob die nachfolgenden Daten und früheren Daten in derselben Gruppe liegen
// Wenn es sich um die gleiche Gruppe handelt, fügen Sie die letzte Spalte dieser.rows hinzu
// Erstellen Sie eine Spalte, die nicht dieselbe Gruppe ist
num == x
? this.rows [this.rows.length-1] .push (tr)
: (this.rows [this.rows.length] = [tr], num = x);
// Array arr verwenden, um die Position der ersten TR jeder Gruppe zu erinnern, da der TR -Header I später in die Position Num eingefügt wird, ist die Sequenznummer der Gruppe.
! (num in Gruppe) && (Gruppe [num] = i + start, arr.push ([num, i]));
für (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 = Render
? Render (txt)
:txt;
}
tr.Style.display = '';
}
jeweils (arr.reverse (), Funktion (i, o) {
InsertTrs.push (self.grouphead [o [0]]);
self.tbody.insertbefore (self.grouphead [o [0]], trs [o [1]]);
});
}anders{
für (; i <trslen; i ++) {
tr = trs [i];
// Machen Sie das Tag TR, welche Daten in den Daten entsprechen
Tr.SetatTribute ('dataindex', i+start);
this.rows.push (tr);
// die TR ohne Daten verstecken
if (! Daten [i+start]) {
tr.Style.display = 'none';
weitermachen;
}
tr.Style.display = '';
tds = $ q ('td', tr);
für (j = 0; j <tdslen; j ++) {
var txt = data [i+start] [j] === ''? '': data [i+start] [j];
Render = options.Fields [j] .Render;
TDS [j] .ernerhtml = Render
? Render (txt)
:txt;
}
}
}
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';
bottoas [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';
}anders{
bottomas [0] .className = topas [0] .className = 'first_div';
bottomas [1] .className = topas [1] .className = 'prev_div';
bottomas [2] .className = topas [2] .className = 'next_div';
bottoas [3] .ClassName = topas [3] .ClassName = 'last_div';
}
this.tbody.style.display = '';
this.loading_bg.style.display = 'none';
this.loading.style.display = 'none';
},
WriteMessage: Funktion (Gesamt) {
var options = this.defaults,
Basis = Gesamt/Optionen.Perpage,
topspans = this.top.getElementsByTagName ('span'),
bottomSpans = this.bottom.getElementsByTagName ('span');
Optionen.Totalpage = Base> ParseInt (Basis)
? ParseInt (Basis) +1
: Basis;
bottomspans [0] .innerhtml = topspans [0] .innerhtml = ~~ Optionen.Currpage+1;
BottomSpans [1] .innerhtml = topspans [1] .innerhtml = options.totalpage;
BottomSpans [2] .innerhtml = topspans [2] .innerhtml = options.PerPage;
BottomSpans [3] .innerhtml = TopSpans [3] .innerhtml = Gesamt;
},
Sorttable: Funktion (e) {
var elem = e.target || e.srcelement,
self = this,
Optionen = this.defaults,
Elemname = Elem.nodename.tolowerCase (),
Showgroup = this.showGroup,
tdelem = elem,
Name = Elemname;
// Klick kann beim Ziehen ausgelöst werden. Der Grund dafür ist, dass alle unter IE an diesem table gebundenen Codes gebunden sind. Siehe Drag and Drop.
if ($ q ('td', Elem) .Length> 1)
zurückkehren;
if (name! == 'td') {
while (name! == 'td') {
tdelem = tdelem.parentnode;
name = tdelem.nodename.tolowerCase ();
}
}
var issort = checkReg (tdelem.className, 'sort'),
type = checkReg (tdelem.className, 'type')
//Sortieren
if (elemname! == 'a' && type) {
var fragment = doc.CreatedocumentFragment ();
if (this.sortcolumn! == tdelem && this.sortcolumn! == '') {
removeclass (this.sortcolumn, 'sort-act');
removeclass (this.sortcolumn, 'sort-desc');
}
if (issort) {
// Es gibt Gruppierungen, jede Gruppe wird separat umgekehrt und nicht gruppiert und direkt invertiert.
Showgroup
? jeweils (this.rows, function (i, o) {o.Reverse ();})
: this.rows.reverse ();
tdelem.className = modify (tdelem.className, 'sort', issort === 'ASC'? 'Desc': 'ASC');
}anders{
Showgroup
? jeweils (this.rows, Funktion (i, o) {
O.Sort (self.comPare (tdelem.getAttribute ('clos'), Typ));
})
: this.rows.sort (this.comPare (tdelem.getAttribute ('clos'), Typ));
// Wenn es in einer positiven Reihenfolge sortiert ist, fügen Sie die Flagge der positiven Reihenfolge hinzu.
if (this.ascsort) {
AddClass (tdelem, 'sort-act');
}anders{
// Inverse Sortierung umkehrt die ursprüngliche Sortierung und fügt die Sortierflagge hinzu
Showgroup
? jeweils (this.rows, function (i, o) {o.Reverse ();})
: this.rows.reverse ();
AddClass (tdelem, 'sort-desc');
}
}
// Rendern Sie die sortierten Daten in eine Tabelle
var Inserttrs = this.inserttrs,
len = inserttrs.length-1,
arr = [];
jeweils (this.rows, function (i, tr) {
arr = [Inserttrs [len-i]]. concat (tr);
Showgroup
? jeweils (arr, function (idx, obj) {frag.appendchild (obj);})
: Frag.AppendChild (tr);
});
this.tbody.Appendchild (Frag);
this.sortcolumn = tdelem;
}
// -------------------------------------------------------------------------------------------------------------------------------------
/*
Wenn Sie im Header auf das A -Tag klicken, wird ein Menü angezeigt
*/
if (Elemname === 'a') {
/*
Wenn Sie außerhalb des Menüs klicken, wird die Funktion ausgeführt
Wird verwendet, um das Klickereignis des Dokuments zu löschen, um den Stil von TD und a zu entfernen, um zu entfernen
*/
Funktion documentClick () {
self.popmenu.style.display = 'none';
self.subpopmenu.style.display = 'none';
if (self.ismenuopen) {
Removelistener (Dokument, "Click");
removeclass ($ q ('div', self.ismenuopen) [0], 'headfocus');
$ q ('a', self.ismenuopen) [0] .Style.display = 'None';
}
self.ismenuopen = falsch;
}
var pos = objpos (elem),
links = pos.left+math.max (document.documentElement.scrollleft, document.documentElement.scrollleft),
top = pos.top +math.max (document.documentElement.scrolltop, document.documentElement.scrolltop) +elem.offseteight,
td = elem.parentnode.parentnode,
lis = $ q ('li', this.popmenu);
// Wenn dies wahr ist, ist die Ebene offen und die Ausführung der eng bezogenen Verarbeitung wird durchgeführt.
this.ismenuopen && documentClick ();
if (! checkReg (td.className, 'type')) {
AddClass (LIS [0], 'Behindert');
AddClass (LIS [1], 'Behinderte');
}anders{
removeclass (lis [0], 'behindert');
removeclass (lis [1], 'behindert');
}
Sys.ie
? E. CancelBubble = True
: e.Stoppropagation ();
// Bei der Anzeige der Ebene ist der TD an dieses angehängt.IsMENUOPEN
this.ismenuopen = td;
Addierener (Dokument, "Click", documentClick);
setStyle (this.popmenu, {
links: links+'px',
Top: Top+'PX',
Anzeige: 'Block' '
});
}
},
Vergleichen Sie: Funktion (n, Typ) {
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))
zurückkehren;
//如果离开了当前的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();
zurückkehren;
}
//如果a标签的menuType
var menuOp = elem.getAttribute('menuType'),
sortOrder = checkReg(className,'sort');
//选择所有列不进行排序
if(menuOp==='columns')
zurückkehren;
/*
如果没有排序就根据menuOp来进行排序
如果已排序且与menuOp排序方式不同则进行排序
*/
if(sortOrder){
if(menuOp != sortOrder){
var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
fireEvent(td,'click');
}
}anders{
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 ? '' : 'none';
//如果还剩一列并且这次是取消选中的
//则不执行隐藏
if(this.isShowTrs.num===1&&!checked){
input.checked = true;
false zurückgeben;
}
checked
?(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(){
checked
? 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'))
zurückkehren;
//如果是分组的行tr 就返回
if(elem.nodeName.toLowerCase()==='td'&&parent.getAttribute('g')==='y')
zurückkehren;
isHight
? addClass(parent,'rowfocus')
: removeClass(parent,'rowfocus');
},
selectRow : function(e){
var elem = e.target || e.srcElement;
if(elem.getAttribute('g')||elem.parentNode.getAttribute('g'))
zurückkehren;
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;
}anders{
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);
}anders{
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}
false zurückgeben;
}
});
//清空掉之前所有选中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;
false zurückgeben;
}
});
}
}
},
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)
zurückkehren;
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);
!Typ
&&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'))
zurückkehren;
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',
Anzeige : ''
});
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';
}
}
});
})(dokumentieren);
window.onload = function(){
var data ={
//total:'55',
data : []
}
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,
data : [
{
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
});
};
</script>
</body>
</html>
水平有限请多指教