Datagrid simple
1. Método de clasificación personalizada
2.Edita
3. Arrastre y arrastre
4. Paginación
5. Selección lineal de opción múltiple (CTRL) de opción única (CTRL) (Shift)
6. El render de texto es colorear el texto, por ejemplo, mayor que 0, rojo o menos de 0, verde
7. Ocultar la pantalla de columna
8. Agrupación
Solo un ejemplo sin excusas con el fondo
De hecho, puedes escribir algunas devoluciones de llamada. Hay una barra de carga en el interior que se puede mostrar hasta que se devuelve el resultado.
La copia del código es la siguiente:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Table </title>
<style type = "text/css">
*{margen: 0; relleno: 0;}
.H {Línea-aguja: 20px;}
.c {zoom: 1;}
.c: después de {content: "."; Pantalla: bloque; Altura: 0; claro: ambos; Visibilidad: oculto;}
.l {float: izquierda;}
.r {float: right;}
ul {estilo list: ninguno;}
.demo {ancho: 832px; Altura: 400px; Fuente del tamaño: 12px; Margen: 20px Auto; Posición: relativo}
.demo .m_a {margin-right: 8px;}
.demo .nobReak {White-Space: Keep-All;*White-Space: Normal; Text-Overflow: Ellipsis; Overflow: Oculto; Altura: 22px; Ancho: 100%;}
.demo .container {
borde: 1px Solid #99BBE8;
Altura: Auto;
}
.demo .i_a {border: 1px solid #ccc; margin-top: 2px;}
.demo .t_a {borde-izquierda: 1px sólido #99bbe8; border-fondo: 1px sólido #99bbe8;}
.demo .t_a td {background-color: #fff; border-right: 1px solid #ccc; border-top: 1px solid #ccc;}
.demo tabla td {
Línea de altura: 22px;
Altura: 20px;
}
.Demo Table thead .headfocus {
Antecedentes: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaJaxtable.png) Repet -x 0 -163px;
}
.demo Table thead td {
desbordamiento: oculto;
}
.demo .t_a tbody td {relleno-izquierda: 8px;}
.demo .title {altura: 24px; Línea de altura: 22px; Font-Weight: Bold; RODING-LUFE: 20px; Color:#666666; Antecedentes: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaJaxtable.png) Repet -x 0 -300px;}
.demo .Bar {_display: inline-block; line-height: 20px; Altura: 20px; Top de borde: 1px Solid #99BBE8; Antecedentes: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaJaxtable.png) Repet -x 0 -350px; relleno: 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, .dive .last_div_no {float: izquierda; ancho: 18px; altura: 16px; margin-top: 3px; cursor: pointer; display: block; margin-right: 5px; fondos: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_raxtable.png)
.demo .first_div {Posición de fondo: -12px -58px;}
.demo .first_div_no {Posición de fondo: 4px -58px; cursor: normal}
.Demo .Prev_Div {Posición de fondo: -11px -78px;}
.demo .prev_div_no {Posición de fondo: 5px -78px; cursor: normal}
.Demo .next_div {Posición de fondo: -65px -78px;}
.demo .next_div_no {Posición de fondo: -49px -78px; cursor: normal}
.demo .last_div {Posición de fondo: -67px -58px;}
.demo .last_div_no {Posición de fondo: -51px -58px; cursor: normal}
.Demo .RowFocus TD {Background-Color:#EBF2FB}
.demo .delbtn, .demo .delbtn: hover {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) sin repetición; ancho: 45px; text-aline
.demo .delbtn {Posición de fondo: -55px 0;}
.demo .delbtn: hover {Posición de fondo: -55px -30px; color:#666}
.Demo tabla {
tamaño de fuente: 12px;
Layout de tabla: fijo;
-Moz-User-Select: -Moz-None;
-Webkit-user-select: ninguno;
-khtml-user-select: ninguno;
}
.demo .tabcontainer {
Ancho: 99%;
desbordamiento: auto;
relleno: 2px 0 0 2px;
Color de fondo:#FFFBF7;
Posición: relativo;
}
.Demo Table Thead Td {Background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repetir -x 0 -100px;}
.demo tabla thead a {
Índice Z: 1000;
Color de fondo:#C3DAF9;
Background-image: URL ("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaJaxtable.png");
Pantalla: ninguno;
Ancho: 12px;
Altura: 22px;
Posición de fondo: 0 -234px;
Posición: Absoluto;
arriba: 0;
Derecha: 0;
}
.demo tabla thead div {posición: relativa; Índice z: 1;}
.demo tabla thead p {
Ancho: 1px;
Altura: 22px;
Color de fondo:#99BBE8;
flotante: izquierda;
Pantalla: bloque;
Cursor: resolución electrónica;
margen-derecha: 2px;
}
.demo tabla tr.trfocus td {
Color de fondo:#EBF2FB
}
.Demo divle div, .demo divle table tr, .demo divle table tr td {
-Moz-User-Select: -Moz-None;
-Webkit-user-select: ninguno;
}
.demo tabla tr td {fondo de fondo: #fff; desbordamiento: oculto; Texto-Overflow: Ellipsis; White-Space: Nowrap;}
.demo .Loading {posición: absoluto; z-índice: 9999; izquierda: 0; arriba: 0; fondo:#e5e5e5; filtro: alfa (opacidad = 50); opacidad: 0.5; -moz-opacidad: 0.5; -khtml-opacidad: 0.5;}
.Demo .LoadDiv {posición: absoluto; z-index: 99999; ancho: 98px; altura: 28px; border: 1px sólido #6593cf; fondos: #fff url (http://images.cnblogs.com/cnblogs -300px; relleno: 2px;}
.demo .loadgif {fondo: #fff url (images/loading_small.gif) No-repeat 4px 5px; relleno: 5px 0 0 27px; ancho: 68px; altura: 21px; borde: 1px sólido #6593cf;}
.Demo .LoadText {color:#000;}
.Demo .Edittable {Border: 1px Solid #C4C4C4;}
.Demo .Edittable TD {Background:#EBF2FB; Height: 24px;}
.Demo .EditBtn {Padding: 5px; ancho: 100px; margen: 0 Auto; Background: #EBF2FB; Border: 1px Solid #C4C4C4; Border-Top: Ninguno;}
.demo .delbtn, .AJAXTable .delbtn: Hover {Background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) sin repetición; ancho: 45px; text-aline
.demo .delbtn {Posición de fondo: -55px 0;}
.demo .delbtn: hover {Posición de fondo: -55px -30px; color:#666}
.Demo .BTN_A, .AJAXTABLE .BTN_A: HOVER {cursor: pointer; fondos: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_aJaxtable.png) sin repetición; text-align: centro; almohadilla: 5px; ancho: 45px; altura: 17px; visual
.Demo .BTN_A {Posición de fondo: 0 0; color:#333;}
.demo .btn_a: hover {Posición de fondo: 0 -30px; color:#666;}
.sort-as .head_span {
Altura: 12px; Ancho: 24px;
Pantalla: bloque;
flotante: izquierda;
Right-Right: 18px;
Antecedentes: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaJaxtable.png) no -Repeat derecho -423px;
}
.head_span {float: left; line-height: 22px; display: block;}
.sort -desc .head_span {
Altura: 12px; Ancho: 24px;
Pantalla: bloque;
flotante: izquierda;
Right-Right: 18px;
Antecedentes: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaJaxtable.png) no -Repeat derecho -391px;
}
.x-menú {
Posición: Absoluto;
Antecedentes: URL (Menu.gif) Repita y #f0f0f0;
borde: 1px Solid #718BB7;
Ancho: 134px;
Pantalla: ninguno;
}
.x-Menu .disable A {
Color:#999;
}
.x-Menu-List {Padding: 2px; desbordamiento: oculto; margen: 0;}
.x-Menu-List Li {Padding: 1px; White-Space: Nowrap; Altura: 20px;}
.x-Menu-List Li.focus {Backround:#09f;}
Ax-Menu-Item {
Pantalla: bloque;
cursor: puntero;
Línea de altura: 18px;
Altura: 20px;
Color de contorno: -Moz-Use-Text-Color;
estilo de esquema: ninguno;
ancho de esquema: 0;
Ancho: 100px;
ROLED-LAFUERA: 27px;
Posición: relativo;
Decoración de texto: ninguna;
White-Space: Nowrap;
tamaño de fuente: 12px;
Color:#222;
}
ax-m_a {padding-izquierda: 8px; ancho: 120px;}
Entrada Ax-Menu-Item {Margin-Right: 8px}
Ax-Menu-Item: Hover {Background-Color:#D9E8FB}
.asc {fondo: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaJaxable.png) No -Repeat -53px -218px;}
.Desc {Background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaJaxtable.png) No -Repeat -53px -243px;}
.Columns {Background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaJaxtable.png) No -Repeat -53px -268px;}
.submenu {
Posición: Absoluto;
Índice Z: 1500;
Antecedentes:#F0F0F0;
borde: 1px Solid #718BB7;
Ancho: 134px;
Pantalla: ninguno;
}
.x-menu-list .child-menu {fondo: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no- Repeat derecho -444px;}
ax-m_a {padding-izquierda: 8px; ancho: 120px;}
Entrada Ax-Menu-Item {Margin-Right: 8px}
Ax-Menu-Item: Hover {Background-Color:#D9E8FB}
.línea{
Ancho: 1px; Color de fondo: #CCCCCC; Posición: Absoluto; Display: Ninguno; Índice Z: 100;
}
.rojo{
Color:#FF0000;
}
.codicia{
Color:#33FF00;
}
</style>
</ablo>
<Body>
1. Método de clasificación personalizada
<br>
2.Edita
<br>
3. Arrastre y arrastre
<br>
4. Paginación
<br>
5. Selección lineal de opción múltiple (CTRL) de opción única (CTRL) (Shift)
<br>
6. El render de texto es colorear el texto, por ejemplo, mayor que 0, rojo o menos de 0, verde
<br>
7. Ocultar la pantalla de columna
<br>
8. Agrupación
<br>
<div id = 'demo' class = 'demo'> </div>
<br> <br> Los siguientes se agrupan y hay un método de clasificación personalizado que es bueno, generalmente pobre <br> <br>
<div id = 'demo1' class = 'demo'> </div>
<script type = "text/javaScript">
(función (doc, indefinido) {
var win = this;
win.sys = function (ua) {
var b = {
es decir: /msie/.test(ua) &&! /persa/.test (ua),
ópera: /opera/.test(ua),
safari: /webkit/.test(ua) &&! /chrome/.test (ua),
Firefox: /firefox/.test(ua),
Chrome: /Chrome/.Test(ua)
}, vmark = "";
para (var i en b) {
if (b [i]) {vmark = "safari" == i? "Versión": I; romper; }
}
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;
regreso B;
} (win.navigator.useragent.tolowercase ());
win.sys.ie6 && doc.execCommand ("BackgroundImageCache", falso, true);
Win. $$ = function (id) {
return typeOf id === 'cadena'
? doc.getElementById (ID)
: identificación;
};
Win. $ Q = function (nombre, padre) {
return parent.getElementsBytagName (nombre);
}
Win. $ C = function (nombre, padre) {
var elem = typeof name === 'objeto'? Nombre: doc.createElement (nombre);
parent && parent.appendchild (elem);
regresar elem;
};
win.addListener = function (element, e, fn) {
! element.events && (element.events = {});
element.events [e] && (element.events [e] [addListener.guid ++] = fn) || (element.events [e] = {'0': fn});
element.adDeventListener? Element.adDeventListener (e, fn, falso): element.attachevent ("on" + e, fn);
};
win.addListener.guid = 1;
win.removelistener = function (element, e, fn) {
Var manejadores = element.events [e], type;
if (fn) {
para (escriba los manejadores)
if (Handlers [type] === fn) {
element.removeEventListener? Element.RemoveEventListener (e, fn, falso): element.detachevent ("on" + e, fn);
eliminar manejadores [tipo];
}
}demás{
para (escriba manejadores) {
element.removeEventListener? Element.RemoveEventListener (e, Handlers [type], false): element.detachevent ("on" + e, manejadores [type]);
eliminar manejadores [tipo];
}
}
};
win.fireevent = function (elemento, eventname) {
if (elemento [eventName]) {
elemento [eventName] ();
} else if (element.fireevent) {
element.fireeVent ('on'+eventname);
} else if (doc.createEvent) {
var evt = doc.createEvent ("mouseevents");
evt.initevent (eventname, verdadero, verdadero);
elemento.dispatcheVent (EVT);
}
};
win.setstyle = function (elems, estilo, valor) {
if (! Elems.length) elems = [elems];
if (typeof style == "string") {
style = valor === Undefined? {csstext: style} :( function (o) {
return (o [estilo] = valor, o);
}) ({});
};
cada uno (elems, función (i, elem, estilo) {
valor var, nombre, es decir = sys.ie;
para (nombre de estilo) {
valor = estilo [nombre];
if (name === "opacidad" && ie) {
elem.style.filter = (elem.currentstyle.filter || "") .replace (/alpha/([^)] */)/, "") + "alpha (opacidad =" + valor * 100 + ")";
} else if (name === "Float") {
Elem.style [es decir? "stylefloat": "cssfloat"] = valor;
}demás{
name = name.replace (/-([AZ])/IG, function (All, Letter) {
devolución de letra.ToUpperCase ();
});
Elem.style [nombre] = valor;
}
}
}, estilo);
};
win.setattr = function (dom, attr) {
if (typeof attr! == 'objeto')
devolver;
para (nombre var en attr)
dom.SetAttribute (nombre, attr [nombre]);
}
var slice = array.prototype.slice;
win.bind = function (objeto, diversión) {
var args = slice.call (argumentos) .slice (2);
Función de retorno () {
return fun.apply (objeto, args);
};
};
win.bindaseVentListener = function (objeto, diversión, args) {
var args = slice.call (argumentos) .slice (2);
función de retorno (evento) {
return divers.apply (objeto, [evento || win.event] .concat (args));
}
};
win.extend = function () {
var objetivo = argumentos [0] || {}, i = 1, longitud = argumentos.length, profundo = true, opciones;
if (typeof Target === "Boolean") {
profundo = objetivo;
objetivo = argumentos [1] || {};
i = 2;
}
if (typeof Target! == "Object" && object.prototype.tostring.call (target)! = "[función de objeto]")
objetivo = {};
para (; i <longitud; i ++) {
if ((opciones = argumentos [i])! = nulo)
para (nombre var en opciones) {
var src = target [name], copy = options [name];
if (Target === Copy)
continuar;
if (profundo && copy && typeof Copy === "Object" &&! Copy.nodeType) {
Target [name] = arguments.callee (profundo, src || (copy.length! = null? []: {}), copiar);
}
más if (copia! == Undefined)
objetivo [nombre] = copia;
}
}
objetivo de retorno;
};
win.class = function (propiedades) {
var _class = function () {
return (argumentos [0]! == null && this.initialize && typeof (this.initialize) == 'function')
? this.initialize.apply (esto, argumentos)
: este;
};
_class.prototype = propiedades;
return _class;
};
win.each = function (objeto, devolución de llamada, args) {
nombre var, i = 0, longitud = objeto.length;
if (args) {
args = array.prototype.slice.call (argumentos) .slice (2);
if (longitud === indefinido) {
para (nombre en el objeto)
if (callback.apply (objeto [nombre], [nombre, objeto [nombre]]. Concat (args)) === Falso)
romper;
} demás
para (; i <longitud; i ++)
if (callback.apply (objeto [i], [i, objeto [i]]. concat (args)) === falso) //
romper;
} demás {
if (longitud === indefinido) {
para (nombre en el objeto)
if (callback.call (objeto [nombre], nombre, objeto [nombre]) === falso)
romper;
} demás
for (valor var = objeto [0];
i <longitud && callback.call (valor, i, valor)! == falso; valor = objeto [++ i]) {}
}
Objeto de retorno;
};
win.currentStyle = function (elemento) {
Elemento de retorno. CurrentStyle || doc.defaultView.getComputedStyle (elemento, nulo);
};
win.objpos = function (elem) {
var izquierda = 0, top = 0, derecha = 0, fondo = 0, doc = elem? Elem.OwnerDocument: doc;
if (! Elem.getBoundingClientRect || win.sys.ie8) {
var n = elem;
while (n) {izquierda += n.offsetleft, top += n.offsettop; n = N.OffSetParent; };
derecho = izquierda + elem.offsetWidth; Bottom = Top + Elem.Offsetheight;
} demás {
var rect = elem.getBoundingClientRect ();
izquierda = derecha = doc.documentelement.scrollleft || doc.body.scrollleft;
top = fondo = doc.documentelement.scrollleft || doc.body.scrollleft;
izquierda += rect.left; derecho += rect.right;
top += rect.top; Bottom += rect.bottom;
}
return {"izquierda": izquierda, "superior": superior, "derecha": derecha, "fondo": fondo};
};
win.contains = function (k, j) {
return document.comparedOcumentPosition
? K.comParedOcumentPosition (J) y 16
: k! == j && k.contains (j);
};
win.hasclass = function (elemento, classname) {
return element.classname.match (new Regexp ('(// s |^)'+classname+'(// s | $)');
};
win.addclass = function (elemento, classname) {
if (! win.hasclass (elemento, classname))
element.classname.replace (// s/g, '') === ''
? element.classname = classname
: elemento.classname+= ""+classname;
};
win.removeclass = function (elemento, classname) {
win.hasclass (elemento, classname) && (element.classname = element.classname.replace (new regexp ('(// s*|^)'+classname+'(// s*| $)'), ''));
}
})(documento);
(función (doc, indefinido) {
var win = esto,
uuid = -1;
/*
Compruebe si hay una clave en la cadena
Si lo hay y la clave es seguida por - return - algo después, de lo contrario, devuelve verdadero
Sin detección devuelve falso
*/
función checkreg (str, tecla) {
var reg = new Regexp ('(?:^| // s)'+Key+'// b-? (.*?) (?: // s | $)', 'i');
if (reg.exec (str)! = null) {
return regexp. $ 1 === ''? Verdadero: regexp. $ 1;
}demás{
devolver falso;
}
};
/*
Modifique el valor correspondiente a la clave en la cadena
*/
función modificar (str, tecla, valor) {
var reg = new Regexp ('(^| // s) ('+Key+'// b-).*? (// s | $)', 'i');
return str.replace (reg, '$ 1 $ 2'+valor+'$ 3');
};
win.easygrid = new class ({
Opciones: {
Perpage: 10,
CurrPage: 0,
TotalPage: 0,
Conde: 10,
Página: 0,
isedit: falso,
WidthConfig: {
TD: NULL,
Prevtd: NULL,
x: 0,
TDWIDTH: 0,
Anteo previo: 0
},
Cellmin Width: 50,
sorttype: {
int: function (v) {return parseInt (v)},
flotante: function (v) {return parsefloat (v)},
fecha: función (v) {return v.ToString ()},
string: function (v) {return v.ToString ()}
},
Título: 'Título'
},
inicializar: function (opciones) {
var op = extend (true, {}, this.options),
opciones = this.defaults = extender (op, opciones),
contenedor = this.container = $ c ('div', options.container),
dataconfig = options.dataconfig,
title = $ C ('div', contenedor);
Container.classname = 'Container';
title.innerhtml = options.title;
title.classname = 'title';
this.PrimaryKey = options.PrimaryKey;
this.top = $ c ('div', contenedor);
this.top.classname = 'bar';
this.top.innerhtml = '<div> <a href = "javascript :;" Page = "Inicio"> </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> <div> <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 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 datos, y un total de una pieza de datos, y un total de un dato,
var tabcontainer = this.tabContainer = $ c ('div', contenedor);
this.bottom = $ c (this.top.clonenode (true), contenedor);
tabcontainer.classname = 'tabcontainer';
tabcontainer.style.height = ~~ options.container.offsetheight - 83+'px';
var tabla = this.table = $ c ('tabla', tabcontainer);
table.classname = 't_a';
setattr (table, {cellPadding: "0", CellPacing: "0", borde: "0"});
this.tead = $ c ('cabeza', tabla);
this.tbody = $ c ('tbody', tabla);
this.tbody.style.display = 'None';
//cargando
this.loading_bg = $ c ('div', contenedor);
this.loading_bg.classname = 'cargar';
setstyle (this.loading_bg, {
Ancho: Container.OffSetWidth+2+'Px',
Altura: Container.Offsetheight+2+'PX'
});
this.loading = $ c ('div', contenedor);
this.loading.classname = 'LoadDiv'
setstyle (this.loading, {
Izquierda: (Container.OffSetWidth/2-45) + 'PX',
Arriba: (Container.OffSetheight/2-14) + 'PX'
});
this.loading.innerhtml = '<div> Carga ... </div>';
// ¿Cuántas columnas hay en la tabla?
this.colcount = options.fields.length;
// El formulario de fuente de datos es [[], [], [], [], []]
this.data = [];
// Todos los formularios de encabezado de agrupación en la fuente de datos solicitada actualmente son [TRDOT1, TROD2]
this.groufead = [];
// Registre el TR [TR1, TR2, TR3] del grupo que se ha insertado en la tabla
this.inserttrs = [];
// índice de columna
// Formulario [[TD11, TD12, TD13, TD14], [TD21, TD22, TD23, TD24]]
this.columns = [];
// Verdadero significa orden positivo falso significa orden inverso
this.ascsort = true;
// Guardar qué columna está clasificando el encabezado TD
this.sortColumn = '';
// Todas las filas TR si no hay forma de agrupación [TR1, TR2, TR3, TR4]
// Si hay agrupación [[TR1, TR2, TR3, TR4], [TR5, TR6, TR7, TR8]]
this.rows = [];
// Menú de nivel 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"> Downward </a> </li> <li> <a href = "javascript :;" Menutype = "columnas"> Todas las columnas </a> </li> </ul> ';
// crear un submenú
this.subpopmenu = $ c ('div', doc.body);
this.subpopmenu.classname = 'submenu';
// Si está abierta la capa emergente de primer nivel del encabezado de la mesa. Si se abre, guarde el TD
this.ismituOpen = false;
// Guardar si una columna en todas las columnas se muestra o oculta el número como contador para ver cuántas columnas hay.
// El formato cierra: [verdadero, falso, verdadero, verdadero] La columna 1,3,4 muestra la segunda columna oculta
this.isshowtrs = {
NUM: 0,
Clos: []
};
// Crear la línea de base que se muestra al arrastrar
this.line = $ c ('div', doc.body);
this.line.classname = 'línea';
// Guardar línea
// Las cantidades incrementales de Atributo UUID son como {1: DOM, 2: DOM}
this.selectedRows = {};
// Guardar la última fila seleccionada
this.lastselectrow = {dom: null, index: null};
this.Currententitrow = {índice: 0, DOM: NULL};
this.EditData = [];
this.editform = $ c ('div', tabcontainer) ;;
setStyle (this.EditForm, {
Posición: 'Absoluto',
Pantalla: 'Ninguno',
'Z-índice': '120'
});
this.Edittable = $ C ('Tabla', this.EditForm);
setattr (this.Edittable, {
CellPacing: '0',
CellPadding: '0',
Border: '0'
});
var btnc = $ c ('div', this.editform);
btnc.classname = 'editBtn';
btnc.style.textalign = 'Center';
btnc.innerhtml = '<iv> <a do = "Subt" href = "javaScript :;"> enviar </a> <a do = "cancelar" href = "javaScript :;"> cancelar </a> </div>';
this.edittable.classname = 'editTable';
var etr = $ c ('tr', $ c ('tbody', this.Edittable));
// Cree una copia de TR porque el nodo se puede copiar directamente cuando TR se genera más tarde
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 = esto,
ul = $ c ('ul', this.subpopmenu),
li;
cada uno (opciones.fields, function (i, o) {
var td = $ c ('td', headtr),
ancho = o.width? O.Width: '80 ',
div = i === 0? '<Viv>': '<div> <p> </p>';
td.innerhtml = [div, '<span>', o.name, '</span> <a href = "javascript :;"> </a> </div>']. Join ('');
setattr (td, {Clos: i, ancho: ancho, sin selección: 'on', 'class': o.type === Undefined? '': 'Tipo-'+O.Type});
self.createInput (I, O, ETR);
twidth = twidth + (~~ ancho);
li = $ c ('li', ul);
li.innerhtml = [
'<a href = "javascript :;" > <input type = "checkbox" checked = "true" cols = "',
i,
'"/>',
O.Name,
'</a>'
].unirse('');
// Cree el primer elemento de cada columna en el índice de columna
self.columns [i] = [td];
$ c ('td', self.copytr) .setTribute ('no selectable', 'on');
// Calcule el índice de columna y el número total de columnas num
self.isshowtrs.num ++;
self.isshowtrs.clos [i] = true;
});
setattr (this.table, {ancho: twidth+options.fields.length+1})
// Generar el TR en el Tbody solo genera TR según Perpage. Es un elemento de configuración que muestra cuántos datos están disponibles actualmente.
var i = 0,
trslen = options.perpage,
frag = doc.createDocumentFragment (),
arr = new Array (options.fields.length),
tr,
tds;
para (; i <trslen; i ++) {
tr = this.copytr.clonenode (true);
tds = $ q ('td', tr);
cada uno (arr, function (i) {
// Generar todos los elementos del índice de columna
self.columns [i] .push (tds [i]);
});
$ C (TR, frag);
}
this.tbody.appendchild (frag);
if (typeof dataConFig === 'objeto') {
setTimeOut (function () {self.getDataCallback (dataConFig);}, 5);
}demás{
}
/*
Arrastrar la mesa
Clasificación de mesa
Espere algunas operaciones
*/
addListener (this.tread, 'hacer clic', bindaseVentListener (this, this.sorttable));
addListener (this.tead, 'mouseover', bindaseVentListener (this, this.teandover));
addListener (this.tead, 'mouseOut', bindaseVentListener (this, this.teadout));
addListener (this.tead, 'Mousedown', bindaseVentListener (this, this.dragWidth));
/*
Atar eventos de clic de capa emergente para clasificar
Nivel 2 Menú vinculado para ocultar la columna
*/
addListener (this.popmenu, 'hacer clic', bindaseVentListener (this, this.minuclick));
AddListener (this.popmenu, 'rouseover', bindaseVentListener (this, this.MenUover));
addListener (this.subpopmenu, 'hacer clic', bindaseVentListener (this, this.submenuclick));
/*
Pon las hileras de la mesa y vuelve más gruesa
*/
AddListener (this.tbody, 'mouseMove', bindaseVentListener (this, this.rowhighlight, verdadero));
addListener (this.tbody, 'mouseOut', bindaseVentListener (this, this.rowhighlight, falso));
AddListener (this.tbody, 'Mousedown', bindaseVentListener (this, this.selectrow, false));
addListener (this.tbody, 'dblClick', bindaseVentListener (this, this.editrow, falso));
addListener (btnc, 'hacer clic', bindaseVentListener (this, this.modifytr));
addListener (this.top, 'hacer clic', bindaseVentListener (this, this.pagebarclick));
addListener (this.bottom, 'hacer clic', bindaseVentListener (this, this.pagebarclick));
},
getDataCallback: function (data) {
Var Opciones = this.defaults,
Self = esto,
totla = 0;
this.data.length = 0;
if (data.data) {
if (data.data [0] .GroupName) {
var groufead = this.groufead;
Groufead.length = 0;
cada uno (datos data, función (i, o) {
var gtr = self.grouptr.clonenode (true);
$ q ('td', gtr) [0] .innerhtml = o.groupname;
Groufead.push (GTR);
cada uno (o.rows, función (j, d) {
// El último elemento de datos en this.data es índice
d.push (i);
self.data.push (d);
});
});
this.showGroup = true;
}demás{
cada uno (datos data, función (i, o) {
self.data.push (o);
});
this.showGroup = false;
}
}demás{
devolver;
}
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 = 'None';
devolver;
}
var i = 0,
j = 0,
Self = esto,
data = this.data,
opciones = 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) {
grupo var = {},
Índice,
arr = [],
insertTrs = this.inserttrs;
// borrar el grupo TR previamente insertado
insertTrs.length! = 0 && cada uno (insertRs, function (i, o) {
self.tbody.removechild (o);
});
insertTrs.length = 0;
// transferir los datos de relleno a esto.
var num = - 1;
para (; i <trslen; i ++) {
tr = trs [i];
// Si no hay datos, comience a ocultar las filas restantes
if (! data [i+start]) {
tr.style.display = 'Ninguno';
continuar;
}
// hacer la etiqueta TR que los datos en los datos corresponden a
tr.SetAttribute ('dataindex', i+start);
tr.style.display = 'bloque';
tds = tr.getElementsBytagName ('td');
// x es la identificación de diferentes grupos de grupos en el grupo
var x = data [i+start] [datos [i+inicio] .length-1];
// utilizado para determinar si los datos posteriores y los datos anteriores están en el mismo grupo
// Si es el mismo grupo, agregue la última columna de esto.
// crear una columna que no sea el mismo grupo
num == x
? this.rows [this.rows.length-1] .push (tr)
: (this.rows [this.rows.length] = [tr], num = x);
// Use la matriz ARR para recordar la posición del primer TR de cada grupo porque el encabezado TR I se inserta más tarde en el número de posición es el número de secuencia del grupo.
! (num en grupo) && (grupo [num] = i + start, arr.push ([num, i]));
para (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 = '';
}
cada uno (arr.reverse (), function (i, o) {
insertTrs.push (self.groufoad [o [0]]);
self.tbody.insertbefore (self.groufoad [o [0]], trs [o [1]]);
});
}demás{
para (; i <trslen; i ++) {
tr = trs [i];
// hacer la etiqueta TR que los datos en los datos corresponden a
tr.SetAttribute ('dataindex', i+start);
this.rows.push (tr);
// ocultar el TR sin datos
if (! data [i+start]) {
tr.style.display = 'Ninguno';
continuar;
}
tr.style.display = '';
tds = $ q ('td', tr);
para (j = 0; j <tdslen; j ++) {
var txt = data [i+start] [j] === '' '' ': data [i+start] [j];
render = options.fields [j] .render;
tds [j] .innerhtml = render
? Render (txt)
:TXT;
}
}
}
opciones.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 === Opciones.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';
}demás{
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 = 'Ninguno';
this.loading.style.display = 'None';
},
WriteMessage: function (total) {
Var Opciones = this.defaults,
base = total/opciones.perpage,
topspans = this.top.getElementsBytagName ('span'),
BottomSpans = this.bottom.getElementsBytagName ('span');
opciones.totalPage = base> parseint (base)
? parseint (base) +1
: base;
BottomSpans [0] .innerhtml = topspans [0] .innerhtml = ~~ opciones.currpage+1;
BottomSpans [1] .innerhtml = topspans [1] .innerhtml = options.totalPage;
BottomSpans [2] .innerhtml = topspans [2] .innerhtml = options.perpage;
Bottomspans [3] .innerhtml = topspans [3] .innerhtml = total;
},
sorttable: function (e) {
var elem = e.target || E.Sricelement,
Self = esto,
opciones = this.defaults,
elemname = elem.nodename.tolowercase (),
showgroup = this.showGroup,
tdelem = elem,
nombre = Elemname;
// Haga clic puede activarse al arrastrar. La razón es que todos los códigos bajo IE están vinculados a esto. Ver arrastrar y soltar.
if ($ q ('td', elem) .length> 1)
devolver;
if (name! == 'td') {
while (nombre! == 'td') {
tdelem = tdelem.ParentNode;
name = tdelem.nodename.tolowerCase ();
}
}
var issort = checkreg (tdelem.classname, 'sort'),
type = checkreg (tdelem.classname, 'type')
//Clasificar
if (elemname! == 'a' && type) {
var fragment = doc.createDocumentFragment ();
if (this.sortColumn! == tdelem && this.sortColumn! == '') {
removeclass (this.sortcolumn, 'sort-as');
removeclass (this.sortcolumn, 'sort -desc');
}
if (issort) {
// Hay agrupaciones, cada grupo se invertirá por separado y no se agrupará, y se invertirá directamente.
showgroup
? cada uno (this.rows, function (i, o) {o.reverse ();})
: this.rows.reverse ();
tdelem.classname = modify (tdelem.classname, 'sort', issort === 'asc'? 'descr': 'asc');
}demás{
showgroup
? cada uno (this.
o.sort (self.compare (tdelem.getAttribute ('cerrado'), type));
})
: this.rows.sort (this.comPARE (tdelem.getAttribute ('Clos'), type));
// Si se clasifica en un orden positivo, agregue la bandera del orden positivo.
if (this.ascsort) {
addClass (tdelem, 'sort-as');
}demás{
// La clasificación inversa invertirá la clasificación original y agregará el indicador de clasificación
showgroup
? cada uno (this.rows, function (i, o) {o.reverse ();})
: this.rows.reverse ();
addClass (tdelem, 'sort -desc');
}
}
// representar los datos ordenados en una tabla
var insertTrs = this.inserttrs,
len = insertTrs.length-1,
arr = [];
cada uno (this.rows, función (i, tr) {
arr = [insertTrs [len-i]]. concat (tr);
showgroup
? Cada (arr, function (idx, obj) {frag.appendChild (obj);})
: frag.appendchild (tr);
});
this.tbody.appendchild (frag);
this.sortColumn = tdelem;
}
// ---------------------------------------------------------------------------------
/*
Si hace clic en la etiqueta en el encabezado, aparecerá un menú
*/
if (elemname === 'a') {
/*
Al hacer clic fuera del menú, cambiar la función se ejecutará
Se utiliza para borrar la capa oculta del evento de clic del documento para eliminar el estilo de TD y un
*/
función documentClick () {
self.popmenu.style.display = 'ninguno';
self.subpopmenu.style.display = 'ninguno';
if (self.ismituopen) {
removelistener (documento, 'hacer clic');
removeclass ($ q ('div', self.ismituopen) [0], 'headfocus');
$ q ('a', self.ismituopen) [0] .style.display = 'ninguno';
}
self.isMenuopen = false;
}
var pos = objpos (elem),
izquierda = 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 este.ismituOpen es verdadero, la capa está abierta y se realiza la ejecución del procesamiento estrecho.
this.ismituOpen && documentClick ();
if (! checkreg (td.classname, 'type')) {
addClass (lis [0], 'discapacitado');
addClass (lis [1], 'discapacitado');
}demás{
removeClass (lis [0], 'discapacitado');
removeclass (lis [1], 'discapacitado');
}
Sys.ie
? E.CancelBubble = True
: e.stoppropagation ();
// Al mostrar la capa, el TD está unido a esto.
this.ismituOpen = td;
addListener (documento, 'hacer clic', documentClick);
setStyle (this.popmenu, {
Izquierda: izquierda+'PX',
TOP: TOP+'PX',
Pantalla: 'Bloque'
});
}
},
Comparar: function (n, type) {
var sorttype = this.defaults.sorttype,
txt = sys.ie? 'InnteText': 'TextContent';
! sortype [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.Sracelement;
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))
devolver;
//如果离开了当前的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();
devolver;
}
//如果a标签的menuType
var menuOp = elem.getAttribute('menuType'),
sortOrder = checkReg(className,'sort');
//选择所有列不进行排序
if(menuOp==='columns')
devolver;
/*
如果没有排序就根据menuOp来进行排序
如果已排序且与menuOp排序方式不同则进行排序
*/
if(sortOrder){
if(menuOp != sortOrder){
var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
fireEvent(td,'click');
}
}demás{
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.Sracelement;
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 ? '' : 'ninguno';
//如果还剩一列并且这次是取消选中的
//则不执行隐藏
if(this.isShowTrs.num===1&&!checked){
input.checked = true;
return false;
}
Comprobado
?(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 () {
Comprobado
? 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'))
devolver;
//如果是分组的行tr 就返回
if(elem.nodeName.toLowerCase()==='td'&&parent.getAttribute('g')==='y')
devolver;
isHight
? addClass(parent,'rowfocus')
: removeClass(parent,'rowfocus');
},
selectRow : function(e){
var elem = e.target || E.Sracelement;
if(elem.getAttribute('g')||elem.parentNode.getAttribute('g'))
devolver;
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;
}demás{
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);
}demás{
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.Sracelement;
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)
devolver;
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);
!tipo
&&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'))
devolver;
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',
mostrar : ''
});
each(cTds,function(i,td){
$q('input',pTds[i])[0].value = td[txt];
});
},
modifyTr : function(e){
var elem = e.target || E.Sracelement;
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';
}
}
});
})(documento);
window.onload = function(){
var data ={
//total:'55',
datos : []
}
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,
datos : [
{
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',
campos : [
{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',
campos : [
{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>
水平有限请多指教