Datagrid sederhana
1. Metode Penyortiran Kustom
2.Edit
3. Seret dan Seret
4. Pagination
5. Pemilihan linier pilihan ganda pilihan tunggal (CTRL) (Shift)
6. Render teks adalah mewarnai teks, misalnya, lebih besar dari 0, merah atau kurang dari 0, hijau
7. Sembunyikan tampilan kolom
8. Grouping
Hanya contoh tanpa alasan dengan latar belakang
Bahkan, Anda bisa menulis beberapa panggilan balik. Ada bilah pemuatan di dalam yang dapat ditampilkan sampai hasilnya dikembalikan.
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> tabel </iteme>
<type style = "text/css">
*{margin: 0; padding: 0;}
.h {line-height: 20px;}
.c {zoom: 1;}
.c: setelah {konten: "."; Tampilan: Blok; Tinggi: 0; jelas: keduanya; Visibilitas: tersembunyi;}
.l {float: left;}
.r {float: right;}
ul {List-style: none;}
.demo {lebar: 832px; Tinggi: 400px; font-size: 12px; Margin: 20px Auto; Posisi: relatif}
.demo .m_a {margin-right: 8px;}
.demo .nobreak {spasi putih: Keep-all;*White-space: normal; teks-overflow: ellipsis; overflow: tersembunyi; tinggi: 22px; lebar: 100%;}
.demo .container {
Perbatasan: 1px solid #99bbe8;
Tinggi: otomatis;
}
.demo .i_a {border: 1px solid #ccc; margin-top: 2px;}
.demo .t_a {border-left: 1px solid #99bbe8; border-bottom: 1px solid #99bbe8;}
.demo .t_a td {background-color: #fff; border-right: 1px solid #ccc; border-top: 1px solid #ccc;}
.demo tabel td {
Line-Height: 22px;
Tinggi: 20px;
}
.demo Table Thead .HeadFocus {
Latar Belakang: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) Ulangi -x 0 -163px;
}
.demo Table thead td {
meluap: tersembunyi;
}
.demo .t_a tbody td {padding-left: 8px;}
.demo .title {height: 24px; Line-Height: 22px; font-weight: tebal; Padding-left: 20px; Warna:#666666; Latar Belakang: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ulangi-x 0 -300px;}
.demo .bar {_display: inline-block; line-height: 20px; Tinggi: 20px; Border-top: 1px solid #99bbe8; Latar Belakang: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ulangi -x 0 -350px; Padding: 2px 0 2px 20px;}
.demo .f_a {color:#3b526e; font-weight: bold;}
.demo .first_div, .demo .prev_div, .demo .next_div, .demo .last_div, .demo .first_div_no, .demo .prev_div_no, .demo .next_div_no, .demo .next. .LAST_DIV_NO {float: left; lebar: 18px; tinggi: 16px; margin-top: 3px; kursor: pointer; display: blok; margin-right: 5px; latar belakang: url (http://images.cnblogs.com/cnblogs_com/wtcsy/2944444444444
.demo .first_div {latar belakang -posisi: -12px -58px;}
.demo .first_div_no {latar belakang -posisi: 4px -58px; kursor: normal}
.demo .prev_div {latar belakang-posisi: -11px -78px;}
.demo .prev_div_no {latar belakang posisi: 5px -78px; kursor: normal}
.demo .next_div {latar belakang-posisi: -65px -78px;}
.demo .next_div_no {latar belakang-posisi: -49px -78px; kursor: normal}
.demo .last_div {latar belakang-posisi: -67px -58px;}
.demo .last_div_no {latar belakang-posisi: -51px -58px; kursor: normal}
.demo .rowfocus td {latar belakang-warna:#ebf2fb}
.demo .delbtn, .demo .delbtn: hover {latar belakang: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat; Width: 45px; Text-Align: Center; Tinggi: 20px; Warna:#333; Tampilan: Blok; Teks-Dekorasi: Tidak Ada; Float: Left;}
.demo .delbtn {latar belakang posisi: -55px 0;}
.demo .delbtn: hover {latar belakang-posisi: -55px -30px; warna:#666}
Tabel .demo {
font-size: 12px;
tabel-tabel: diperbaiki;
-Moz-user-select: -Moz-none;
-webkit-user-select: tidak ada;
-khtml-user-select: tidak ada;
}
.demo .tabContainer {
Lebar: 99%;
meluap: otomatis;
padding: 2px 0 0 2px;
latar belakang-warna:#fffbf7;
Posisi: kerabat;
}
.demo Table thead td {latar belakang: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ulangi -x 0 -100px;}
.demo tabel itu {
z-index: 1000;
Latar Belakang-Color:#C3DAF9;
latar belakang-image: url ("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png");
Tampilan: Tidak Ada;
Lebar: 12px;
Tinggi: 22px;
posisi latar belakang: 0 -234px;
Posisi: Absolute;
TOP: 0;
Kanan: 0;
}
.demo tabel itu div {position: relatif; z-index: 1;}
.demo Table thead p {
Lebar: 1px;
Tinggi: 22px;
latar belakang-warna:#99bbe8;
float: kiri;
Tampilan: Blok;
Kursor: E-Ressize;
margin-kanan: 2px;
}
.demo tabel tr.trfocus td {
Latar Belakang-Color:#EBF2FB
}
.Demo Div Tabel, .Demo Div Tabel Tr, .Demo Div Table Tr Td {
-Moz-user-select: -Moz-none;
-webkit-user-select: tidak ada;
}
.demo tabel tr td {latar belakang-warna: #fff; meluap: tersembunyi; teks-overflow: ellipsis; spasi putih: nowrap;}
.demo .Loading {position: absolute; z-index: 9999; kiri: 0; atas: 0; latar belakang:#e5e5e5; filter: alpha (opacity = 50); opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5;}
.demo .LoadDiv {position: absolute; z-index: 99999; lebar: 98px; tinggi: 28px; Border: 1px solid #6593cf; latar belakang: #fff url (http://images.cnblogs.com/cnblogs_com/wtcsy/294 -300px; padding: 2px;}
.demo .loadgif {latar belakang: #fff url (gambar/loading_small.gif) no-repeat 4px 5px; Padding: 5px 0 0 27px; Lebar: 68px; Tinggi: 21px; Border: 1px Solid #6593cf;}
.demo .LoadText {Color:#000;}
.demo .edittable {border: 1px solid #c4c4c4;}
.demo .edittable td {latar belakang:#ebf2fb; tinggi: 24px;}
.demo .editbtn {padding: 5px; lebar: 100px; margin: 0 auto; latar belakang: #ebf2fb; border: 1px solid #c4c4c4; border-top: none;}
.demo .delbtn, .ajaxtable .delbtn: hover {latar belakang: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat; Width: 45px; Text-Align: Center; Tinggi: 20px; Warna:#333; Tampilan: Blok; Teks-Dekorasi: Tidak Ada; Float: Left;}
.demo .delbtn {latar belakang posisi: -55px 0;}
.demo .delbtn: hover {latar belakang-posisi: -55px -30px; warna:#666}
.demo .btn_a, .Ajaxtable .btn_a: hover {kursor: pointer; latar belakang: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat; Text-Align: Center; Padding-Top: 5px; Lebar: 45px; Tinggi: 17px; Tampilan: Blok; Mengapung: Kiri; Kursor: Pointer; Teks-Dekorasi: Tidak Ada;}
.demo .btn_a {latar belakang posisi: 0 0; warna:#333;}
.demo .btn_a: hover {latar belakang posisi: 0 -30px; warna:#666;}
.sort-asc .head_span {
Tinggi: 12px; Lebar: 24px;
Tampilan: Blok;
float: kiri;
Padding-Right: 18px;
Latar Belakang: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_Ajaxtable.png) No -Repeat Right -423px;
}
.head_span {float: left; line-height: 22px; display: block;}
.sort-desc .head_span {
Tinggi: 12px; Lebar: 24px;
Tampilan: Blok;
float: kiri;
Padding-Right: 18px;
Latar Belakang: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_Ajaxtable.png) No -Repeat Right -391px;
}
.x-menu {
Posisi: Absolute;
Latar belakang: url (menu.gif) ulangi-y #f0f0f0;
Perbatasan: 1px solid #718bb7;
Lebar: 134px;
Tampilan: Tidak Ada;
}
.x-menu .disabled {
Warna:#999;
}
.x-menu-list {padding: 2px; meluap: tersembunyi; margin: 0;}
.x-menu-list li {padding: 1px; SPACE PUTIH: Nowrap; Tinggi: 20px;}
.x-menu-list li.focus {backround:#09f;}
Ax-menu-item {
Tampilan: Blok;
kursor: pointer;
Line-Height: 18px;
Tinggi: 20px;
outline-color: -Moz-use-text-color;
Garis besar: tidak ada;
Garis Besar: 0;
Lebar: 100px;
Padding-left: 27px;
Posisi: kerabat;
Dekorasi Teks: Tidak Ada;
SPACE PUTIH: Nowrap;
font-size: 12px;
Warna:#222;
}
AX-M_A {padding-left: 8px; lebar: 120px;}
Input AX-MENU-ITEM {margin-right: 8px}
Ax-menu-item: Hover {latar belakang-warna:#d9e8fb}
.asc {latar belakang: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -rePeat -53px -218px;}
.desc {latar belakang: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -rePeat -53px -243px;}
.columns {latar belakang: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -rePeat -53px -268px;}
.submenu {
Posisi: Absolute;
z-index: 1500;
Latar Belakang:#F0F0F0;
Perbatasan: 1px solid #718bb7;
Lebar: 134px;
Tampilan: Tidak Ada;
}
.x-menu-list .child--u {latar belakang: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-rePeat right -444px;}
AX-M_A {padding-left: 8px; lebar: 120px;}
Input AX-MENU-ITEM {margin-right: 8px}
Ax-menu-item: Hover {latar belakang-warna:#d9e8fb}
.garis{
Lebar: 1px; latar belakang-warna: #cccccc; Posisi: absolute; tampilan: tidak ada; z-index: 100;
}
.merah{
Warna:#FF0000;
}
.ketamakan{
Warna:#33ff00;
}
</tyle>
</head>
<body>
1. Metode Penyortiran Kustom
<br>
2.Edit
<br>
3. Seret dan Seret
<br>
4. Pagination
<br>
5. Pemilihan linier pilihan ganda pilihan tunggal (CTRL) (Shift)
<br>
6. Render teks adalah mewarnai teks, misalnya, lebih besar dari 0, merah atau kurang dari 0, hijau
<br>
7. Sembunyikan tampilan kolom
<br>
8. Grouping
<br>
<Div id = 'Demo' class = 'Demo'> </div>
<br> <br> Berikut ini dikelompokkan dan ada metode penyortiran khusus yang baik, umumnya buruk <br> <br>
<Div id = 'Demo1' class = 'Demo'> </Div>
<type skrip = "Teks/JavaScript">
(function (doc, tidak terdefinisi) {
var win = ini;
win.sys = function (ua) {
var b = {
yaitu: /msie/.test(ua) &&! /opera/.test (ua),
opera: /Opera/.test(ua),
safari: /webkit/.test(ua) &&! /chrome/.test (ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
}, vmark = "";
untuk (var i in b) {
if (b [i]) {vmark = "safari" == i? "Versi": i; merusak; }
}
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;
kembali b;
} (win.navigator.useragent.tolowercase ());
win.sys.ie6 && doc.execCommand ("latar belakangImagecache", false, true);
menang. $$ = function (id) {
return typeof id === 'string'
? doc.geteLementById (id)
: pengenal;
};
menang. $ q = function (name, parent) {
return parent.geteLementsbyTagname (name);
}
menang. $ c = function (name, parent) {
var elem = typeof name === 'objek'? Nama: doc.createelement (name);
Parent && Parent.AppendChild (Elem);
mengembalikan elem;
};
win.addlistener = function (elemen, 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 (elemen, e, fn) {
var handlers = element.events [e], type;
if (fn) {
untuk (ketik penangan)
if (handlers [type] === fn) {
element.removeeventlistener? element.removeeventlistener (e, fn, false): element.detachevent ("on" + e, fn);
Hapus penangan [tipe];
}
}kalau tidak{
untuk (ketik penangan) {
element.removeeventlistener? element.removeeventlistener (e, penangan [type], false): element.detachevent ("on" + e, penangan [type]);
Hapus penangan [tipe];
}
}
};
win.fireevent = function (elemen, eventName) {
if (elemen [eventName]) {
elemen [eventName] ();
} lain if (element.fireevent) {
element.fireevent ('on'+eventName);
} lain if (doc.createevent) {
var evt = doc.createEvent ("mouseEvents");
evt.Initevent (eventName, true, true);
element.dispatchevent (evt);
}
};
win.setstyle = fungsi (elem, gaya, nilai) {
if (! elems.length) elems = [elems];
if (typeof style == "string") {
style = value === tidak terdefinisi? {csstext: style} :( fungsi (o) {
return (o [style] = value, o);
}) ({});
};
masing -masing (elem, function (i, elem, style) {
nilai var, nama, yaitu = sys.ie;
untuk (nama dalam gaya) {
value = style [name];
if (name === "opacity" && ie) {
elem.style.filter = (elem.currentstyle.filter || "") .replace (/alpha/([^)] */)/, "") + "alpha (opacity =" + nilai * 100 + ")";
} else if (name === "float") {
elem.style [yaitu? "stylefloat": "cssfloat"] = nilai;
}kalau tidak{
name = name.replace (/-([az])/ig, function (all, letter) {
Surat pengembalian.touppercase ();
});
elem.style [name] = value;
}
}
}, gaya);
};
win.setAttr = function (dom, attr) {
if (typeof attr! == 'objek')
kembali;
untuk (nama var di attr)
dom.setAttribute (name, attr [name]);
}
var slice = array.prototype.slice;
win.bind = function (objek, menyenangkan) {
var args = slice.call (argumen) .slice (2);
return function () {
return fun.apply (objek, args);
};
};
win.bindaseventListener = fungsi (objek, menyenangkan, args) {
var args = slice.call (argumen) .slice (2);
return function (event) {
return fun.apply (objek, [event || win.event] .concat (args));
}
};
win.extend = function () {
var target = argumen [0] || {}, i = 1, panjang = argumen.length, deep = true, opsi;
if (typeOf target === "boolean") {
Deep = Target;
target = argumen [1] || {};
i = 2;
}
if (typeOf target! == "objek" && object.prototype.toString.call (target)! = "[fungsi objek]")
target = {};
untuk (; i <panjang; i ++) {
if ((options = argumen [i])! = null)
untuk (nama var di opsi) {
var src = target [name], copy = options [name];
if (target === salin)
melanjutkan;
if (deep && copy && typeof copy === "objek" &&! copy.nodetype) {
target [name] = arguments.callee (Deep, src || (copy.length! = null? []: {}), copy);
}
lain jika (salin! == tidak ditentukan)
target [name] = copy;
}
}
target pengembalian;
};
win.class = fungsi (properti) {
var _class = function () {
return (argumen [0]! == null && this.initialize && typeof (this.initialize) == 'function')
? this.initialize.apply (ini, argumen)
: ini;
};
_class.prototype = properti;
mengembalikan _class;
};
win.each = function (objek, callback, args) {
nama var, i = 0, panjang = objek.length;
if (args) {
args = array.prototype.slice.call (argumen) .slice (2);
if (length === tidak terdefinisi) {
untuk (nama dalam objek)
if (callback.apply (objek [name], [name, objek [name]]. concat (args)) === false)
merusak;
} kalau tidak
untuk (; i <panjang; i ++)
if (callback.apply (objek [i], [i, objek [i]]. concat (args)) === false) //
merusak;
} kalau tidak {
if (length === tidak terdefinisi) {
untuk (nama dalam objek)
if (callback.call (objek [nama], name, objek [nama]) === false)
merusak;
} kalau tidak
untuk (var value = objek [0];
i <length && callback.call (value, i, value)! == false; value = objek [++ i]) {}
}
objek pengembalian;
};
win.currentstyle = function (elemen) {
return element.currentstyle || doc.defaultview.getComputedStyle (elemen, null);
};
win.objpos = function (elem) {
var kiri = 0, atas = 0, kanan = 0, bawah = 0, doc = elem? elem.OwnerDocument: DOC;
if (! elem.getBoundingClientRect || win.sys.ie8) {
var n = elem;
while (n) {left += n.offsetleft, top += n.offsettop; n = n.offsetParent; };
kanan = kiri + elem.offsetWidth; bawah = atas + elem.offsetHeight;
} kalau tidak {
var rect = elem.getBoundingClientRect ();
kiri = kanan = doc.documentelement.scrollleft || doc.body.scrollleft;
TOP = BOTTOM = DOC.DocumentElement.Scrollleft || doc.body.scrollleft;
Kiri += Rect.Left; kanan += rect.right;
top += rect.top; Bawah += rect.bottom;
}
return {"kiri": kiri, "atas": atas, "kanan": kanan, "bawah": bawah};
};
win.contains = function (k, j) {
Return Document.ComparedocumentPosition
? K.COMPAREDOCUMENTPOSISI (J) & 16
: k! == j && k.contains (j);
};
win.hasclass = function (elemen, classname) {
return element.classname.match (regexp baru ('(// s |^)'+classname+'(// s | $)'));
};
win.addclass = function (elemen, className) {
if (! win.hasclass (elemen, classname))
element.classname.replace (// s/g, '') === ''
? element.className = className
: element.className+= ""+className;
};
win.removeclass = function (elemen, className) {
win.hasclass (elemen, classname) && (element.classname = element.classname.replace (regexp baru ('(// s*|^)'+className+'(// s*| $)'), ''));
}
})(dokumen);
(function (doc, tidak terdefinisi) {
var win = ini,
uuid = -1;
/*
Periksa apakah ada kunci di string
Jika ada dan kuncinya diikuti oleh - kembali - sesuatu setelah itu jika tidak dikembalikan true
Tidak ada deteksi yang mengembalikan false
*/
function checkreg (str, key) {
var reg = regexp baru ('(?:^| // s)'+key+'// b-? (.*?) (?: // s | $)', 'i');
if (reg.exec (str)! = null) {
return regexp. $ 1 === ''? Benar: regexp. $ 1;
}kalau tidak{
mengembalikan false;
}
};
/*
Ubah nilai yang sesuai dengan kunci dalam string
*/
fungsi memodifikasi (str, tombol, nilai) {
var reg = regexp baru ('(^| // s) ('+key+'// b-).*? (// s | $)', 'i');
return str.replace (reg, '$ 1 $ 2'+nilai+'$ 3');
};
win.easygrid = kelas baru ({
Opsi: {
Perpage: 10,
Currpage: 0,
TotalPage: 0,
Hitungan: 10,
Halaman: 0,
ISEDIT: Salah,
widthconfig: {
TD: NULL,
Prevtd: null,
x: 0,
tdwidth: 0,
Prevwidth: 0
},
Cellminwidth: 50,
sortType: {
int: function (v) {return parseInt (v)},
float: function (v) {return parsefloat (v)},
Tanggal: function (v) {return v.toString ()},
String: function (v) {return v.toString ()}
},
Judul: 'Judul'
},
inisialisasi: fungsi (opsi) {
var op = extend (true, {}, this.options),
opsi = this.defaults = extend (op, opsi),
container = this.container = $ c ('div', option.container),
DataConfig = options.DataConfig,
judul = $ C ('Div', wadah);
container.classname = 'container';
title.innerHtml = options.title;
title.classname = 'title';
this.primarykey = options.primarykey;
this.top = $ c ('div', wadah);
this.top.classname = 'bar';
this.top.innerHtml = '<verv> <a href = "javascript :;" halaman = "start"> </a> <a href = "javascript :;" Page = "NEXT"> </a> <div> <div> <input type = "text"/> </div> <div> </div> <a href = "javascript :;" halaman = "pre"> </a> <a href = "javascript :;" page = "end"> </a> <div> <a href = "javascript :;" go = "go"> lompat </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, dan total satu bagian dari data, dan total satu bagian data, dan total satu bagian data, dan total satu bagian data, dan total satu bagian data, dan total satu bagian dari satu data, dan total satu bagian data, dan total satu bagian data, dan total satu bagian dari data, dan total satu bagian dari satu bagian, dan sebuah bagian dari satu bagian, dan total bagian dari data, dan total satu bagian dari data, dan total satu bagian dari satu bagian, dan total bagian dari data, dan total data, dan total data, dan satu bagian dari data, dan total bagian dari data, dan total data, dan total data, dan total data, dan total data, dan total data, dan satu bagian dari data, dan total data, dan satu bagian dari satu bagian, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total data, dan total, dan total data, dan total satu bagian, dan total satu bagian, dan total, dan total satu bagian, dan total satu bagian, dan total, dan total satu bagian, dan total satu bagian, dan total, dan total satu bagian, dan total satu bagian, dan total satu bagian, dan total, data, dan total satu bagian data, dan total satu bagian data,
var tabcontainer = this.tabContainer = $ c ('div', wadah);
this.bottom = $ c (this.top.clonenode (true), wadah);
tabcontainer.className = 'tabcontainer';
tabcontainer.style.height = ~~ options.container.offsetHeight - 83+'px';
var table = this.table = $ c ('tabel', tabcontainer);
Table.className = 't_a';
setAttr (tabel, {cellPadding: "0", cellpacing: "0", border: "0"});
this.tead = $ c ('head', tabel);
this.tbody = $ c ('tbody', tabel);
this.tbody.style.display = 'none';
//memuat
this.loading_bg = $ c ('div', wadah);
this.loading_bg.classname = 'memuat';
setStyle (this.loading_bg, {
Lebar: container.offsetWidth+2+'px',
Tinggi: wadah.offsetheight+2+'px'
});
this.loading = $ c ('div', wadah);
this.loading.className = 'loadDiv'
setStyle (this.loading, {
Kiri: (container.offsetwidth/2-45) + 'px',
Atas: (container.offsetheight/2-14) + 'px'
});
this.loading.innerHtml = '<div> memuat ... </div>';
// Berapa banyak kolom yang ada di tabel
this.colcount = options.fields.length;
// Formulir Sumber Data adalah [[], [], [], [], []]
this.data = [];
// Semua formulir header pengelompokan di sumber data yang saat ini diminta adalah [trdom1, trdom2]
this.grouphead = [];
// Catat TR [TR1, TR2, TR3] dari kelompok yang telah dimasukkan ke dalam tabel
this.inserttrs = [];
// indeks kolom
// Bentuk [[TD11, TD12, TD13, TD14], [TD21, TD22, TD23, TD24]]
this.columns = [];
// Benar berarti urutan positif palsu berarti urutan terbalik
this.ascsort = true;
// simpan kolom mana yang mengurutkan tajuk td
this.sortColumn = '';
// Semua baris TR jika tidak ada bentuk pengelompokan [TR1, TR2, TR3, TR4]
// Jika ada pengelompokan [[TR1, TR2, TR3, TR4], [TR5, TR6, TR7, TR8]]
this.rows = [];
// Menu Level 1
this.popmenu = $ c ('div', doc.body);
this.popmenu.classname = 'x-menu';
this.popmenu.innerhtml = '<ul> <li> <a href = "javascript :;" menutype = "ASC"> ASC </a> </li> <li> <a href = "javascript :;" menutype = "desc"> ke bawah </a> </li> <li> <a href = "javascript :;" menutype = "kolom"> semua kolom </a> </li> </ul> ';
// Buat submenu
this.subpopmenu = $ c ('div', doc.body);
this.subpopmenu.classname = 'submenu';
// Apakah lapisan pop-up level pertama dari header meja terbuka. Jika dibuka, simpan TD
this.isMenuopen = false;
// Simpan apakah kolom di semua kolom ditampilkan atau NUM tersembunyi sebagai penghitung untuk melihat berapa banyak kolom yang ada.
// Format ditutup: [Benar, Salah, Benar, Benar] Kolom 1,3,4 menunjukkan kolom kedua tersembunyi
this.isshowtrs = {
Num: 0,
Clos: []
};
// Buat garis dasar yang ditampilkan saat menyeret
this.line = $ c ('div', doc.body);
this.line.classname = 'line';
// Simpan baris
// jumlah tambahan atribut UUID adalah seperti {1: dom, 2: dom}
this.selectedRows = {};
// Simpan baris yang dipilih terakhir
this.lastselectrow = {dom: null, index: null};
this.currentitrow = {index: 0, dom: null};
this.editdata = [];
this.editform = $ c ('Div', tabcontainer) ;;
setStyle (this.editform, {
Posisi: 'absolut',
Tampilan: 'tidak ada',
'z-index': '120'
});
this.Edittable = $ c ('Table', this.Editform);
setattr (this.edittable, {
Cellpacing: '0',
Cellpadding: '0',
Perbatasan: '0'
});
var btnc = $ c ('div', this.editform);
btnc.classname = 'editbtn';
btnc.style.textalign = 'center';
btnc.innerHtml = '<div> <a do = "kirim" href = "javascript:;"> kirim </a> <a do = "batal" href = "javascript:;"> Batal </a> </div>';
this.edittable.classname = 'editable';
var etr = $ c ('tr', $ c ('tbody', this.edittable));
// Buat salinan TR karena simpul dapat disalin secara langsung saat TR dihasilkan nanti
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 = ini,
ul = $ c ('ul', this.subpopmenu),
li;
masing -masing (options.fields, function (i, o) {
var td = $ c ('td', headtr),
Lebar = o.width? O.Width: '80 ',
Div = i === 0? '<verv>': '<viv> <p> </p>';
td.innerHtml = [div, '<span>', o.name, '</span> <a href = "javaScript:;"> </a> </div>']. gabung ('');
setattr (td, {clos: i, lebar: lebar, tidak dapat dipilih: 'on', 'class': o.type === tidak ditentukan? '': 'type-'+o.type});
self.createInput (i, o, etr);
twidth = twidth + (~~ lebar);
li = $ c ('li', ul);
li.innerHtml = [
'<a href = "javascript :;" > <input type = "centang kotak" checked = "true" cols = "',
Saya,
'"/>',
O.Name,
'</a>'
].bergabung('');
// Buat item pertama dari setiap kolom di indeks kolom
self.columns [i] = [td];
$ c ('td', self.copytr) .setAttribute ('tidak dapat dipilih', 'on');
// Hitung indeks kolom dan jumlah total kolom num
self.isshowtrs.num ++;
self.isshowtrs.clos [i] = true;
});
setAttr (this.table, {width: twidth+option.fields.length+1})
// Hasilkan TR di TBody hanya menghasilkan TR sesuai dengan Perpage. Ini adalah item konfigurasi yang menunjukkan berapa banyak data yang tersedia saat ini.
var i = 0,
trslen = option.perpage,
frag = doc.createdocumentfragment (),
arr = array baru (options.fields.length),
TR,
TDS;
untuk (; i <trslen; i ++) {
tr = this.copytr.clonenode (true);
tds = $ q ('td', tr);
masing -masing (arr, function (i) {
// Hasilkan semua item dari indeks kolom
self.columns [i] .push (tds [i]);
});
$ C (tr, frag);
}
this.tbody.appendChild (frag);
if (typeOf DataConfig === 'objek') {
setTimeOut (function () {self.getDataCallback (DataConfig);}, 5);
}kalau tidak{
}
/*
Seret meja
Penyortiran meja
Tunggu beberapa operasi
*/
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));
/*
Mengikat acara klik lapisan pop-up untuk penyortiran
Level 2 menu mengikat untuk menyembunyikan kolom
*/
addListener (this.popmenu, 'klik', bindaseventListener (this, this.menuclick));
addListener (this.popmenu, 'mouseover', bindaseventListener (this, this.menuover));
addListener (this.subpopmenu, 'klik', bindaseventListener (this, this.submenuclick));
/*
Kenakan baris meja dan menjadi lebih tebal
*/
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, 'klik', bindaseventListener (this, this.modifytr));
addListener (this.top, 'klik', bindaseventListener (this, this.pagebarclick));
addListener (this.bottom, 'klik', bindaseventListener (this, this.pagebarclick));
},
getDataCallback: function (data) {
var option = this.defaults,
self = ini,
totla = 0;
this.data.length = 0;
if (data.data) {
if (data.data [0] .groupName) {
var grouphead = this.grouphead;
grouphead.length = 0;
masing -masing (data.data, fungsi (i, o) {
var gtr = self.grouptr.clonenode (true);
$ q ('td', gtr) [0] .innerHtml = o.groupName;
grouphead.push (GTR);
masing -masing (o.rows, function (j, d) {
// Item data terakhir dalam this.data adalah indeks
d.push (i);
self.data.push (D);
});
});
this.showgroup = true;
}kalau tidak{
masing -masing (data.data, fungsi (i, o) {
self.data.push (o);
});
this.showgroup = false;
}
}kalau tidak{
kembali;
}
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';
kembali;
}
var i = 0,
j = 0,
self = ini,
data = this.data,
opsi = this.defaults,
trslen = option.perpage,
tdslen = option.fields.length,
tbody = this.tbody,
trs = tbody.geteLementsbyTagname ('tr'),
start = pagenum*options.perpage,
tr;
this.rows.length = 0;
if (this.showgroup) {
var group = {},
Indeks,
arr = [],
inserttrs = this.inserttrs;
// Bersihkan grup TR yang dimasukkan sebelumnya
inserttrs.length! = 0 && masing -masing (inserttrs, function (i, o) {
self.tbody.removechild (o);
});
insertTrs.length = 0;
// Transfer data pengisian ke this.rows
var num = - 1;
untuk (; i <trslen; i ++) {
tr = trs [i];
// Jika tidak ada data, mulailah menyembunyikan baris yang tersisa
if (! data [i+start]) {
tr.style.display = 'none';
melanjutkan;
}
// buat tag tr tag mana data dalam data sesuai
tr.setAttribute ('Dataindex', I+Start);
tr.style.display = 'block';
tds = tr.geteLementsbyTagname ('td');
// x adalah identifikasi berbagai kelompok kelompok dalam kelompok
var x = data [i+start] [data [i+start] .length-1];
// Digunakan untuk menentukan apakah data selanjutnya dan data sebelumnya berada di grup yang sama
// Jika itu adalah grup yang sama, tambahkan kolom terakhir dari ini.
// Buat kolom yang bukan grup yang sama
num == x
? this.rows [this.rows.length-1] .push (tr)
: (this.rows [this.rows.length] = [tr], num = x);
// Gunakan array ARR untuk mengingat posisi TR pertama dari masing -masing kelompok karena header TR i kemudian dimasukkan ke posisi NUM adalah nomor urutan grup.
! (num di grup) && (grup [num] = i + start, arr.push ([num, i]));
untuk (j = 0; j <tdslen; j ++) {
td = td [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 = '';
}
masing -masing (arr.reverse (), function (i, o) {
inserttrs.push (self.grouphead [o [0]]);
self.tbody.insertbefore (self.grouphead [o [0]], trs [o [1]]);
});
}kalau tidak{
untuk (; i <trslen; i ++) {
tr = trs [i];
// buat tag tr tag mana data dalam data sesuai
tr.setAttribute ('Dataindex', I+Start);
this.rows.push (tr);
// Sembunyikan TR tanpa data
if (! data [i+start]) {
tr.style.display = 'none';
melanjutkan;
}
tr.style.display = '';
tds = $ q ('td', tr);
untuk (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;
}
}
}
options.currpage = pagenum;
this.top.getElementsbyTagname ('span') [0] .innerHtml = this.bottom.getElementsbyTagname ('span') [0] .innerHtml = ~~ pagenum+1;
var topas = this.top.getElementsbyTagname ('a'),
bottomas = this.bottom.getElementsbyTagname ('a');
if (options.totalPage === 1) {
Bottomas [0] .className = topas [0] .className = 'first_div_no';
Bottomas [1] .className = topas [1] .className = 'prev_div_no';
Bottomas [2] .className = topas [2] .className = 'next_div_no';
Bottomas [3] .className = topas [3] .className = 'last_div_no';
} lain 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';
} lain if (options.currpage+1 === option.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';
}kalau tidak{
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 = 'none';
this.loading.style.display = 'none';
},
writemessage: function (total) {
var option = this.defaults,
basis = total/option.perpage,
topspans = this.top.geteLementsbyTagname ('span'),
BottomSpans = this.bottom.getElementsByTagname ('span');
Options.totalPage = Base> ParseInt (Base)
? Parseint (base) +1
: basis;
Bottomspans [0] .innerHtml = topspans [0] .innerhtml = ~~ option.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;
},
sortrtable: function (e) {
var elem = e.target || e.srcelement,
self = ini,
opsi = this.defaults,
elemname = elem.nodename.tolowercase (),
showgroup = this.showgroup,
tdelem = elem,
name = elemname;
// Klik dapat dipicu saat menyeret. Alasannya adalah bahwa semua kode di bawah IE terikat pada ini. Lihat Seret dan Jatuhkan.
if ($ q ('td', elem) .length> 1)
kembali;
if (name! == 'td') {
while (name! == 'td') {
tdelem = tdelem.parentnode;
name = tdelem.nodename.tolowercase ();
}
}
var issort = checkreg (tdelem.classname, 'sort'),
type = checkreg (tdelem.classname, 'type')
//Menyortir
if (elemname! == 'a' && type) {
var fragment = doc.createdocumentfragment ();
if (this.sortColumn! == tdelem && this.sortColumn! == '') {
Removeclass (this.sortColumn, 'sort-asc');
Removeclass (this.sortColumn, 'sort-desc');
}
if (issort) {
// Ada pengelompokan, masing -masing grup akan dibalik secara terpisah dan tidak dikelompokkan, dan akan dibalik secara langsung.
Showgroup
? masing -masing (this.rows, function (i, o) {o.reverse ();})
: this.rows.reverse ();
tdelem.classname = ubah (tdelem.classname, 'sort', issort === 'asc'? 'desc': 'asc');
}kalau tidak{
Showgroup
? masing -masing (this.rows, function (i, o) {
o.sort (self.compare (tdelem.getAttribute ('clos'), type));
})
: this.rows.sort (ini.
// Jika diurutkan dalam urutan positif, tambahkan bendera urutan positif.
if (this.ascsort) {
addClass (tdelem, 'sort-iSc');
}kalau tidak{
// penyortiran terbalik akan membalikkan penyortiran asli dan menambahkan bendera penyortiran
Showgroup
? masing -masing (this.rows, function (i, o) {o.reverse ();})
: this.rows.reverse ();
addClass (tdelem, 'sort-desc');
}
}
// render data yang diurutkan ke tabel
var inserttrs = this.inserttrs,
len = inserttrs.length-1,
arr = [];
masing -masing (this.rows, function (i, tr) {
arr = [inserttrs [len-i]]. concat (tr);
Showgroup
? masing -masing (arr, function (idx, obj) {frag.appendChild (obj);})
: frag.AppendChild (TR);
});
this.tbody.appendChild (frag);
this.sortColumn = tdelem;
}
// ---------------------------------------------------------------------------------
/*
Jika Anda mengklik tag A di header, menu akan muncul
*/
if (elemname === 'a') {
/*
Saat mengklik di luar menu, ubah fungsi akan dieksekusi
Digunakan untuk menghapus lapisan klik dokumen Lapisan Tersembunyi untuk menghapus gaya TD dan a
*/
function documentClick () {
self.popmenu.style.display = 'tidak ada';
self.subpopmenu.style.display = 'tidak ada';
if (self.isMenuopen) {
Removelistener (dokumen, 'klik');
Removeclass ($ q ('Div', self.isMenuopen) [0], 'headfocus');
$ q ('a', self.isMenuopen) [0] .style.display = 'none';
}
self.isMenuopen = false;
}
var pos = objpos (elem),
left = pos.left+math.max (document.documentelement.scrollleft, document.documentelement.scrollleft),
top = pos.top +math.max (document.documentelement.scrolltop, document.documentelement.scrolltop) +elem.offsetheight,
td = elem.parentnode.parentnode,
lis = $ q ('li', this.popmenu);
// Jika this.ismenuopen benar, lapisannya terbuka dan pelaksanaan pemrosesan yang berhubungan dengan dekat dilakukan.
this.isMenuopen && documentClick ();
if (! checkreg (td.classname, 'type')) {
addClass (lis [0], 'dinonaktifkan');
addClass (lis [1], 'dinonaktifkan');
}kalau tidak{
RemoveClass (lis [0], 'dinonaktifkan');
removeclass (lis [1], 'dinonaktifkan');
}
Sys.ie
? e.cancelbubble = true
: e.Stoppropagation ();
// Saat menampilkan lapisan, TD melekat pada this.ismenuopen
this.isMenuopen = td;
addlistener (dokumen, 'klik', DocumentClick);
setStyle (this.popmenu, {
Kiri: kiri+'px',
TOP: TOP+'PX',
Tampilan: 'Blok'
});
}
},
Bandingkan: function (n, type) {
var sorttype = this.defaults.sortType,
txt = sys.ie? 'Innertext': 'TextContent';
! sortType [type] && (type = 'string');
fungsi pengembalian (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,
opsi = this.defaults,
typepage = elem.getAttribute ('page'),
isgo = elem.getAttribute ('go');
isDel = elem.getAttribute ('del');
if(typePage){
var number = {
start : 0,
end : options.totalPage-1,
next : options.currPage-1,
pre : options.currPage+1
}[typePage];
this.toPage(number);
}
if(isDel){
this.del();
}
if(isGo){
var number = ~~elem.parentNode.getElementsByTagName('input')[0].value-1;
this.toPage(number);
}
},
toPage : function(num){
if(typeof num !=='number'||isNaN(num))return;
var options = this.defaults,
self = this,
dataConfig = options.dataConfig;
//如果请求的分页数小于0就默认为0 如果打越最大分页数就默认为最大分页数
num>=options.totalPage
&&(num = options.totalPage-1);
num<0&&(num = 0);
//s为当前面板的第一页e为当前面板的最后
var basePage = options.count/options.perPage,
s = options.page*basePage,
e = s + basePage-1;
this.tbody.style.display = 'none';
this.loading_bg.style.display = '';;
this.loading.style.display = '';
setTimeout(function(){self.buildTbody(num);},10);
},
del : function(){
//做删除的时候需要有主键的索引我全部保存在tr的
var selectedRows = this.selectedRows,
arr = []
for(var name in selectedRows){
arr.push(selectedRows[name].getAttribute('dataIndex'));
}
alert('选择了主键值为'+arr.join(','));
},
theadOver : function(e){
var elem = e.target || e.srcElement;
if(elem.nodeName.toLowerCase() === 'div'){
$q('a',elem)[0].style.display = 'block';
addClass(elem,'theadfocus');
}
},
theadOut : function(e){
var elem = e.target || e.srcElement,
toElem = e.toElement||e.relatedTarget,
elemName = elem.nodeName.toLowerCase();
if(this.isMenuOpen && contains(this.isMenuOpen,elem))
kembali;
//如果离开了当前的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();
kembali;
}
//如果a标签的menuType
var menuOp = elem.getAttribute('menuType'),
sortOrder = checkReg(className,'sort');
//选择所有列不进行排序
if(menuOp==='columns')
kembali;
/*
如果没有排序就根据menuOp来进行排序
如果已排序且与menuOp排序方式不同则进行排序
*/
if(sortOrder){
if(menuOp != sortOrder){
var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
fireEvent(td,'click');
}
}kalau tidak{
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 ? '' : 'tidak ada';
//如果还剩一列并且这次是取消选中的
//则不执行隐藏
if(this.isShowTrs.num===1&&!checked){
input.checked = true;
mengembalikan false;
}
checked
?(this.isShowTrs.num++,this.isShowTrs.clos[clos]=true)
:(this.isShowTrs.num--,this.isShowTrs.clos[clos]=false);
//如果实现了分组还必须把组tr的colSpan属性改变
this.showGroup
&&each(this.insertTrs,function(i,tr){
$q('td',tr)[0].setAttribute('colSpan',self.isShowTrs.num);
});
//显示或隐藏选中列
each(this.columns[clos],function(i,o){
o.style.display = hideOrShow;
});
var width = ~~this.columns[clos][0].getAttribute('width');
setTimeout (function () {
checked
? self.table.setAttribute('width',~~self.table.getAttribute('width') + width)
: self.table.setAttribute('width',~~self.table.getAttribute('width') - width)
},0);
}
},
rowHighlight : function(e,isHight){
var elem = e.target || e.srcElement,
toElem = e.toElement||e.relatedTarget,
parent = elem.parentNode;
Sys.ie
? e.cancelBubble = true
: e.stopPropagation();
while(parent.nodeName.toLowerCase()!='tr'){
parent = parent.parentNode;
}
if(isHight&&hasClass(parent,'rowfocus'))
kembali;
//如果是分组的行tr 就返回
if(elem.nodeName.toLowerCase()==='td'&&parent.getAttribute('g')==='y')
kembali;
isHight
? addClass(parent,'rowfocus')
: removeClass(parent,'rowfocus');
},
selectRow : function(e){
var elem = e.target || e.srcElement;
if(elem.getAttribute('g')||elem.parentNode.getAttribute('g'))
kembali;
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;
}kalau tidak{
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);
}kalau tidak{
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}
mengembalikan 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;
mengembalikan 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)
kembali;
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);
!jenis
&&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'))
kembali;
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',
menampilkan : ''
});
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';
}
}
});
})(dokumen);
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>
水平有限请多指教