DataGrid simples
1. Método de classificação personalizada
2.Edit
3. Arraste e arraste
4. Paginação
5. Seleção linear de múltipla escolha de escolha única (CTRL) (turno)
6. A renderização de texto é colorir o texto, por exemplo, maior que 0, vermelho ou menor que 0, verde
7. ocultar a tela da coluna
8. Agrupamento
Apenas um exemplo sem desculpas com o fundo
Na verdade, você pode apenas escrever alguns retornos de chamada. Há uma barra de carregamento dentro que pode ser exibida até que o resultado seja retornado.
A cópia do código é a seguinte:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> tabela </title>
<style type = "text/css">
*{margem: 0; preenchimento: 0;}
.h {altura da linha: 20px;}
.c {zoom: 1;}
.c: após {content: "."; exibição: bloco; altura: 0; claro: ambos; Visibilidade: Hidden;}
.l {float: esquerda;}
.r {float: direita;}
Ul {estilo de lista: nenhum;}
.demo {width: 832px; Altura: 400px; tamanho da fonte: 12px; margem: 20px automático; Posição: relativa}
.demo .m_a {margem-direita: 8px;}
.Demo .Nobreak {White-Space: Keep-All;*Espaço Branco: Normal; Texto-Overflow: Ellipsis; Overflow: Hidden; Altura: 22px; Largura: 100%;}
.Demo .Container {
borda: 1px Solid #99BBE8;
Altura: Auto;
}
.demo .i_a {borda: 1px sólido #ccc; margin-top: 2px;}
.demo .t_a {borda-left: 1px Solid #99BBE8; Border-Bottom: 1px Solid #99BBE8;}
.demo .t_a td {background-color: #fff; borda-direita: 1px sólido #ccc; border-top: 1px sólido #ccc;}
.DEMO TABLE TD {
altura da linha: 22px;
Altura: 20px;
}
.Demo tabela tead .headfocus {
Antecedentes: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repetição 0 -163px;
}
.DEMO TABLE THEAD TD {
estouro: oculto;
}
.demo .t_a tbody td {preenchimento-left: 8px;}
.demo .title {altura: 24px; altura da linha: 22px; Peso da fonte: negrito; Potding-Left: 20px; Cor:#666666; Antecedentes: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) Repésteas 0 -300px;}
.Demo .Bar {_display: Inline-Block; altura da linha: 20px; Altura: 20px; Top de borda: 1px Solid #99BBE8; Antecedentes: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repetição 0 -350px; preenchimento: 2px 0 2px 20;}
.demo .f_a {color:#3b526e; font-peso: negrito;}
.demo .first_div, .demo .prev_div, .demo .next_div, .demo .last_div, .demo .first_div_no, .demo .prev_div_no, .demo .nenT_Div_No, .Demo. .last_div_no{float:left;width:18px;height:16px;margin-top:3px;cursor:pointer;display:block;margin-right:5px;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) sem repetir}
.demo .first_div {posição de fundo: -12px -58px;}
.demo .first_div_no {posição de fundo: 4px -58px; cursor: normal}
.Demo .Prev_Div {Posição de fundo: -11px -78px;}
.demo .prev_div_no {posição de fundo: 5px -78px; cursor: normal}
.Demo .Next_Div {Posição de fundo: -65px -78px;}
.demo .next_div_no {posição de fundo: -49px -78px; cursor: normal}
.demo .last_div {posição de fundo: -67px -58px;}
.demo .last_div_no {posição de fundo: -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) sem repetição; largura: 45px; alinhamento de texto: centro; altura: 20px; cor:#333; exibição: bloco; decoração de texto: nenhum; float: esquerda;}
.demo .delbtn {posição de fundo: -55px 0;}
.demo .delbtn: hover {posição de fundo: -55px -30px; cor:#666}
.demo tabela {
tamanho de fonte: 12px;
Layout da tabela: corrigido;
-moz-user-select: -moz-none;
-Webkit-user-select: Nenhum;
-khtml-user-select: nenhum;
}
.demo .tabContainer {
largura: 99%;
Overflow: Auto;
preenchimento: 2px 0 0 2px;
Background-Color:#fffbf7;
Posição: relativa;
}
.Demo tabela tead td {Background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) Repé -mesmo 0 -100px;}
.DEMO TABLE THEAD A {
Z-Index: 1000;
Background-Color:#C3DAF9;
Antecedentes-Imagem: URL ("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png");
Exibir: Nenhum;
Largura: 12px;
Altura: 22px;
Posição de fundo: 0 -234px;
Posição: Absoluto;
topo: 0;
Direita: 0;
}
.DEMO TABLE THEAD DIV {Posição: relativa; Z-Index: 1;}
.DEMO TABLE THEAD P {
Largura: 1px;
Altura: 22px;
Background-Color:#99BBE8;
flutuar: esquerda;
exibição: bloco;
Cursor: e-ressente;
Margem-direita: 2px;
}
.demo tabela tr.trfocus td {
Background-Color:#EBF2FB
}
.Demo div tabela, .demo div tabela tr, .demo div tabela tr td {
-moz-user-select: -moz-none;
-Webkit-user-select: Nenhum;
}
.demo tabela tr td {background-color: #fff; estouro: oculto; Fluxo de text-overflow: elipsis; Espaço Branco: Nowrap;}
.demo .loading {Posição: Absoluto; Z-Index: 9999; Esquerda: 0; TOP: 0; Antecedentes:#e5e5e5; filtro: alfa (opacidade = 50); opacidade: 0,5; -moz-opacidade: 0,5; -khtml-opacidade: 0,5;}
.demo .loaddiv{position:absolute;z-index:99999;width:98px;height:28px;border:1px solid #6593cf;background:#fff url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -300px; preenchimento: 2px;}
.demo .loadgif {background: #fff url (imagens/carreging_small.gif) sem repetir 4px 5px; preenchimento: 5px 0 0 27px; largura: 68px; altura: 21px; borda: 1px Solid #6593CF;}
.demo .loadText {color:#000;}
.Demo .Edittable {Border: 1px Solid #C4C4C4;}
.Demo .Edittable td {Background:#ebf2fb; altura: 24px;}
.demo .editbtn {preenchimento: 5px; largura: 100px; margem: 0 auto; fundo: #ebf2fb; borda: 1px Solid #C4C4C4; Border-top: Nenhum;}
.demo .delbtn, .ajaxtable .delbtn: hover {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) sem repetição; largura: 45px; alinhamento de texto: centro; altura: 20px; cor:#333; exibição: bloco; decoração de texto: nenhum; float: esquerda;}
.demo .delbtn {posição de fundo: -55px 0;}
.demo .delbtn: hover {posição de fundo: -55px -30px; cor:#666}
.demo .btn_a, .ajaxtable .btn_a: hover {cursor: pointer; fundo: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) sem repetição; text-align: centro; top de preenchimento: 5px; largura: 45px; altura: 17px; exibição: bloco; float: esquerda; cursor: ponteiro; decoração de texto: nenhum;}
.demo .btn_a {posição de fundo: 0 0; cor:#333;}
.demo .btn_a: hover {posição de fundo: 0 -30px; cor:#666;}
.sort-asc .head_span {
Altura: 12px; Largura: 24px;
exibição: bloco;
flutuar: esquerda;
Right-right: 18px;
Antecedentes: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No -repeat Right -423px;
}
.head_span {float: esquerda; altura da linha: 22px; display: block;}
.sort-desc .head_span {
Altura: 12px; Largura: 24px;
exibição: bloco;
flutuar: esquerda;
Right-right: 18px;
Antecedentes: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No -repeat Right -391px;
}
.x-menu {
Posição: Absoluto;
Antecedentes: URL (MENU.GIF) Repita-Y #f0f0f0;
borda: 1px sólido #718bb7;
Largura: 134px;
Exibir: Nenhum;
}
.x-menu .Disabled a {
Cor:#999;
}
.x-menu-list {preenchimento: 2px; estouro: oculto; margem: 0;}
.x-menu-list li {preenchimento: 1px; Espaço branco: Nowrap; Altura: 20px;}
.x-menu-list li.focus {backround:#09f;}
AX-Menu-item {
exibição: bloco;
Cursor: Ponteiro;
altura de linha: 18px;
Altura: 20px;
contorno-cor: -moz-use-text-color;
estilo de esboço: nenhum;
largura de esboço: 0;
Largura: 100px;
preenchimento-esquerda: 27px;
Posição: relativa;
Decoração de texto: Nenhum;
Espaço branco: Nowrap;
tamanho de fonte: 12px;
Cor:#222;
}
ax-m_a {preenchimento-esquerda: 8px; largura: 120px;}
Entrada de Ax-Menu-Item {Margin-Right: 8px}
AX-Menu-ito: Hover {Background-Color:#D9E8FB}
.asc {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No -repeat -53px -218px;}
.desc {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No -repeat -53px -243px;}
.Columns {Background: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No -repeat -53px -268px;}
.submenu {
Posição: Absoluto;
Index z: 1500;
Antecedentes:#f0f0f0;
borda: 1px sólido #718bb7;
Largura: 134px;
Exibir: Nenhum;
}
.x-menu-list .child-menu {Background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-re-Right -444px;}
ax-m_a {preenchimento-esquerda: 8px; largura: 120px;}
Entrada de Ax-Menu-Item {Margin-Right: 8px}
AX-Menu-ito: Hover {Background-Color:#D9E8FB}
.linha{
largura: 1px; cor de fundo: #cccccc; posição: absoluto; exibição: nenhum; Index z: 100;
}
.vermelho{
Cor:#FF0000;
}
.ambição{
Cor:#33FF00;
}
</style>
</head>
<Body>
1. Método de classificação personalizada
<br>
2.Edit
<br>
3. Arraste e arraste
<br>
4. Paginação
<br>
5. Seleção linear de múltipla escolha de escolha única (CTRL) (turno)
<br>
6. A renderização de texto é colorir o texto, por exemplo, maior que 0, vermelho ou menor que 0, verde
<br>
7. ocultar a tela da coluna
<br>
8. Agrupamento
<br>
<div id = 'Demo' class = 'Demo'> </div>
<br> <br> O seguinte está agrupado e há um método de classificação personalizado que é bom, geralmente pobre <br> <br>
<div id = 'Demo1' class = 'Demo'> </div>
<script type = "text/javascript">
(função (doc, indefinido) {
var win = this;
win.sys = função (ua) {
var b = {
ou seja: /msie/.test(ua) &&! /opera/.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 em b) {
if (b [i]) {vmark = "safari" == i? "Versão": i; quebrar; }
}
B.Version = vmark && regexp ("(?:" + vmark + ") [///:] ([// d.] +)"). Teste (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;
retornar b;
} (win.navigator.userragent.tolowerCase ());
win.sys.ie6 && doc.execCommand ("BackgroundImagecache", false, verdadeiro);
win. $$ = function (id) {
Retornar tipo de id === 'string'
? doc.getElementById (id)
: eu ia;
};
win. $ q = função (nome, pai) {
return parent.getElementsByTagName (nome);
}
win. $ c = função (nome, pai) {
var elem = tipoof nome === 'objeto'? Nome: doc.createElement (nome);
pai && parent.appendchild (elem);
retornar elem;
};
win.addlistener = função (elemento, e, fn) {
! Element.events && (element.events = {});
element.events [e] && (element.events [e] [addListener.guid ++] = fn) || (element.events [e] = {'0': fn});
element.AddeventListener? Element.AddeventListener (e, fn, false): element.attachevent ("on" + e, fn);
};
win.addlistener.guid = 1;
win.removelistener = function (elemento, e, fn) {
var manipuladores = element.events [e], tipo;
if (fn) {
para (digite os manipuladores)
if (manipuladores [tipo] === fn) {
Element.RemoveEventListener? Element.RemoveEventListener (E, Fn, False): Element.Detachevent ("On" + E, Fn);
excluir manipuladores [tipo];
}
}outro{
para (tipo de manipuladores) {
element.RemoveEventListener? Element.RemoveEventListener (E, Handlers [Type], False): Element.Detachevent ("On" + E, Handlers [Type]);
excluir manipuladores [tipo];
}
}
};
win.fireeEvent = função (elemento, eventname) {
if (element [eventName]) {
elemento [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 = função (elems, estilo, valor) {
if (! elems.length) elems = [elems];
if (typeof style == "string") {
style = value === indefinido? {csStext: style} :( function (o) {
return (o [estilo] = valor, o);
}) ({});
};
cada (elems, função (i, elem, estilo) {
Valor, nome, ou seja, sys.ie;
para (nome em estilo) {
valor = estilo [nome];
if (nome === "opacidade" && ie) {
elem.style.filter = (elem.currentstyle.filter || "") .Regupline (/alpha/([^)] */)/, "") + "alpha (opacity =" + valor * 100 + ")";
} else if (nome === "float") {
elem.style [ie? "stylefloat": "cssfloat"] = value;
}outro{
name = name.Replace (/-([AZ])/ig, function (all, letra) {
retorno letra.TOUPPERCASE ();
});
elem.style [nome] = value;
}
}
}, estilo);
};
win.setattr = function (dom, att) {
if (typeof att! == 'objeto')
retornar;
para (Var Nome em Att)
dom.setAtattribute (nome, att [nome]);
}
var slice = array.prototype.slice;
win.bind = function (objeto, diversão) {
var args = slice.call (argumentos) .Slice (2);
Return function () {
retornar divertido.Apply (objeto, args);
};
};
win.bindaseventListener = function (objeto, diversão, args) {
var args = slice.call (argumentos) .Slice (2);
Função de retorno (evento) {
return Fun.Apply (Object, [Event || win.event] .Concat (args));
}
};
win.extend = function () {
VAR Target = Argumentos [0] || {}, i = 1, comprimento = argumentos.Length, Deep = true, opções;
if (typeof alvo === "boolean") {
Deep = Target;
Target = argumentos [1] || {};
i = 2;
}
if (typeof Target! == "Object" && Object.prototype.toString.Call (Target)! = "[Função do objeto]"))
Target = {};
para (; i <comprimento; i ++) {
if ((opções = argumentos [i])! = nulo)
para (Var Nome in Options) {
var src = Target [nome], copy = options [nome];
if (Target === cópia)
continuar;
if (Deep && cópia && typeof cópia === "object" &&! copy.nodetype) {
Target [nome] = argumentos.Callee (Deep, src || (copy.length! = null? []: {}), copy);
}
caso contrário, se (cópia! == indefinido)
Target [nome] = cópia;
}
}
alvo de retorno;
};
win.class = function (propriedades) {
var _class = function () {
return (argumentos [0]! == null && this.initialize && typeof (this.initialize) == 'function')
? this.initialize.apply (isto, argumentos)
: esse;
};
_class.prototype = Propriedades;
retornar _class;
};
win.each = function (objeto, retorno de chamada, args) {
Var nome, i = 0, comprimento = object.Length;
if (args) {
args = array.prototype.slice.call (argumentos) .slice (2);
if (comprimento === indefinido) {
para (nome em objeto)
if (callback.apply (objeto [nome], [nome, objeto [nome]]. concat (args)) === false)
quebrar;
} outro
para (; i <comprimento; i ++)
if (retorno de chamada.apply (objeto [i], [i, objeto [i]]. concat (args)) === false) //
quebrar;
} outro {
if (comprimento === indefinido) {
para (nome em objeto)
if (retorno de chamada.call (objeto [nome], nome, objeto [nome]) === false)
quebrar;
} outro
for (var value = objeto [0];
i <comprimento && callback.call (valor, i, valor)! == false; valor = objeto [++ i]) {}
}
objeto de retorno;
};
win.currentStyle = function (elemento) {
Return Element.CurrentStyle || doc.defaultView.getComputedStyle (elemento, null);
};
win.objpos = function (elem) {
var esquerdo = 0, topo = 0, direita = 0, inferior = 0, doc = elem? Elem.wnerdocument: Doc;
if (! elem.getBoundingClientRect || win.sys.ie8) {
var n = elem;
while (n) {esquerda += n.offsetLeft, top += n.offsettop; n = n.offsetParent; };
direita = esquerda + elem.offsetWidth; Bottom = top + elem.offsetHeight;
} outro {
var ret = elem.getBoundingClientRect ();
Esquerda = direita = doc.documentElement.scrollleft || doc.body.scrollleft;
Top = Bottom = doc.documentElement.scrollleft || doc.body.scrollleft;
esquerda += ret.left; à direita += rect.right;
top += ret.top; inferior += rect.bottom;
}
retornar {"esquerda": esquerda, "top": top, "direita": direita, "inferior": inferior};
};
win.contains = function (k, j) {
retorno document.comparedocumentPosition
? k.comparedocumentPosition (j) e 16
: k! == j && k.contains (j);
};
win.hasclass = function (elemento, className) {
Return element.className.match (novo regexp ('(// s |^)'+className+'(// s | $)'));
};
win.addclass = function (elemento, className) {
if (! win.hasclass (elemento, className))
element.className.replace (// s/g, '') === '' '
? Element.className = ClassName
: element.className+= ""+ClassName;
};
win.removeclass = function (elemento, classe) {
win.hasclass (elemento, classe) && (element.className = element.classname.replace (new regexp ('(// s*|^)'+className+'(// s*| $)'), ''));
}
})(documento);
(função (doc, indefinido) {
var win = this,
uuid = -1;
/*
Verifique se há uma chave na string
Se houver e a chave for seguida por - retornar - algo depois retornará true
Nenhum retorno de detecção falso
*/
função checkreg (str, chave) {
var reg = novo regexp ('(?:^| // s)'+key+'// b-? (.*?) (?: // s | $)', 'i');
if (reg.exec (str)! = null) {
retornar regexp. $ 1 === ''? True: regexp. $ 1;
}outro{
retornar falso;
}
};
/*
Modificar o valor correspondente à chave na string
*/
função modificar (str, chave, valor) {
var reg = novo regexp ('(^| // s) ('+key+'// b-).*? (// s | $)', 'i');
retornar str.place (reg, '$ 1 $ 2'+valor+'$ 3');
};
win.easyGrid = nova classe ({
Opções: {
Perpagem: 10,
CurrPage: 0,
TotalPage: 0,
CONTA: 10,
Página: 0,
isedit: false,
WidthConfig: {
TD: NULL,
prevtd: nulo,
x: 0,
tdwidth: 0,
PrevWidth: 0
},
CellminWidth: 50,
Sorttype: {
int: function (v) {return parseint (v)},
float: function (v) {return parsefloat (v)},
Data: function (v) {return v.toString ()},
String: function (v) {return v.toString ()}
},
Título: 'Título'
},
inicializar: function (opções) {
var op = estend (true, {}, this.options),
opções = this.defaults = estend (op, opções),
contêiner = this.container = $ c ('div', options.container),
dataconfig = options.dataconfig,
title = $ c ('div', contêiner);
container.className = 'contêiner';
title.innerhtml = options.title;
title.className = 'title';
this.PrimaryKey = options.PrimaryKey;
this.top = $ c ('div', contêiner);
this.top.className = 'bar';
this.top.innerhtml = '<div> <a href = "javascript :;" Page = "Iniciar"> </a> <a href = "Javascript :;" Page = "Next"> </a> <div> <div> <input type = "text"/> </div> <div> </div> <a href = "javascript :;" Page = "pré"> </a> <a href = "Javascript :;" página = "end"> </a> <div> <a href = "javascript:;" go = "go"> pular </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 dados, e um total de uma parte de dados, e um total de uma peça de dados,
var tabContainer = this.tabContainer = $ c ('div', contêiner);
this.bottom = $ c (this.top.clonEnode (true), contêiner);
tabContainer.className = 'TabContainer';
tabContainer.style.Height = ~~ options.container.offsetHeight - 83+'px';
var tabela = this.table = $ c ('tabela', tabContainer);
tabela.className = 't_a';
setAtTr (tabela, {CellPadding: "0", CellPacing: "0", Border: "0"});
this.tead = $ c ('cabeça', tabela);
this.tbody = $ c ('tbody', tabela);
this.tbody.style.display = 'nenhum';
//carregando
this.loading_bg = $ c ('div', contêiner);
this.loading_bg.classname = 'carregamento';
setStyle (this.loading_bg, {
Largura: Container.OffSetWidth+2+'PX',
Altura: contêiner.offsetheight+2+'px'
});
this.loading = $ c ('div', contêiner);
this.loading.className = 'loadDiv'
setStyle (this.loading, {
Esquerda: (container.offsetWidth/2-45) + 'px',
TOP: (Container.OffSetHeight/2-14) + 'PX'
});
this.loading.innerhtml = '<div> carregando ... </div>';
// quantas colunas existem na tabela
this.colcount = options.fields.length;
// O formulário da fonte de dados é [[], [], [], [], []]
this.data = [];
// Todos os formulários de cabeçalho de agrupamento na fonte de dados atualmente solicitados são [TROM1, TROM2]
this.Grouphead = [];
// Registre o TR [TR1, TR2, TR3] do grupo que foi inserido na tabela
this.inserttrs = [];
// Índice de coluna
// forma [[TD11, TD12, TD13, TD14], [TD21, TD22, TD23, TD24]]
this.columns = [];
// true significa ordem positiva falsa significa ordem reversa
this.ASCSort = true;
// Salvar qual coluna está classificando o cabeçalho TD
this.sortColumn = '';
// Todas as linhas TR se não houver forma de agrupamento [Tr1, Tr2, Tr3, Tr4]
// Se houver agrupamento [[TR1, TR2, TR3, TR4], [TR5, TR6, TR7, TR8]]
this.rows = [];
// Menu Nível 1
this.popmenu = $ c ('div', doc.body);
this.popmenu.className = 'x-men';
this.popmenu.innerhtml = '<ul> <li> <a href = "javascript:;" Menutype = "ASC"> ASC </a> </li> <li> <a href = "javascript:;" Menutype = "desc"> para baixo </a> </li> <li> <a href = "javascript:;" menutype = "colunas"> todas as colunas </a> </li> </ul> ';
// Crie um submenu
this.subpopmenu = $ c ('div', doc.body);
this.subpopmenu.className = 'submenu';
// Se a camada pop-up de primeiro nível do cabeçalho da tabela está aberta. Se for aberto, salve o TD
this.ismenuopen = false;
// Salve se uma coluna em todas as colunas é exibida ou oculta Num como um contador para ver quantas colunas existem.
// Formato fecha: [True, False, True, True] Coluna 1,3,4 mostra a segunda coluna oculta
this.ISSHOWTRS = {
num: 0,
Clos: []
};
// Crie a linha de base exibida ao arrastar
this.line = $ c ('div', doc.body);
this.line.className = 'line';
// Salvar linha
// quantidades incrementais de atributo uuid são como {1: dom, 2: dom}
this.selectedRows = {};
// salvar a última linha selecionada
this.LastSelectrow = {dom: null, índice: null};
this.curententitrow = {index: 0, dom: null};
this.editdata = [];
this.editform = $ c ('div', tabContainer) ;;
setStyle (this.editform, {
Posição: 'Absoluto',
exibição: 'nenhum',
'Z-Index': '120'
});
this.edittable = $ c ('tabela', this.editform);
setattr (this.edittable, {
Capacing Cell: '0',
CellPadding: '0',
fronteira: '0'
});
var btnc = $ c ('div', this.editform);
btnc.className = 'editbtn';
btnc.style.TexTalign = 'Center';
btnc.innerhtml = '<div> <a do = "submeter" href = "javascript :;"> submeter </a>
this.edittable.className = 'Edittable';
var eR = $ c ('tr', $ c ('tbody', this.edittable));
// Crie uma cópia do TR porque o nó pode ser copiado diretamente quando o TR é gerado posteriormente
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,
eu = isso,
ul = $ c ('ul', this.subpopmenu),
li;
cada (options.fields, function (i, o) {
var td = $ c ('td', headtr),
largura = O.Width? O.Width: '80 ',
div = i === 0? '<div>': '<div> <p> </p>';
td.innerhtml = [div, '<pan>', o.name, '</span> <a href = "javascript :;"> </a> </div>']. junção ('');
setattr (td, {clos: i, largura: largura, não selecionável: 'on', 'classe': o.type === indefinido? '': 'type-'+o.type});
self.createInput (i, O, ETR);
twidth = twidth + (~~ largura);
li = $ c ('li', ul);
li.innerhtml = [
'<a href = "javascript:;" > <input type = "caixa de seleção" checked = "true" cols = "',
eu,
'"/>',
O.Nome,
'</a>'
].juntar('');
// Crie o primeiro item de cada coluna no índice da coluna
self.columns [i] = [td];
$ c ('td', self.copytr) .setAttribute ('não selecionado', 'on');
// Calcule o índice da coluna e o número total de colunas num NUM
self.ISShowtrs.num ++;
self.ISSHOWTRS.CLOS [i] = true;
});
setAtTtr (this.table, {width: twidth+options.fields.length+1})
// Gere o TR no Tody apenas gera TR de acordo com a Perpage. É um item de configuração que mostra quantos dados estão disponíveis no momento.
var i = 0,
TRSLEN = options.perpage,
frag = doc.createDocumentfragment (),
arr = nova matriz (options.fields.length),
tr,
TDS;
para (; i <trslen; i ++) {
tr = this.copytr.cloneNode (true);
TDS = $ Q ('TD', TR);
cada (arr, função (i) {
// Gere todos os itens do índice da coluna
self.columns [i] .push (tds [i]);
});
$ c (tr, frag);
}
this.tbody.appendChild (frag);
if (typeof dataconfig === 'objeto') {
setTimeout (function () {self.getDatacallback (dataconfig);}, 5);
}outro{
}
/*
Arraste a tabela
Classificação de mesa
Espere por algumas operações
*/
addListener (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.dragwidth));
/*
Amarre os eventos de clique da camada pop-up para classificar
Ligação do menu de nível 2 para ocultar a coluna
*/
addListener (this.popmenu, 'click', bindaseventListener (this, this.menuclick));
addListener (this.popmenu, 'mouseOver', bindaseventListener (this, this.menuover));
addListener (this.subpopmenu, 'click', bindaseventListener (this, this.submenuclick));
/*
Coloque as linhas de mesa e fique mais espesso
*/
addListener (this.tbody, 'mousemove', bindaseventListener (this, this.rowhighlight, true));
addListener (this.tbody, 'mouseout', bindaseventListener (this, this.rowhighlight, false));
addListener (this.tbody, 'mousedown', bindaseventListener (this, this.Selectrow, false));
addListener (this.tbody, 'dblClick', bindaseventListener (this, this.editrow, false));
addListener (btnc, 'click', bindaseventListener (this, this.modifytr));
addListener (this.top, 'click', bindaseventListener (this, this.pageBarClick));
addListener (this.bottom, 'click', bindaseventListener (this, this.pageBarClick));
},
getDatacallback: function (dados) {
var options = this.defaults,
eu = isso,
totla = 0;
this.data.length = 0;
if (data.data) {
if (data.data [0] .groupName) {
var grouphead = this.Grouphead;
grouphead.length = 0;
cada (data.data, função (i, o) {
var gtr = self.grouptr.ClonEnode (true);
$ Q ('TD', GTR) [0] .innerhtml = O.GroupName;
grouphead.push (GTR);
cada (o.rows, função (j, d) {
// o último item de dados neste.data é índice
d.push (i);
self.data.push (d);
});
});
this.showgroup = true;
}outro{
cada (data.data, função (i, o) {
self.data.push (O);
});
this.showgroup = false;
}
}outro{
retornar;
}
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 = 'nenhum';
retornar;
}
var i = 0,
j = 0,
eu = isso,
dados = this.data,
opções = 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 = {},
Índice,
arr = [],
inserttrs = this.insertTrs;
// limpe o grupo TR anteriormente inserido
inserttrs.length! = 0 && cada (inserttrs, function (i, o) {
self.tbody.RemoveChild (O);
});
inserttrs.length = 0;
// transfira os dados de preenchimento para este.rows
var num = - 1;
para (; i <trslen; i ++) {
tr = trs [i];
// Se não houver dados, comece a esconder as linhas restantes
if (! dados [i+start]) {
tr.style.display = 'nenhum';
continuar;
}
// Faça a tag TR cujos dados nos dados correspondem a
tr.SetAtTribute ('DataIndEx', i+Start);
tr.style.display = 'bloco';
tds = tr.getElementsByTagName ('td');
// x é a identificação de diferentes grupos de grupos no grupo
var x = dados [i+start] [dados [i+start] .Length-1];
// usado para determinar se os dados subsequentes e os dados anteriores estão no mesmo grupo
// Se for o mesmo grupo, adicione a última coluna deste.rows
// Crie uma coluna que não seja o mesmo grupo
num == x
? this.rows [this.rows.length-1] .push (tr)
: (this.rows [this.rows.length] = [tr], num = x);
// Use o Array Arr para lembrar a posição do primeiro TR de cada grupo, porque o cabeçalho TR I é inserido posteriormente no número de posição é o número de sequência do grupo.
! (num no grupo) && (grupo [num] = i + start, arr.push ([num, i]));
for (j = 0; j <tdslen; j ++) {
td = tds [j];
var txt = dados [i+start] [j] === '' '?' ': dados [i+start] [j];
render = options.fields [j] .render;
td.innerhtml = render
? renderizar (txt)
:TXT;
}
tr.style.display = '';
}
Cada (arr.Reverse (), função (i, o) {
inserttrs.push (self.grouphead [o [0]]);
self.tbody.insertBefore (self.grouphead [o [0]], trs [o [1]]);
});
}outro{
para (; i <trslen; i ++) {
tr = trs [i];
// Faça a tag TR cujos dados nos dados correspondem a
tr.SetAtTribute ('DataIndEx', i+Start);
this.rows.push (tr);
// Ocultar o TR sem dados
if (! dados [i+start]) {
tr.style.display = 'nenhum';
continuar;
}
tr.style.display = '';
TDS = $ Q ('TD', TR);
for (j = 0; j <tdslen; j ++) {
var txt = dados [i+start] [j] === '' '?' ': dados [i+start] [j];
render = options.fields [j] .render;
tds [j] .innerhtml = render
? renderizar (txt)
:TXT;
}
}
}
options.currPage = pagenum;
this.top.getElementsByTagName ('span') [0] .innerhtml = this.bottom.getElementsByTagName ('span') [0] .innerhtml = ~~ pagenum+1;
var topos = this.top.getElementsByTagName ('a'),
Bottomas = this.bottom.getElementsByTagName ('A');
if (options.totalpage === 1) {
Bottomas [0] .className = topos [0] .className = 'primeiro_div_no';
Bottomas [1] .className = topos [1] .className = 'prev_div_no';
Bottomas [2] .className = topos [2] .className = 'next_div_no';
Bottomas [3] .className = topos [3] .className = 'last_div_no';
} else if (options.currpage === 0) {
Bottomas [0] .className = topos [0] .className = 'primeiro_div_no';
Bottomas [1] .className = topos [1] .className = 'prev_div_no';
Bottomas [2] .className = topos [2] .className = 'next_div';
Bottomas [3] .className = topos [3] .className = 'last_div';
} else if (options.currpage+1 === options.totalpage) {
Bottomas [0] .className = topos [0] .className = 'primeiro_div';
Bottomas [1] .className = topos [1] .className = 'prev_div';
Bottomas [2] .className = topos [2] .className = 'next_div_no';
Bottomas [3] .className = topos [3] .className = 'last_div_no';
}outro{
Bottomas [0] .className = topos [0] .className = 'primeiro_div';
Bottomas [1] .className = topos [1] .className = 'prev_div';
Bottomas [2] .className = topos [2] .className = 'next_div';
Bottomas [3] .className = topos [3] .className = 'last_div';
}
this.tbody.style.display = '';
this.loading_bg.style.display = 'nenhum';
this.loading.style.display = 'nenhum';
},
WriteMessage: function (total) {
var options = this.defaults,
base = total/options.perpage,
Topspans = this.top.getElementsByTagName ('span'),
Bottomspans = this.bottom.getElementsByTagName ('span');
options.totalpage = base> parseint (base)
? Parseint (base) +1
: base;
Bottomspans [0] .innerhtml = topsPans [0] .innerhtml = ~~ options.currPage+1;
Bottomspans [1] .innerhtml = topsspans [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.srcelement,
eu = isso,
opções = this.defaults,
elememe = elem.nodename.tolowercase (),
showGroup = this.showgroup,
tdelem = elem,
nome = elemam;
// O clique pode ser acionado ao arrastar. O motivo é que todos os códigos do IE estão vinculados a isso. Veja arrastar e soltar.
if ($ q ('td', elem). comprimento> 1)
retornar;
if (nome! == 'td') {
while (nome! == 'td') {
tDelem = tDelem.parentNode;
nome = tdelem.nodename.tolowercase ();
}
}
var Issort = checkreg (tdelem.classname, 'sort'),
type = checkReg (tdelem.classname, 'type')
//Organizar
if (elename! == 'a' && type) {
var fragment = doc.createCumentFragment ();
if (this.sortcolumn! == tDelem && this.sortcolumn! == '') {
removeclass (this.sortcolumn, 'sort-asc');
removeclass (this.sortcolumn, 'sort-desc');
}
if (ISSORT) {
// Existem agrupamentos, cada grupo será invertido separadamente e não agrupado e será invertido diretamente.
ShowGroup
? cada (this.rows, função (i, o) {o.Reverse ();})
: this.Rows.Reverse ();
tdelem.className = modify (tdelem.classname, 'sort', isSort === 'ASC'? 'Desc': 'ASC');
}outro{
ShowGroup
? cada (this.rows, função (i, o) {
o.sort (self.compare (tdelem.getAttribute ('clos'), tipo));
})
: this.rows.sort (this.comPare (tdelem.getAttribute ('clos'), tipo));
// Se for classificado em uma ordem positiva, adicione a bandeira da ordem positiva.
if (this.ASCSort) {
addclass (tdelem, 'classy-asc');
}outro{
// A classificação inversa inverte a classificação original e adicionará a bandeira de classificação
ShowGroup
? cada (this.rows, função (i, o) {o.Reverse ();})
: this.Rows.Reverse ();
addclass (tdelem, 'sort-des');
}
}
// renderizar os dados classificados para uma tabela
var inserttrs = this.insertTrs,
len = inserttrs.length-1,
arr = [];
cada (this.rows, função (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;
}
// ---------------------------------------------------------------------------------------
/*
Se você clicar na tag A no cabeçalho, um menu aparecerá
*/
if (elename === 'a') {
/*
Ao clicar fora do menu, altere a função será executado
Usado para limpar a camada oculta do evento de clique do documento para remover o estilo de TD e um
*/
função documentclick () {
self.popmenu.style.display = 'nenhum';
self.subpopmenu.style.display = 'nenhum';
if (self.ismenuopen) {
remoleristener (documento, 'clique');
removeclass ($ q ('div', self.ismenuopen) [0], 'headfocus');
$ q ('a', self.ismenuopen) [0] .style.display = 'nenhum';
}
self.ismenuopen = false;
}
var pos = objpos (elem),
Esquerda = 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);
// Se este.MemSenUopen for verdadeiro, a camada está aberta e a execução do processamento estreita relacionada é realizada.
this.ismenuopen && documentClick ();
if (! checkReg (td.className, 'type')) {
addclass (lis [0], 'desativado');
addclass (lis [1], 'desativado');
}outro{
removeclass (lis [0], 'desativado');
removeclass (lis [1], 'desativado');
}
Sys.ie
? e.cancelbubble = true
: E.StopPropagation ();
// Ao exibir a camada, o TD é anexado a isso.semenuopen
this.ismenuopen = td;
addListener (documento, 'click', documentClick);
setStyle (this.popmenu, {
Esquerda: esquerda+'px',
topo: top+'px',
Exibir: 'Bloco'
});
}
},
Compare: function (n, tipo) {
var sorttype = this.defaults.sorttype,
txt = sys.ie? 'InnerText': 'TextContent';
! Sorttype [type] && (type = 'string');
Função de retorno (A1, A2) {
A1 = SortType [Type] (A1.Cells [n] [txt]);
A2 = SortType [Type] (A2.Cells [n] [txt]);
retornar A1 == A2? 0: A1 <A2? 1: -1;
}
},
PageBarClick: function (e) {
varelem = e.Target || e.srcelement,
opções = this.defaults,
typepage = elem.getAttribute ('página'),
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,
eu = isso,
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))
retornar;
//如果离开了当前的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();
retornar;
}
//如果a标签的menuType
var menuOp = elem.getAttribute('menuType'),
sortOrder = checkReg(className,'sort');
//选择所有列不进行排序
if(menuOp==='columns')
retornar;
/*
如果没有排序就根据menuOp来进行排序
如果已排序且与menuOp排序方式不同则进行排序
*/
if(sortOrder){
if(menuOp != sortOrder){
var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
fireEvent(td,'click');
}
}outro{
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;
return false;
}
Verificado
?(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 () {
Verificado
? 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'))
retornar;
//如果是分组的行tr 就返回
if(elem.nodeName.toLowerCase()==='td'&&parent.getAttribute('g')==='y')
retornar;
isHight
? addClass(parent,'rowfocus')
: removeClass(parent,'rowfocus');
},
selectRow : function(e){
var elem = e.target || e.srcElement;
if(elem.getAttribute('g')||elem.parentNode.getAttribute('g'))
retornar;
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;
}outro{
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);
}outro{
var allRows = [];
//如果有分组个并所有的tr到一个数组
this.showGroup
? each(this.rows, function(i, o){
allRows = allRows.concat(o);
})
: allRows = this.rows;
each(allRows,function(i,o){
if(parent===o){
lastDom = {dom:o,index:i}
return false;
}
});
//清空掉之前所有选中tr的样式
each(selectedRows,function(i,o){
removeClass(o,'trfocus');
removeClass(o,'select-'+i);
delete selectedRows[i];
});
var len = Math.max(lastSelectRow.index,lastDom.index);
for(var i = Math.min(lastSelectRow.index,lastDom.index);i<=len;i++){
selectedRows[++uuid] = allRows[i];
addClass(allRows[i],'trfocus ');
addClass(allRows[i],'select-'+uuid);
}
}
}
//进行单选
if(e.ctrlKey===false&&e.shiftKey===false){
each(selectedRows,function(i,o){
removeClass(o,'trfocus');
removeClass(o,'select-'+i);
delete selectedRows[i];
});
selectedRows[++uuid] = parent;
addClass(parent,'trfocus');
addClass(parent,'select-'+uuid);
if(parent != lastSelectRow.dom)
cellClick=true;
}
// 点击后记录最后点击的行。
if(ctrlClick||cellClick||shiftClick){
var allRows = [];
//如果有分组个并所有的tr到一个数组
this.showGroup
? each(this.rows, function(i, o){allRows = allRows.concat(o);})
: allRows = this.rows;
//寻找parent的索引
each(allRows,function(i,o){
if(o===parent){
self.lastSelectRow.dom = o;
self.lastSelectRow.index = i;
return false;
}
});
}
}
},
dragWidth : function(e){
var elem = e.target || e.srcElement;
if(elem.nodeName.toLowerCase() === "p"){
/*
遍历当前选中的列的前面所有的列
如果没有或全部是隐藏的则返回
*/
for(var i=parseInt(elem.parentNode.parentNode.getAttribute('clos'))-1;i>=0;i--)
if(this.isShowTrs.clos[i]===true)break;
if(i<0)
retornar;
var options = this.defaults,
eu = isso,
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);
!type
&&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,
eu = isso,
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'))
retornar;
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',
display : ''
});
each(cTds,function(i,td){
$q('input',pTds[i])[0].value = td[txt];
});
},
modifyTr : function(e){
var elem = e.target || e.srcElement;
if(elem.nodeName.toLowerCase()==='a'){
var tds = $q('td',this.editTable),
txt = txt =Sys.ie?'innerText':'textContent',
isC = false;
if(elem.getAttribute('do')==='submit'){
alert('索引为'+this.currentEditRow.index)
}
this.editForm.style.display = 'none';
}
}
});
})(document);
window.onload = function(){
var data ={
//total:'55',
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>
水平有限请多指教