JavaScript ดั้งเดิมใช้ตารางข้อมูล DataGrid อย่างง่าย

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-05-03 23:16:01

DataGrid ง่ายๆ

1. วิธีการเรียงลำดับแบบกำหนดเอง

2. แก้ไข

3. ลากและลาก

4. การปนเปื้อน

5. ตัวเลือกแบบหลายตัวเลือกแบบตัวเลือกเดียว (CTRL) การเลือกเชิงเส้น (Shift)

6. การแสดงข้อความคือการระบายสีข้อความตัวอย่างเช่นมากกว่า 0, สีแดงหรือน้อยกว่า 0, สีเขียว

7. ซ่อนการแสดงคอลัมน์

8. การจัดกลุ่ม

เป็นเพียงตัวอย่างที่ไม่มีข้อแก้ตัวใด ๆ ที่มีพื้นหลัง

อันที่จริงคุณสามารถเขียนการโทรกลับสองสามครั้ง มีแถบการโหลดภายในที่สามารถแสดงได้จนกว่าผลลัพธ์จะถูกส่งคืน

การคัดลอกรหัสมีดังนี้:

<! doctype html>

<head>

<title> ตาราง </title>

*{มาร์จิ้น: 0; Padding: 0;}

.H {LINE-HEIGHT: 20PX;}

.C {ซูม: 1;}

.C: หลังจาก {เนื้อหา: "."; แสดง: บล็อก; ความสูง: 0; ชัดเจน: ทั้งสอง; ทัศนวิสัย: ซ่อน;}

.l {ลอย: ซ้าย;}

.r {float: ขวา;}

ul {list-style: none;}

.DEMO {WIDTH: 832PX; ความสูง: 400px; ขนาดตัวอักษร: 12px; มาร์จิ้น: 20px auto; ตำแหน่ง: ญาติ}

.DEMO .M_A {มาร์จิ้น-ขวา: 8px;}

คุณ

.Demo .Container {

ชายแดน: 1px Solid #99BBE8;

ความสูง: อัตโนมัติ;

.Demo .i_a {Border: 1px Solid #CCC; margin-top: 2px;}

.DEMO .T_A {ชายแดนซ้าย: 1PX SOLID #99BBE8; ขอบล่าง: 1PX SOLID #99BBE8;}

.DEMO .T_A TD {พื้นหลังสี: #FFF; ชายแดนขวา: 1PX SOLID #CCC; BORNDER-TOP: 1PX SOLID #CCC;}

.demo ตาราง td {

ความสูงของสาย: 22px;

ความสูง: 20px;

.DEMO TABLE THEEAD. HeadFocus {

ความเป็นมา: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repea-x 0 -163px;

.Demo Table Thead TD {

ล้น: ซ่อน;

.DEMO .T_A tbody td {padding-left: 8px;}

.DEMO .TITLE {ความสูง: 24px; ความสูงของสาย: 22px; Font-Weight: ตัวหนา; Padding-Left: 20px; สี:#666666; ความเป็นมา: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ซ้ำ -x 0 -300px;}

.DEMO .BAR {_DISPLAY: Inline-Block; Line-Height: 20PX; ความสูง: 20px; ชายแดนด้านบน: 1px Solid #99BBE8; ความเป็นมา: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ซ้ำ -x 0 -350px; padding: 2px 0 2px 20px;}}}

.DEMO .F_A {สี:#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 .last_div_no {float: ซ้าย; ความกว้าง: 18px; ความสูง: 16px; margin-top: 3px; เคอร์เซอร์: pointer; display: block; margin-right: 5px; พื้นหลัง: url (http://images.cnblogs.com/cnblogs_com/wtcsy

.DEMO .FIRST_DIV {ตำแหน่งพื้นหลัง: -12PX -58PX;}

.DEMO .FIRST_DIV_NO {ตำแหน่งพื้นหลัง: 4PX -58PX; เคอร์เซอร์: ปกติ}

.DEMO .PREV_DIV {ตำแหน่งพื้นหลัง: -11px -78px;}

.DEMO .PREV_DIV_NO {ตำแหน่งพื้นหลัง: 5PX -78PX; เคอร์เซอร์: ปกติ}

.DEMO .NEXT_DIV {ตำแหน่งพื้นหลัง: -65PX -78PX;}

.DEMO .NEXT_DIV_NO {ตำแหน่งพื้นหลัง: -49PX -78PX; เคอร์เซอร์: ปกติ}

.Demo .last_div {ตำแหน่งพื้นหลัง: -67px -58px;}

.Demo .last_div_no {ตำแหน่งพื้นหลัง: -51px -58px; เคอร์เซอร์: ปกติ}

.DEMO .ROWFOCUS TD {พื้นหลังสี:#EBF2FB}

.DEMO .DELBTN, .DEMO .DELBTN: โฮเวอร์ {พื้นหลัง: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-repeat; Width: 45px; Text-Ag: Center; ความสูง: 20px; สี:#333; แสดง: บล็อก; การตกแต่งข้อความ: ไม่มี; ลอย: ซ้าย;}

.DEMO .DELBTN {ตำแหน่งพื้นหลัง: -55PX 0;}

.DEMO .DELBTN: โฮเวอร์ {ตำแหน่งพื้นหลัง: -55PX -30PX; สี:#666}

. demo ตาราง {

ขนาดตัวอักษร: 12px;

Table-Layout: แก้ไข;

-moz-user-select: -moz-none;

-webkit-user-select: ไม่มี;

-khtml-user-select: ไม่มี;

.DEMO .TABCONTAINER {

ความกว้าง: 99%;

ล้น: อัตโนมัติ;

Padding: 2px 0 0 2px;

พื้นหลังสี:#fffbf7;

ตำแหน่ง: ญาติ;

.DEMO TABLE THEAD TD {พื้นหลัง: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ซ้ำ -x 0 -100px;}

.demo ตารางที่ {

z-index: 1,000;

พื้นหลังสี:#c3daf9;

Background-Image: URL ("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png");

แสดง: ไม่มี;

ความกว้าง: 12px;

ความสูง: 22px;

ตำแหน่งพื้นหลัง: 0 -234px;

ตำแหน่ง: สัมบูรณ์;

ด้านบน: 0;

ขวา: 0;

.DEMO TABLE THEEAD DIV {ตำแหน่ง: ญาติ; z-index: 1;}

.Demo Table thead p {

ความกว้าง: 1px;

ความสูง: 22px;

พื้นหลังสี:#99BBE8;

ลอย: ซ้าย;

แสดง: บล็อก;

เคอร์เซอร์: อิเล็กทรอนิกส์;

มาร์จิ้น-ขวา: 2px;

.DEMO TABLE TR.TRFOCUS TD {

พื้นหลังสี:#EBF2FB

.DEMO DIV TABLE

-moz-user-select: -moz-none;

-webkit-user-select: ไม่มี;

.demo Table tr td {พื้นหลังสี: #FFF; ล้น: ซ่อน; Text-Overflow: Ellipsis; Space White: NowRap;}

.Demo .loading {ตำแหน่ง: สัมบูรณ์; z-index: 9999; ซ้าย: 0; top: 0; พื้นหลัง:#e5e5e5; ตัวกรอง: อัลฟ่า (ความทึบ = 50); ความทึบ: 0.5; -moz-opacity: 0.5;

.demo .loaddiv {ตำแหน่ง: Absolute; Z-Index: 99999; Width: 98px; ความสูง: 28px; ชายแดน: 1px Solid #6593CF; พื้นหลัง: #FFF URL (http://images.cnblogs.com/cnblogs_com/wtcsy -300px; การตอบสนอง: 2px;}

.DEMO .loadGif {พื้นหลัง: #FFF URL (รูปภาพ/loading_small.gif) ไม่มีการทำซ้ำ 4px 5px; Padding: 5px 0 0 27px; ความกว้าง: 68px; ความสูง: 21px; ชายแดน: 1px ของแข็ง #6593cf;}

.Demo .loadText {color:#000;}

.Demo .Edittable {Border: 1px Solid #C4C4C4;}

.DEMO .Edittable TD {พื้นหลัง:#EBF2FB; ความสูง: 24px;}

.DEMO .EDITBTN {PADDING: 5PX; WIDTH: 100PX; มาร์จิ้น: 0 auto; พื้นหลัง: #EBF2FB; ชายแดน: 1PX ของแข็ง #C4C4C4;

.DEMO .DELBTN, .AJAXTABLE .DELBTN: โฮเวอร์ {พื้นหลัง: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-repeat; Width: 45px; Text-Ag: Center; ความสูง: 20px; สี:#333; แสดง: บล็อก; การตกแต่งข้อความ: ไม่มี; ลอย: ซ้าย;}

.DEMO .DELBTN {ตำแหน่งพื้นหลัง: -55PX 0;}

.DEMO .DELBTN: โฮเวอร์ {ตำแหน่งพื้นหลัง: -55PX -30PX; สี:#666}

.DEMO .BTN_A, .AJAXTABLE .BTN_A: โฮเวอร์ {เคอร์เซอร์: ตัวชี้; พื้นหลัง: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-repeat; Text-Aginy: Center; Padding-Top: 5px; Width: 45px; ความสูง: 17px; แสดง: บล็อก; ลอย: ซ้าย; เคอร์เซอร์: ตัวชี้; การกำหนดข้อความ: ไม่มี;}

.DEMO .BTN_A {ตำแหน่งพื้นหลัง: 0 0; สี:#333;}

.DEMO .BTN_A: โฮเวอร์ {ตำแหน่งพื้นหลัง: 0 -30px; สี:#666;}

.sort-asc .head_span {

ความสูง: 12px; ความกว้าง: 24px;

แสดง: บล็อก;

ลอย: ซ้าย;

Padding-Right: 18px;

ความเป็นมา: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ไม่ต้องรีเปท -423px;

.head_span {float: ซ้าย; Line-Height: 22px; display: block;}

.Sort-DESC .HEAD_SPAN {

ความสูง: 12px; ความกว้าง: 24px;

แสดง: บล็อก;

ลอย: ซ้าย;

Padding-Right: 18px;

ความเป็นมา: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ไม่ถูกต้อง -391px;

.x-menu {

ตำแหน่ง: สัมบูรณ์;

พื้นหลัง: URL (menu.gif) ทำซ้ำ -y #f0f0f0;

ชายแดน: 1px Solid #718BB7;

ความกว้าง: 134px;

แสดง: ไม่มี;

.x-menu .disabled a {

สี:#999;

.x-menu-list {padding: 2px; ล้น: ซ่อน; มาร์จิ้น: 0;}

.x-menu-list li {padding: 1px; พื้นที่สีขาว: NowRap; ความสูง: 20px;}

.x-menu-list li.focus {backround:#09f;}

ax-menu-item {

แสดง: บล็อก;

เคอร์เซอร์: ตัวชี้;

ความสูงบรรทัด: 18px;

ความสูง: 20px;

โครงร่างสี: -moz-use-text-color;

โครงร่างสไตล์: ไม่มี;

โครงร่างความกว้าง: 0;

ความกว้าง: 100px;

Padding-Left: 27px;

ตำแหน่ง: ญาติ;

การตกแต่งข้อความ: ไม่มี;

พื้นที่สีขาว: NowRap;

ขนาดตัวอักษร: 12px;

สี:#222;

AX-M_A {Padding-Left: 8px; Width: 120px;}

อินพุต Axe-Menu-item {margin-right: 8px}

Axe-Menu-item: Hover {พื้นหลังสี:#d9e8fb}

.asc {พื้นหลัง: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ไม่มีการตอบสนอง -53px -218px;}

.DESC {พื้นหลัง: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ไม่มีการตอบสนอง -53px -243px;}

.Columns {พื้นหลัง: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ไม่มีการทำซ้ำ -53px -268px;}}

.submenu {

ตำแหน่ง: สัมบูรณ์;

z-index: 1500;

ความเป็นมา:#F0F0F0;

ชายแดน: 1px Solid #718BB7;

ความกว้าง: 134px;

แสดง: ไม่มี;

.x-menu-list .child-menu {พื้นหลัง: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) ไม่มีการตอบสนองที่ถูกต้อง -4444px;};}

AX-M_A {Padding-Left: 8px; Width: 120px;}

อินพุต Axe-Menu-item {margin-right: 8px}

Axe-Menu-item: Hover {พื้นหลังสี:#d9e8fb}

.เส้น{

ความกว้าง: 1px; พื้นหลังสี: #CCCCCC; ตำแหน่ง: สัมบูรณ์; แสดง: ไม่มี; z-index: 100;

.สีแดง{

สี:#FF0000;

. -greed {

สี:#33ff00;

</style>

</head>

<body>

1. วิธีการเรียงลำดับแบบกำหนดเอง

<br>

2. แก้ไข

<br>

3. ลากและลาก

<br>

4. การปนเปื้อน

<br>

5. ตัวเลือกแบบหลายตัวเลือกแบบตัวเลือกเดียว (CTRL) การเลือกเชิงเส้น (Shift)

<br>

7. ซ่อนการแสดงคอลัมน์

<br>

8. การจัดกลุ่ม

<br>

<br> <br> ต่อไปนี้มีการจัดกลุ่มและมีวิธีการเรียงลำดับแบบกำหนดเองที่ดีโดยทั่วไปไม่ดี <br> <br>

(ฟังก์ชั่น (เอกสารที่ไม่ได้กำหนด) {

var win = this;

win.sys = function (ua) {

var b = {

เช่น: /msie/.test(ua) &&! /opera/.test (ua)

โอเปร่า: /opera/.test(ua),

Safari: /webkit/.test(ua) &&! /chrome/.test (ua)

Firefox: /firefox/.test(ua)

Chrome: /chrome/.test(ua)

}, vmark = "";

สำหรับ (var i ใน b) {

ถ้า (b [i]) {vmark = "safari" == i? "เวอร์ชัน": i; หยุดพัก; -

b.version = vmark && regexp ("(?:" + vmark + ") [///:] ([// d.] +)"). ทดสอบ (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;

กลับ B;

} (win.navigator.useragent.toLowerCase ());

win.sys.ie6 && doc.execcommand ("backgroundimagecache", เท็จ, จริง);

ชนะ. $$ = ฟังก์ชั่น (id) {

return typeof id === 'สตริง'

- doc.getElementById (ID)

: id;

ชนะ. $ q = ฟังก์ชั่น (ชื่อ, พาเรนต์) {

ส่งคืน parent.getElementsByTagname (ชื่อ);

ชนะ. $ c = function (ชื่อ, parent) {

var elem = typeof name === 'Object'? ชื่อ: doc.createElement (ชื่อ);

ผู้ปกครอง && parent.appendchild (elem);

กลับ Elem;

win.addListener = ฟังก์ชั่น (องค์ประกอบ, 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 = ฟังก์ชั่น (องค์ประกอบ, e, fn) {

ตัวจัดการ var = element.events [e], ประเภท;

ถ้า (fn) {

สำหรับ (พิมพ์ในตัวจัดการ)

if (handlers [type] === fn) {

Element.RemoveEventListener? Element.RemoveEventListener (E, FN, FALSE): Element.detacheVent ("ON" + E, FN);

ลบตัวจัดการ [ประเภท];

}อื่น{

สำหรับ (พิมพ์ในตัวจัดการ) {

Element.RemoveEventListener? Element.RemoveEventListener (E, Handlers [type], FALSE): Element.DetacheVent ("ON" + E, Handlers [Type]);

ลบตัวจัดการ [ประเภท];

win.fireEvent = ฟังก์ชั่น (องค์ประกอบ, eventName) {

if (Element [EventName]) {

องค์ประกอบ [EventName] ();

} อื่นถ้า (element.fireevent) {

element.fireevent ('on'+eventname);

} อื่นถ้า (doc.createeeVent) {

var evt = doc.createeevent ("MouseEvents");

evt.initevent (eventname, true, true);

Element.Dispatchevent (EVT);

win.setStyle = function (elems, style, value) {

if (! elems.length) elems = [elems];

if (typeof style == "String") {

style = value === undefined? {csstext: style} :( ฟังก์ชั่น (o) {

return (o [style] = value, o);

แต่ละ (elems, function (i, elem, style) {

ค่า var, ชื่อ, IE = sys.ie;

สำหรับ (ชื่อในสไตล์) {

value = style [ชื่อ];

if (name === "Opacity" && ie) {

elem.style.filter = (elem.currentstyle.filter || ""). reflace (/alpha/([^)] */)/, "") + "alpha (opacity =" + value * 100 + ")";

} อื่นถ้า (name === "float") {

Elem.style [เช่น? "stylefloat": "cssfloat"] = ค่า;

}อื่น{

name = name.replace (/-([[az])/ig, ฟังก์ชั่น (ทั้งหมด, ตัวอักษร) {

return letter.touppercase ();

Elem.style [ชื่อ] = ค่า;

}, สไตล์);

win.setattr = function (dom, attr) {

if (typeof attr! == 'Object')

กลับ;

สำหรับ (ชื่อ var ใน attr)

dom.setAttribute (ชื่อ, attr [ชื่อ]);

var slice = array.prototype.slice;

win.bind = ฟังก์ชั่น (วัตถุ, สนุก) {

var args = slice.call (อาร์กิวเมนต์) .slice (2);

return function () {

คืนความสนุก (วัตถุ, args);

win.bindaseventListener = function (วัตถุ, fun, args) {

var args = slice.call (อาร์กิวเมนต์) .slice (2);

ฟังก์ชั่นส่งคืน (เหตุการณ์) {

return fun.apply (วัตถุ, [event || win.event] .concat (args));

win.extend = function () {

var target = อาร์กิวเมนต์ [0] || {}, i = 1, length = arguments.length, deep = true, ตัวเลือก;

if (typeof target === "boolean") {

ลึก = เป้าหมาย;

target = อาร์กิวเมนต์ [1] || -

i = 2;

if (typeof target! == "Object" && Object.prototype.toString.call (เป้าหมาย)! = "[ฟังก์ชันวัตถุ]")

target = {};

สำหรับ (; i <length; i ++) {

if ((ตัวเลือก = อาร์กิวเมนต์ [i])! = null)

สำหรับ (ชื่อ var ในตัวเลือก) {

var src = เป้าหมาย [ชื่อ], copy = ตัวเลือก [ชื่อ];

if (target === สำเนา)

ดำเนินการต่อ;

if (deep && copy && typeof copy === "Object" &&! copy.nodeType) {

เป้าหมาย [ชื่อ] = arguments.callee (ลึก, src || (copy.length! = null? []: {}), คัดลอก);

อื่นถ้า (คัดลอก! == ไม่ได้กำหนด)

เป้าหมาย [ชื่อ] = คัดลอก;

เป้าหมายกลับ;

win.class = function (คุณสมบัติ) {

var _class = function () {

return (อาร์กิวเมนต์ [0]! == null && this.initialize && typeof (this.initialize) == 'function')

- this.initialize.apply (ข้อโต้แย้งนี้)

: นี้;

_class.prototype = คุณสมบัติ;

กลับ _class;

win.each = function (วัตถุ, callback, args) {

ชื่อ var, i = 0, length = object.length;

ถ้า (args) {

args = array.prototype.slice.call (อาร์กิวเมนต์) .slice (2);

ถ้า (ความยาว === ไม่ได้กำหนด) {

สำหรับ (ชื่อในวัตถุ)

if (callback.apply (วัตถุ [ชื่อ], [ชื่อ, วัตถุ [ชื่อ]]. concat (args)) === false)

หยุดพัก;

} อื่น

สำหรับ (; i <length; i ++)

ถ้า (callback.apply (object [i], [i, object [i]]. concat (args)) === false) //

หยุดพัก;

} อื่น {

ถ้า (ความยาว === ไม่ได้กำหนด) {

สำหรับ (ชื่อในวัตถุ)

if (callback.call (วัตถุ [ชื่อ], ชื่อ, วัตถุ [ชื่อ]) === เท็จ)

หยุดพัก;

} อื่น

สำหรับ (var value = object [0];

i <length && callback.call (value, i, value)! == false; value = object [++ i]) {}

วัตถุกลับ;

win.currentStyle = ฟังก์ชั่น (องค์ประกอบ) {

return element.currentstyle || doc.defaultView.getComputedStyle (องค์ประกอบ, null);

win.objpos = ฟังก์ชั่น (elem) {

var left = 0, top = 0, ขวา = 0, bottom = 0, doc = elem? Elem.OwnerDocument: DOC;

if (! elem.getBoundingClientRect || win.sys.ie8) {

var n = elem;

ในขณะที่ (n) {ซ้าย += n.offsetleft, top += n.offsettop; n = n.offsetParent; -

ขวา = ซ้าย + elem.offsetWidth; ด้านล่าง = top + elem.offSetheight;

} อื่น {

var rect = elem.getBoundingClientRect ();

ซ้าย = ขวา = doc.documentelement.scrollleft || doc.body.scrollleft;

top = bottom = doc.documentelement.scrollleft || doc.body.scrollleft;

ซ้าย += rect.left; ขวา += rect.right;

top += rect.top; ด้านล่าง += rect.bottom;

return {"left": left, "top": top, "ขวา": ขวา, "Bottom": Bottom};

win.contains = function (k, j) {

ส่งคืนเอกสาร. comparedocumentposition

- K.CompareCumentPosition (J) & 16

: k! == j && k.contains (j);

win.hasclass = function (element, className) {

return element.classname.match (ใหม่ regexp ('(// s |^)'+classname+'(// s | $)'));

win.addclass = ฟังก์ชั่น (องค์ประกอบ, className) {

if (! win.hasclass (Element, classname))

element.classname.replace (// s/g, '') === ''

- element.className = className

: element.className+= ""+className;

win.removeClass = ฟังก์ชั่น (องค์ประกอบ, className) {

win.hasclass (Element, className) && (element.className = element.className.replace (ใหม่ regexp ('(// s*|^)'+className+'(// s*| $)'), ''));

})(เอกสาร);

(ฟังก์ชั่น (เอกสารที่ไม่ได้กำหนด) {

var win = สิ่งนี้

uuid = -1;

ตรวจสอบว่ามีคีย์ในสตริงหรือไม่

หากมีและคีย์ตามด้วย - return - บางอย่างหลังจากนั้นเป็นอย่างอื่นส่งคืนจริง

ไม่มีการตรวจจับส่งคืนเท็จ

การตรวจสอบฟังก์ชั่น (str, key) {

var reg = ใหม่ regexp ('(?:^| // s)'+key+'// b-? (.*?) (?: // s | $)', 'i');

if (reg.exec (str)! = null) {

return regexp. $ 1 === '' True: Regexp. $ 1;

}อื่น{

กลับเท็จ;

แก้ไขค่าที่สอดคล้องกับคีย์ในสตริง

ฟังก์ชั่นแก้ไข (str, key, value) {

var reg = ใหม่ regexp ('(^| // s) ('+key+'// b-).*? (// s | $)', 'i');

return str.replace (reg, '$ 1 $ 2'+value+'$ 3');

win.easyGrid = คลาสใหม่ ({

ตัวเลือก: {

perpage: 10,

Currpage: 0,

TotalPage: 0,

นับ: 10,

หน้า: 0,

isedit: เท็จ

WidthConfig: {

TD: NULL

prevtd: null,

x: 0,

tdwidth: 0,

Prevwidth: 0

cellminwidth: 50,

Sorttype: {

int: function (v) {return parseint (v)}

ลอย: ฟังก์ชั่น (v) {return parsefloat (v)}

วันที่: ฟังก์ชั่น (v) {return v.toString ()}

สตริง: ฟังก์ชัน (v) {return v.toString ()}

ชื่อเรื่อง: 'ชื่อ'

เริ่มต้น: ฟังก์ชั่น (ตัวเลือก) {

var op = ขยาย (true, {}, this.options),

ตัวเลือก = this.defaults = ขยาย (op, ตัวเลือก),

container = this.container = $ c ('div', ตัวเลือก container),

dataconfig = opotions.dataconfig,

title = $ c ('div', คอนเทนเนอร์);

container.className = 'container';

title.innerhtml = opotions.title;

title.className = 'title';

this.primarykey = ตัวเลือก primarykey;

this.top = $ c ('div', คอนเทนเนอร์);

this.top.className = 'bar';

this.top.innerhtml = '<div> <a href = "JavaScript:;" page = "start"> </a> <a href = "JavaScript:;" page = "next"> </a> <div> <div> <อินพุต type = "text"/> </div> </div> </div> <a href = "JavaScript:;" page = "pre"> </a> <a href = "JavaScript:;" page = "end"> </a> <div> <a href = "JavaScript:;" go = "go"> กระโดด </a> <a href = "JavaScript:;" del = "del"> ลบ </a> <div> หน้าปัจจุบันมีทั้งหมดหนึ่งหน้าและข้อมูลหนึ่งชิ้นข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้น ข้อมูลและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้น ข้อมูลและข้อมูลทั้งหมดหนึ่งชิ้นและข้อมูลทั้งหมดหนึ่งชิ้น

var tabcontainer = this.tabContainer = $ c ('div', คอนเทนเนอร์);

this.bottom = $ c (this.top.clonenode (จริง), คอนเทนเนอร์);

tabcontainer.className = 'tabcontainer';

tabcontainer.style.height = ~~ ตัวเลือก container.offsetheight - 83+'px';

var table = this.table = $ c ('ตาราง', tabcontainer);

table.className = 't_a';

setAttr (ตาราง, {cellpadding: "0", การเดินไปยังเซลล์: "0", ชายแดน: "0"});

this.tead = $ c ('head', ตาราง);

this.tbody = $ c ('tbody', ตาราง);

this.tbody.style.display = 'ไม่มี';

// กำลังโหลด

this.loading_bg = $ c ('div', คอนเทนเนอร์);

this.loading_bg.className = 'กำลังโหลด';

setStyle (this.loading_bg, {

ความกว้าง: container.offsetWidth+2+'px'

ความสูง: container.offsetheight+2+'px'

this.loading = $ c ('div', คอนเทนเนอร์);

this.loading.className = 'loadDiv'

SetStyle (this.loading, {

ซ้าย: (container.offsetWidth/2-45) + 'px'

ด้านบน: (container.offsetheight/2-14) + 'px'

this.loading.innerhtml = '<div> การโหลด ... </div>';

// ในตารางมีกี่คอลัมน์

this.colcount = opotions.fields.length;

// รูปแบบแหล่งข้อมูลคือ [[], [], [], [], []]

this.data = [];

// แบบฟอร์มส่วนหัวการจัดกลุ่มทั้งหมดในแหล่งข้อมูลที่ร้องขอในปัจจุบันคือ [TROMP1, TRDOM2]

this.grouphead = [];

// บันทึก TR [TR1, TR2, TR3] ของกลุ่มที่แทรกเข้าไปในตาราง

this.inserttrs = [];

// ดัชนีคอลัมน์

// ฟอร์ม [[TD11, TD12, TD13, TD14], [TD21, TD22, TD23, TD24]]

this.columns = [];

// จริงหมายถึงคำสั่งซื้อเท็จบวกหมายถึงลำดับย้อนกลับ

this.ascsort = true;

// บันทึกคอลัมน์ใดที่เรียงลำดับส่วนหัว TD

this.sortColumn = '';

// แถว TR ทั้งหมดหากไม่มีรูปแบบการจัดกลุ่ม [TR1, TR2, TR3, TR4]

// ถ้ามีการจัดกลุ่ม [[TR1, TR2, TR3, TR4], [TR5, TR6, TR7, TR8]]

this.rows = [];

เมนู // ระดับ 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"> ลง </a> </li> <li> <a href = "JavaScript:;" menutype = "คอลัมน์"> คอลัมน์ทั้งหมด </a> </li> </ul> ';

// สร้างเมนูย่อย

this.subpopmenu = $ c ('div', doc.body);

this.subpopmenu.className = 'Submenu';

// ไม่ว่าจะเป็นชั้นป๊อปอัพระดับแรกของส่วนหัวของตารางเปิดหรือไม่ หากเปิดขึ้นให้บันทึก TD

this.ismenuopen = false;

// บันทึกว่าคอลัมน์ในคอลัมน์ทั้งหมดจะปรากฏขึ้นหรือซ่อนจำนวนเป็นตัวนับเพื่อดูว่ามีคอลัมน์กี่คอลัมน์

// รูปแบบปิด: [จริง, เท็จ, จริง, จริง] คอลัมน์ 1,3,4 แสดงคอลัมน์ที่สองที่ซ่อนอยู่

this.isshowtrs = {

NUM: 0,

ปิด: []

// สร้างพื้นฐานที่แสดงเมื่อลาก

this.line = $ c ('div', doc.body);

this.line.className = 'line';

// บันทึกบรรทัด

// จำนวนแอตทริบิวต์ที่เพิ่มขึ้น uuid เป็นเช่น {1: dom, 2: dom}

this.selectedRows = {};

// บันทึกแถวที่เลือกล่าสุด

this.lastSelectrow = {dom: null, ดัชนี: null};

this.currenteditrow = {index: 0, dom: null};

this.editData = [];

this.editform = $ c ('div', tabcontainer) ;;

SetStyle (this.editform, {

ตำแหน่ง: 'สัมบูรณ์',

แสดง: 'ไม่มี',

'z-index': '120'

this.edittable = $ c ('ตาราง', this.editform);

setattr (this.edittable, {

Cellpacing: '0',

CellPadding: '0',

ชายแดน: '0'

var btnc = $ c ('div', this.editform);

btnc.classname = 'editbtn';

btnc.style.textalign = 'center';

btnc.innerhtml = '<div> <a do = "ส่ง" href = "javascript:;"> ส่ง </a> <a do = "ยกเลิก" href = "javascript:;"> ยกเลิก </a> </div>';

this.edittable.className = 'Edittable';

var etr = $ c ('tr', $ c ('tbody', this.edittable));

// สร้างสำเนาของ TR เนื่องจากโหนดสามารถคัดลอกโดยตรงเมื่อสร้าง TR ในภายหลัง

this.copytr = $ c ('tr');

this.grouptr = $ c ('tr');

this.grouptr.setAttribute ('g', 'y');

var ctd = $ c ('td', this.grouptr)

ctd.setAttribute ('colspan', opotions.fields.length);

var theadtr = $ c ('tr', this.head),

twidth = 0,

ตัวเอง = สิ่งนี้

ul = $ c ('ul', this.subpopmenu),

หลี่;

แต่ละ (ตัวเลือกฟิลด์, ฟังก์ชัน (i, o) {

var td = $ c ('td', headtr),

Width = O.Width? O.Width: '80 '

div = i === 0? '<div>': '<div> <p> </p>';

td.innerhtml = [div, '<span>', o.name, '</span> <a href = "JavaScript :;"> </a> </div>']. เข้าร่วม ('');

setattr (td, {clos: i, width: width, unselectable: 'on', 'class': o.type === ไม่ได้กำหนด? '': 'type-'+o.type});

self.createinput (i, o, etr);

twidth = twidth + (~~ width);

li = $ c ('li', ul);

li.innerhtml = [

'<a href = "JavaScript:;" > <อินพุต type = "ช่องทำเครื่องหมาย" checked = "true" cols = "'

ฉัน,

O.Name,

'</a>'

].เข้าร่วม('');

// สร้างรายการแรกของแต่ละคอลัมน์ในดัชนีคอลัมน์

self.columns [i] = [td];

$ c ('td', self.copytr) .setAttribute ('ไม่สามารถเลือกได้', 'on');

// คำนวณดัชนีคอลัมน์และจำนวนคอลัมน์ทั้งหมด NUM

self.isshowtrs.num ++;

self.isshowtrs.clos [i] = true;

setattr (this.table, {width: twidth+opotions.fields.length+1})

// สร้าง tr ใน tbody เพียงสร้าง tr ตาม perpage เป็นรายการการกำหนดค่าที่แสดงจำนวนข้อมูลที่มีอยู่ในปัจจุบัน

var i = 0,

trslen = opotions.perpage

frag = doc.createdocumentFragment ()

arr = อาร์เรย์ใหม่ (ตัวเลือกฟิลด์ความยาว),

tr,

TDS;

สำหรับ (; i <trslen; i ++) {

tr = this.copytr.clonenode (จริง);

tds = $ q ('td', tr);

แต่ละ (arr, function (i) {

// สร้างรายการทั้งหมดของดัชนีคอลัมน์

self.columns [i] .push (tds [i]);

$ c (tr, frag);

this.tbody.appendchild (frag);

if (typeof dataconfig === 'object') {

settimeout (function () {self.getDataCallback (dataconfig);}, 5);

}อื่น{

ลากตาราง

การจัดเรียงตาราง

รอการดำเนินการบางอย่าง

addListener (this.tread, 'คลิก', bindaseventListener (นี่, this.sorttable));

addListener (this.tead, 'Mouseover', BindaseventListener (นี่คือสิ่งนี้. teadover));

addListener (this.tead, 'mouseout', bindaseventListener (นี่, สิ่งนี้. teadout));

addListener (this.tead, 'mousedown', bindaseventListener (นี่, this.dragwidth));

ผูกเลเยอร์ป๊อปอัพเลเยอร์คลิกเหตุการณ์เพื่อการเรียงลำดับ

เมนูระดับ 2 ผูกพันเพื่อซ่อนคอลัมน์

addListener (this.popmenu, 'คลิก', bindaseventListener (นี่คือสิ่งนี้ menuclick));

AddListener (this.popmenu, 'Mouseover', BindaseventListener (นี่คือสิ่งนี้ menuover));

AddListener (this.subpopmenu, 'คลิก', bindaseventListener (นี่คือสิ่งนี้. submenuclick));

ใส่แถวโต๊ะและหนาขึ้น

AddListener (this.tbody, 'Mousemove', bindaseventListener (นี่, this.rowhighlight, true));

addListener (this.tbody, 'mouseout', bindaseventListener (นี่, this.rowhighlight, false));

addListener (this.tbody, 'mousedown', bindaseventListener (นี่, this.selectrow, false));

addListener (this.tbody, 'dblclick', bindaseventListener (นี่, สิ่งนี้. editrow, false));

addListener (btnc, 'คลิก', bindaseventListener (นี่, this.modifytr));

AddListener (this.top, 'คลิก', bindaseventListener (นี่คือสิ่งนี้ PAGEBARCLICK));

AddListener (this.bottom, 'คลิก', bindaseventListener (นี่คือสิ่งนี้ pagebarclick));

getDataCallback: ฟังก์ชั่น (ข้อมูล) {

ตัวเลือก var = this.defaults

ตัวเอง = สิ่งนี้

totla = 0;

this.data.length = 0;

if (data.data) {

if (data.data [0] .groupname) {

var grouphead = this.grouphead;

grouphead.length = 0;

แต่ละ (data.data, function (i, o) {

var gtr = self.grouptr.clonenode (จริง);

$ q ('td', gtr) [0] .innerhtml = o.groupname;

grouphead.push (GTR);

แต่ละ (O.Rows, function (j, d) {

// รายการข้อมูลสุดท้ายใน this.data เป็นดัชนี

d.push (i);

self.data.push (d);

this.showgroup = true;

}อื่น{

แต่ละ (data.data, function (i, o) {

self.data.push (o);

this.showgroup = false;

}อื่น{

กลับ;

total = data.total

- data.total> = this.data.length

- data.total

: this.data.length

: this.data.length;

this.writemessage (รวม);

this.buildtbody (ตัวเลือก currpage);

buildtbody: function (pagenum) {

if (this.data.length === 0) {

this.tbody.style.display = 'ไม่มี';

กลับ;

var i = 0,

j = 0,

ตัวเอง = สิ่งนี้

data = this.data,

ตัวเลือก = this.defaults

trslen = opotions.perpage

tdslen = opotions.fields.length,

tbody = this.tbody,

trs = tbody.getElementsByTagname ('tr')

start = pagenum*ตัวเลือก perpage,

tr;

this.rows.length = 0;

if (this.showGroup) {

var group = {}

ดัชนี,

arr = []

inserttrs = this.inserttrs;

// ล้างกลุ่มที่แทรกก่อนหน้านี้ TR

inserttrs.length! = 0 && แต่ละ (inserttrs, ฟังก์ชั่น (i, o) {

self.tbody.removechild (O);

inserttrs.length = 0;

// ถ่ายโอนข้อมูลการเติมไปยังสิ่งนี้ ROWS

var num = - 1;

สำหรับ (; i <trslen; i ++) {

tr = trs [i];

// หากไม่มีข้อมูลให้เริ่มซ่อนแถวที่เหลืออยู่

if (! data [i+start]) {

tr.style.display = 'ไม่มี';

ดำเนินการต่อ;

// ทำให้แท็ก tr ข้อมูลในข้อมูลสอดคล้องกับ

tr.setAttribute ('dataIndex', i+start);

tr.style.display = 'block';

tds = tr.getElementByTagname ('td');

// x เป็นการระบุกลุ่มต่าง ๆ ของกลุ่มในกลุ่ม

var x = data [i+start] [data [i+start] .length-1];

// ใช้เพื่อตรวจสอบว่าข้อมูลที่ตามมาและข้อมูลก่อนหน้านี้อยู่ในกลุ่มเดียวกัน

// ถ้าเป็นกลุ่มเดียวกันให้เพิ่มคอลัมน์สุดท้ายของ this.rows

// สร้างคอลัมน์ที่ไม่ใช่กลุ่มเดียวกัน

num == x

- this.rows [this.rows.length-1] .push (tr)

: (this.rows [this.rows.length] = [tr], num = x);

// ใช้อาร์เรย์ arr เพื่อจดจำตำแหน่งของ TR แรกของแต่ละกลุ่มเนื่องจากส่วนหัว TR I ถูกแทรกในภายหลังไปยังตำแหน่ง NUM คือหมายเลขลำดับของกลุ่ม

! (num ในกลุ่ม) && (กลุ่ม [num] = i + start, arr.push ([num, i]));

สำหรับ (j = 0; j <tdslen; j ++) {

td = tds [j];

var txt = data [i+start] [j] === ''? '': data [i+start] [j];

render = options.fields [j] .render;

td.innerhtml = render

? render (txt)

: txt;

tr.style.display = '';

แต่ละ (arr.Reverse (), ฟังก์ชัน (i, o) {

inserttrs.push (self.grouphead [o [0]]);

self.tbody.insertbefore (self.grouphead [o [0]], trs [o [1]]);

}อื่น{

สำหรับ (; i <trslen; i ++) {

tr = trs [i];

// ทำให้แท็ก tr ข้อมูลในข้อมูลสอดคล้องกับ

tr.setAttribute ('dataIndex', i+start);

this.rows.push (tr);

// ซ่อน TR โดยไม่มีข้อมูล

if (! data [i+start]) {

tr.style.display = 'ไม่มี';

ดำเนินการต่อ;

tr.style.display = '';

tds = $ q ('td', tr);

สำหรับ (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;

ตัวเลือก currpage = pagenum;

this.top.getElementsByTagname ('span') [0] .innerhtml = this.bottom.getElementsByTagname ('span') [0] .innerhtml = ~~ pagenum+1;

var topas = this.top.getElementsByTagname ('a')

bottomAs = this.bottom.getElementsByTagname ('a');

if (options.totalpage === 1) {

bottomAs [0] .className = topas [0] .className = 'first_div_no';

bottomAs [1] .className = topas [1] .className = 'prev_div_no';

bottomAs [2] .className = topas [2] .className = 'next_div_no';

BottomAs [3] .className = topas [3] .className = 'last_div_no';

} else if (options.currpage === 0) {

bottomAs [0] .className = topas [0] .className = 'first_div_no';

bottomAs [1] .className = topas [1] .className = 'prev_div_no';

bottomAs [2] .className = topas [2] .className = 'next_div';

bottomAs [3] .className = topas [3] .className = 'last_div';

} else if (options.currpage+1 === ตัวเลือก 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';

}อื่น{

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 = 'ไม่มี';

this.loading.style.display = 'ไม่มี';

writemessage: ฟังก์ชั่น (ทั้งหมด) {

ตัวเลือก var = this.defaults

base = total/opotions.perpage

topSpans = this.top.getElementsByTagname ('span')

BottomSpans = this.bottom.getElementsByTagname ('span');

ตัวเลือก totalPage = base> parseInt (ฐาน)

- Parseint (ฐาน) +1

: ฐาน;

BottomSpans [0] .innerhtml = topspans [0] .innerhtml = ~~ ตัวเลือก currpage+1;

BottomSpans [1] .innerhtml = topspans [1] .innerhtml = opotions.totalpage;

BottomSpans [2] .innerhtml = topspans [2] .innerhtml = opotions.perpage;

BottomSpans [3] .innerhtml = topspans [3] .innerhtml = ทั้งหมด;

Sorttable: function (e) {

var elem = e.target || E.Srcelement

ตัวเอง = สิ่งนี้

ตัวเลือก = this.defaults

ELEMNAME = ELEM.NODENAME.TOLOWERCASE ()

showgroup = this.showgroup

tdelem = elem,

ชื่อ = elemname;

// คลิกอาจถูกทริกเกอร์เมื่อลาก เหตุผลก็คือรหัสทั้งหมดที่อยู่ภายใต้ IE นั้นผูกพันกับสิ่งนี้ตาราง ดูการลากและวาง

if ($ q ('td', elem) .length> 1)

กลับ;

ถ้า (ชื่อ! == 'td') {

ในขณะที่ (ชื่อ! == 'td') {

tdelem = tdelem.parentNode;

NAME = TDELEM.NODENAME.TOLOWERCASE ();

var issort = checkreg (tdelem.classname, 'sort'),

type = checkreg (tdelem.classname, 'type')

//เรียงลำดับ

if (elemname! == 'a' && type) {

var fragment = doc.createdocumentFragment ();

if (this.sortcolumn! == tdelem && this.sortcolumn! == '') {

RemoveClass (this.sortcolumn, 'sort-asc');

RemoveClass (this.sortcolumn, 'sort-desc');

ถ้า (ออก) {

// มีการจัดกลุ่มแต่ละกลุ่มจะกลับแยกต่างหากและไม่จัดกลุ่มและจะกลับด้านโดยตรง

กลุ่มนักแสดง

- แต่ละ (this.rows, function (i, o) {o.reverse ();})

: this.rows.Reverse ();

tdelem.className = แก้ไข (tdelem.className, 'sort', issort === 'asc'? 'desc': 'asc');

}อื่น{

กลุ่มนักแสดง

- แต่ละ (this.rows, function (i, o) {

O.Sort (self.Compare (tdelem.getAttribute ('clos'), ประเภท));

: this.rows.sort (this.compare (tdelem.getAttribute ('clos'), ประเภท));

// หากจัดเรียงตามลำดับบวกให้เพิ่มธงของลำดับบวก

if (this.ascsort) {

AddClass (tdelem, 'sort-asc');

}อื่น{

// การเรียงลำดับแบบผกผันจะกลับการเรียงลำดับต้นฉบับและเพิ่มการจัดเรียงธง

กลุ่มนักแสดง

- แต่ละ (this.rows, function (i, o) {o.reverse ();})

: this.rows.Reverse ();

AddClass (tdelem, 'sort-desc');

// แสดงข้อมูลที่จัดเรียงไปยังตาราง

var inserttrs = this.inserttrs

len = inserttrs.length-1

arr = [];

แต่ละ (this.rows, function (i, tr) {

arr = [inserttrs [len-i]]. concat (tr);

กลุ่มนักแสดง

- แต่ละ (arr, function (idx, obj) {frag.appendchild (obj);})

: Frag.AppendChild (TR);

this.tbody.appendchild (frag);

this.sortcolumn = tdelem;

หากคุณคลิกที่แท็ก A ในส่วนหัวเมนูจะปรากฏขึ้น

if (elemname === 'a') {

เมื่อคลิกนอกเมนูเปลี่ยนฟังก์ชั่นจะถูกดำเนินการ

ใช้เพื่อล้างเลเยอร์เหตุการณ์คลิกของเอกสารเพื่อลบสไตล์ของ TD และ A

ฟังก์ชั่น documentclick () {

self.popmenu.style.display = 'ไม่มี';

self.subpopmenu.style.display = 'ไม่มี';

ถ้า (self.ismenuopen) {

RemoveListener (เอกสาร, 'คลิก');

RemoveClass ($ q ('div', self.ismenuopen) [0], 'headfocus');

$ q ('a', self.ismenuopen) [0] .style.display = 'ไม่มี';

self.ismenuopen = false;

var pos = objpos (elem)

left = pos.left+math.max (document.documentelement.scrollleft, documentElement.scrollleft)

top = pos.top +math.max (document.documentelement.scrolltop, documentEnumentElement.scrolltop) +elem.offSetheight,

td = elem.parentNode.parentNode,

lis = $ q ('li', this.popmenu);

// ถ้าสิ่งนี้ ismenuopen เป็นจริงเลเยอร์จะเปิดและการดำเนินการของการประมวลผลที่เกี่ยวข้องอย่างใกล้ชิดจะดำเนินการ

this.ismenuopen && documentclick ();

if (! checkreg (td.classname, 'type')) {

AddClass (lis [0], 'ปิดใช้งาน');

AddClass (lis [1], 'ปิดใช้งาน');

}อื่น{

RemoveClass (lis [0], 'ปิดใช้งาน');

RemoveClass (lis [1], 'ปิดใช้งาน');

sys.ie

- E.CancelBubble = จริง

: E.StopPropagation ();

// เมื่อแสดงเลเยอร์ TD จะติดอยู่กับ this.ismenuopen

this.ismenuopen = td;

AddListener (เอกสาร, 'คลิก', DocumentClick);

SetStyle (this.popmenu, {

ซ้าย: ซ้าย+'px'

ด้านบน: top+'px'

แสดง: 'บล็อก'

เปรียบเทียบ: ฟังก์ชัน (n, type) {

var sorttype = this.defaults.sorttype

txt = sys.ie? 'innertext': 'textContent';

! Sorttype [type] && (type = 'string');

ฟังก์ชั่น return (a1, a2) {

a1 = sorttype [type] (a1.cells [n] [txt]);

a2 = sortType[type](a2.cells[n][txt]);

return a1==a2?0:a1<a2?1:-1;

pageBarClick : function(e){

varelem = e.target || e.srcElement,

options = this.defaults,

typePage = elem.getAttribute('page'),

isGo = elem.getAttribute('go');

isDel = elem.getAttribute('del');

if(typePage){

var number = {

start : 0,

end : options.totalPage-1,

next : options.currPage-1,

pre : options.currPage+1

}[typePage];

this.toPage(number);

if(isDel){

this.del();

if(isGo){

var number = ~~elem.parentNode.getElementsByTagName('input')[0].value-1;

this.toPage(number);

toPage : function(num){

if(typeof num !=='number'||isNaN(num))return;

var options = this.defaults,

self = this,

dataConfig = options.dataConfig;

//如果请求的分页数小于0就默认为0 如果打越最大分页数就默认为最大分页数

num>=options.totalPage

&&(num = options.totalPage-1);

num<0&&(num = 0);

//s为当前面板的第一页e为当前面板的最后

var basePage = options.count/options.perPage,

s = options.page*basePage,

e = s + basePage-1;

this.tbody.style.display = 'none';

this.loading_bg.style.display = '';;

this.loading.style.display = '';

setTimeout(function(){self.buildTbody(num);},10);

del : function(){

//做删除的时候需要有主键的索引我全部保存在tr的

var selectedRows = this.selectedRows,

arr = []

for(var name in selectedRows){

arr.push(selectedRows[name].getAttribute('dataIndex'));

alert('选择了主键值为'+arr.join(','));

theadOver : function(e){

var elem = e.target || e.srcElement;

if(elem.nodeName.toLowerCase() === 'div'){

$q('a',elem)[0].style.display = 'block';

addClass(elem,'theadfocus');

theadOut : function(e){

var elem = e.target || e.srcElement,

toElem = e.toElement||e.relatedTarget,

elemName = elem.nodeName.toLowerCase();

if(this.isMenuOpen && contains(this.isMenuOpen,elem))

กลับ;

//如果离开了当前的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();

กลับ;

//如果a标签的menuType

var menuOp = elem.getAttribute('menuType'),

sortOrder = checkReg(className,'sort');

//选择所有列不进行排序

if(menuOp==='columns')

กลับ;

如果没有排序就根据menuOp来进行排序

如果已排序且与menuOp排序方式不同则进行排序

if(sortOrder){

if(menuOp != sortOrder){

var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];

fireEvent(td,'click');

}อื่น{

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 ? '' : 'ไม่มี';

//如果还剩一列并且这次是取消选中的

//则不执行隐藏

if(this.isShowTrs.num===1&&!checked){

input.checked = true;

กลับเท็จ;

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'))

กลับ;

//如果是分组的行tr 就返回

if(elem.nodeName.toLowerCase()==='td'&&parent.getAttribute('g')==='y')

กลับ;

isHight

- addClass(parent,'rowfocus')

: removeClass(parent,'rowfocus');

selectRow : function(e){

var elem = e.target || e.srcElement;

if(elem.getAttribute('g')||elem.parentNode.getAttribute('g'))

กลับ;

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;

}อื่น{

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);

}อื่น{

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}

กลับเท็จ;

//清空掉之前所有选中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;

กลับเท็จ;

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)

กลับ;

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);

!พิมพ์

&&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'))

กลับ;

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',

แสดง : ''

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';

})(เอกสาร);

window.onload = function(){

var data ={

//total:'55',

ข้อมูล : []

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,

ข้อมูล : [

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>

水平有限请多指教