<html> <head> <style type = "text/css"> .grid {border: 1px solid #808080; ระยะห่างชายแดน: 0; ความกว้าง: 500px; การล่มสลายของชายแดน: การล่มสลาย} .Grid th, .grid td {ชายแดน: 0; TEXT-ALGING: CENTER;} .GRID TR {ความสูง: 25PX; LINE-HEIGHT: 25PX;} .GRID TR.ODD {พื้นหลัง:#D0D0D0} .GRID .BTN {WIDTH: 80PX; Text-Align: center} </style> <script type = "text/javascript"> (function () {// var util = {ถัดไป: ฟังก์ชั่นถัดไป (ele) {ถ้า (ele) {var n = ele.nextsibling; if (n && n.nodetype === 1) {return n; json! == "undefined") {return json.parse (str); array.prototype.slice.call (obj, 0); "undefined") {result.push (เป้าหมาย); ออฟเซ็ต: ฟังก์ชั่นออฟเซ็ต (ele) {var result = {top: 0, ซ้าย: 0}; (ele.style.top || "0") แทนที่ (/[^/d]+$/, "")); result.left = number (ele.offsetleft || (ele.style.left || "0") แทนที่ (/[^/d]+$/, "")); if (ele.parentNode) {var r = ออฟเซ็ต (ele.parentNode); result.top += r.top; result.left += r.left; } ผลตอบแทนผลลัพธ์; - // 事件处理 var event = {on: function (EventType, fn) {var element = this; if (this.addeventListener) {this.addeventListener (EventType, fn, false); } อื่นถ้า (this.attachevent) {// 将事件缓冲到该标签上, 已解决หน้าต่างนี้ (现 fn 内องค์ประกอบนี้) 和移除匿名事件问题 var _eventref = '_'+eventtype+'eventref'; if (! องค์ประกอบ [_eventref]) {องค์ประกอบ [_eventref] = []; } var _eventrefs = องค์ประกอบ [_eventref]; ดัชนี var; สำหรับ (ดัชนีใน _eventrefs) {ถ้า (_eventrefs [ดัชนี] ['realfn'] == fn) {return; }} var nestfn = function () {fn.apply (องค์ประกอบ, อาร์กิวเมนต์); - องค์ประกอบ [_eventref] .push ({'realfn': fn, 'nestfn': nestfn}); Element.attachevent ('on'+EventType, Nestfn); }}, ลบ: ฟังก์ชั่น (EventType, fn) {var element = this; if (this.removeEventListener) {this.removeEventListener (EventType, FN, FALSE); } อื่นถ้า (this.detachevent) {var _eventref = '_'+eventtype+'eventref'; if (! องค์ประกอบ [_eventref]) {องค์ประกอบ [_eventref] = []; } var _eventrefs = องค์ประกอบ [_eventref] ดัชนี var; var nestfn; สำหรับ (ดัชนีใน _eventrefs) {ถ้า (_eventrefs [ดัชนี] ['realfn'] == fn) {nestfn = _eventrefs [ดัชนี] ['nestfn']; if (index == _ eventrefs.length-1) {องค์ประกอบ [_eventref] = _ eventrefs.slice (0, ดัชนี); } else {องค์ประกอบ [_eventref] = _ eventrefs.slice (0, ดัชนี) .concat (_eventrefs.slice (ดัชนี+1, _eventrefs.length-1)); } หยุดพัก; }} if (nestfn) {element.detachevent ('on'+entyType, nestfn); - // ขยาย (ฟังก์ชัน () {// 删除数组中指定下标出的元素 array.prototype.remove = ฟังก์ชั่น (ดัชนี) {var o = สิ่งนี้ [ดัชนี]; ถ้า (typeof o! == "undefined") {ถ้า (ดัชนี == 0) {this.shift (); arr2 = this.slice (ดัชนี+1); i = 0; i <this.length; i ++) {ถ้า (typeof this [i]! == "undefined") {fn.call (นี่คือ [i], i); ข้อมูลนี้ [this.length ++] = obj; = 0;}, แต่ละ: ฟังก์ชั่น (fn) {var index = 0; สำหรับ (var k ในข้อมูล .__ นี้) {if (k && typeof นี้ .__ ข้อมูล [k]! == "undefined") {fn.call (นี้ .__ data [k], index ++); }}}, toarray: function () {var arr = []; this.each (function () {arr.push (this);}); กลับ arr; - - // var grid = this.grid = function (ตาราง, ตัวเลือก) {grid.prototype._init.call (นี้, ตาราง, ตัวเลือก); } grid.prototype = {_init: ฟังก์ชั่น (ตารางตัวเลือก) {ถ้า (typeof table === "undefined" ||! table) {throw "ตารางไม่ได้กำหนดหรือ null"; } if (table.nodeType! == 1 ||!/^ตาราง $/i.test (table.tagname)) {throw "ตารางจะต้องเป็นองค์ประกอบ 'ตาราง'"; } table.guid = ++ grid.guid; cache .__ นี้ = {}; var self = this; VAR Header = this .__ cache ["header"] = loadHeader (); // ส่วนหัวสิ่งนี้ .__ root = header.parentNode; var templaterow = this .__ cache ["template"] = loadTemplate (); // 模板行สิ่งนี้. __ cache ["dataFormat"] = loadDataFormat (); // 数据模板สิ่งนี้. สิ่งนี้ .__ saveContainer = createSaveButton (); // 保存按钮 cache .__ นี้ ["CommandHandles"] = {// คำสั่ง handels removerow: function () {var rowindex = this.getAttribute ("ดัชนี"); self.removerow.apply (ตัวเอง, [rowindex]); }, newLine: function () {self.newline (); - สิ่งนี้ .__ regCommand = function (commandName, row) {// 注册คำสั่งถ้า (แถว) {var arg = row.getAttribute ("ดัชนี"); this.setAttribute ("index", arg || false); } this.commandName = commandName; event.remove.call (นี่ "คลิก", exec); event.on.call (นี่ "คลิก", exec); } สิ่งนี้ .__ thare RemoverowCallback = function () {// 改变行的背景样式 var rows = this .__ cache ["dataRows"]; var customCache = this .__ แคช ["customcache"]; var arr = rows.toarray (), dataarr = []; var rowindex, แถว, ข้อมูล; rows.clear (); arr.each (ฟังก์ชั่น (i) {rowIndex = this.getAttribute ("index"); data = customCache.get (rowindex); dataarr.push (data); this.setAttribute ("ดัชนี", i.toString ()); row.add if (! // sodd/s | /sodd$/g.test (this.classname)) {this.classname = (this.className || "") + "คี่"; this.classname.replace (// sodd/s |/sodd $/g, ""); CustomCache.Clear (); dataarr.each (function () {customcache.add (this);}); } // 事件处理ตัวเลือก = ตัวเลือก || - this.ondatabinding = opotions.ondatabinding || นี่คือสิ่งที่ดี; this.onrowbinding = opotions.onrowbinding || สิ่งนี้ this.onrowbinded = opotions.onrowbinded || สิ่งนี้ onrowbinded; ฟังก์ชั่น loadHeader () {var tr = table.firstchild; if (tr && tr.nodeType! = 1) {tr = util.next (tr); } if (!/tr/i.test (tr.tagname)) {// 如果第一个元素不是 tr， 则浏览器支持 tbody tr = tr.firstchild; if (tr.nodeType! = 1) {tr = util.next (tr); }} return tr; } ฟังก์ชั่น loadTemplate () {tr = util.next (ส่วนหัว); // 获取模板行 return tr; } function loadDataFormat () {var nodes = templaterow.childNodes, ele, data, result = {}, attr; โหนด = util.parsearray (โหนด); nodes.each (ฟังก์ชั่น (i) {ele = this; if (ele && ele.nodeType == 1) {attr = ele.data || ele.getAttribute ("data"); if (attr) {data = util.parsejson ผลการกลับมา; } ฟังก์ชั่น createSaveButton () {var div = document.createElement ("div"); div.style.position = "สัมบูรณ์"; div.style.display = "ไม่มี"; div.style.width = "auto"; var btn = document.createelement ("ปุ่ม"); btn.innerhtml = btn.innertext = btn.textContent = btn.value = "บันทึก"; ลอง {btn.type = "ปุ่ม"; } catch (e) {btn.setAttribute ("type", "ปุ่ม"); } div.AppendChild (BTN); var btncancel = document.createelement ("ปุ่ม"); btncancel.innerhtml = btnCancel.innerText = btnCancel.TextContent = btnCancel.value = "ยกเลิก"; ลอง {btncancel.type = "ปุ่ม"; } catch (e) {btncancel.setAttribute ("type", "ปุ่ม"); } div.AppendChild (btncancel); document.body.appendchild (div); event.on.call (btn, "คลิก", function () {self.save ();}); event.on.call (btncancel, "คลิก", function () {div.style.display = "ไม่มี"; ถ้า (self .__ editrow) {self .__ editrow.parentNode.removeChild (self .__ editrow); คืน Div; } function exec () {if (self .__ editrow) {// 如果当前处于编辑模式， 则禁用所有则禁用所有กลับคำสั่ง; } var commandName = this.commandName; var handler = self .__ cache ["commandhandles"] [commandname]; if (handler) {handler.call (นี่); }} // 去除模板行 templaterow.parentNode.removeChild (Templaterow); // 处理表格中的คำสั่ง事件องค์ประกอบ var = head.getElementsByTagname ("*"); องค์ประกอบ = util.parsearray (องค์ประกอบ); Elements.each (function () {if (this.nodeType === 1) {var commandname = this.command || this.getAttribute ("คำสั่ง"); ถ้า (commandName) {self .__ regCommand.call }, // bangding bind: function (data) {this.clear (); if (data && data.length> 0) {var self = this; data.each (function () {self.append (นี่);}); }}, // 清理表， 删除所以除ส่วนหัว以外的数据行 Clear: function () {var rows = this .__ cache ["dataRows"], แถว; rows.each (function () {row = this; if (row) {row.parentNode.removeChild (แถว);}}); rows.clear (); // 清理 rows}, // 删除指定的行 removerow: function (rowindex) {var rows = this .__ cache ["dataRows"]; var row = rows.get (rowindex); if (row) {var data = this .__ cache ["customcache"] [rowindex]; row.parentNode.removeChild (แถว); ROWS.REMOVE (ROWINDEX); // 通知用户数据行被移除ถ้า (util.isfunction (this.onRowRemoved)) {this.onRowRemoved (ข้อมูลแถว); }} สิ่งนี้ .__ REMOverOwCallback (); }, // 添加ผนวก: ฟังก์ชั่น (ข้อมูล) {ถ้า (! ข้อมูล) {return; } var template = this .__ cache ["template"]; var rows = this .__ cache ["dataRows"]; var rowindex = rows.length; var tr = template.clonenode (); var customCache = this .__ แคช ["customcache"]; CustomCache.add (ข้อมูล); // 将数据行添加到ตารางนี้. rooot.appendchild (tr); var self = this; var td, // 数据单元格 dataformat, // 数据格式化器 value; // 单元格中的给定的数据 tr.setAttribute ("ดัชนี", rowindex.toString ()); // 更改样式ถ้า (rowindex % 2 == 1) {tr.className = (tr.className || "") + "คี่"; } // 通知通知通知通知通知通知通知通知通知通知通知} var templatetd = template.firstchild; ในขณะที่ (templatetd) {td = templatetd.clonenode (จริง); Tr.AppendChild (TD); if (td.nodeType == 1 && templatetd.field) {dataFormat = this .__ cache ["dataFormat"] [templatetd.field]; td.removeattribute ("data"); td.field = templatetd.field; value = data [dataFormat.field]; // 通知单元格数据绑定事件 value = this.ondatabinding (dataformat.field, value, td, data); if (value! == false) {// 如果返回 false， 则不用做赋值操作 switch (dataFormat.render) {case "innerhtml": td.innerhtml = typeof value == "undefined" || ค่า == null? "" : ค่า; หยุดพัก; กรณี "innerText": ค่าเริ่มต้น: td.innerText = td.textContent = typeof value == "undefined" || ค่า == null? "" : ค่า; หยุดพัก; }}} templatetd = templatetd.nextsibling; } rows.add (tr); // 处理องค์ประกอบคำสั่ง var = tr.getElementsByTagname ("*"), ele, attr; องค์ประกอบ = util.parsearray (องค์ประกอบ); Elements.each (function () {ele = this; if (ele.nodeType == 1 && (ele.Command || ele.getAttribute ("คำสั่ง"))) {attr = ele.Command || ele.getattribute ("คำสั่ง"); // 通知行数据绑定完成通知行数据绑定完成行数据绑定完成行数据绑定完成行数据绑定完成通知通知通知通知通知通知}}, // 手动产生新的输入行 newLine: function () {ถ้า (นี้. editrow) {// 如果当前有存在编辑行， 则直接返回， 每次最多限制编辑一行数据每次最多限制编辑一行数据กลับ } var template = this .__ cache ["template"]; var row = this .__ editrow = template.clonenode (เท็จ); var templatetd = template.firstchild; var textarealist = []; ในขณะที่ (templatetd) {td = templatetd.clonenode (จริง); row.appendchild (TD); if (td.NodeType == 1) {ถ้า (templatetd.field) {td.field = templatetd.field; td.innerhtml = ""; var dataFormat = this .__ แคช ["dataFormat"] [templatetd.field]; var textarea = null; if (dataFormat.render == "innerhtml") {textarea = document.createElement ("textarea"); } else {textarea = document.createElement ("อินพุต"); textarea.type = "ข้อความ"; } textarea.style.display = "ไม่มี"; TD.AppendChild (Textarea); textarealist.push (textarea); }} templatetd = templatetd.nextsibling; } // 将数据行添加到ตารางนี้. rooot.appendchild (แถว); var height = row.offSetheight, width = row.offsetWidth, Offset = util.Offset (แถว); textarealist.each (ฟังก์ชั่น () {this.style.height = (0.8 * ความสูง) + "px"; this.style.width = (0.8 * this.parentNode.OffsetWidth) + "px"; this.style.display = ";}); var left = Offset.left + Width + 5; var top = offset.top; this.__SaveContainer.style.top = top + "px"; นี้ .__ savecontainer.style.left = ซ้าย + "px"; นี้ .__ savecontainer.style.height = this .__ saveContainer.style.lineHeight = ความสูง + "px"; นี้ .__ savecontainer.style.display = "block"; }, // 保存手动产生的数据行数据บันทึก: function () {ถ้า (! this .__ editrow) {return; } var row = this .__ editrow; var td = row.firstchild; var data = {}; ในขณะที่ (td) {ถ้า (td.nodeType === 1 && td.field) {var dataFormat = นี้. __ cache ["dataFormat"] [td.field]; var textarea = null; if (dataFormat.render == "innerhtml") {textarea = td.getElementByTagname ("textarea") [0]; } else {textarea = td.getElementByTagname ("อินพุต") [0]; } value = textarea.value; switch (dataFormat.datatype) {case "number": value = util.trim (value); value = number (value.length == 0? 0: ค่า); หยุดพัก; ค่าเริ่มต้น: break; } data [td.field] = ค่า; } td = td.nextsibling; } นี้ .__ editrow.parentNode.removeChild (. editrow); สิ่งนี้ .__ editrow = null; นี้ .__ savecontainer.style.display = "ไม่มี"; // 通知用户正在保存数据ถ้า (util.isfunction (this.onsaving)) {this.onsaving (data); } this.append (data); }, getRowData: function (rowIndex) {ส่งคืนสิ่งนี้. }, // 数据绑定到指定เซลล์时的事件 ondatabinding: ฟังก์ชั่น (ฟิลด์, ค่า, เซลล์, ข้อมูล) {ค่าส่งคืน; }, // 当数据行绑定开始时的事件 onrowbinding: ฟังก์ชั่น (rowindex, แถว) {}, // 当数据行绑定完成时的事件 //@@param row {dom element tr} onrowbinded: ฟังก์ชั่น (rowindex, แถว) {}, // 当编辑的数据被保存时的事件 onsaving: ฟังก์ชัน (data) {}, // grid.guid = 0; - </script> </head> <body> <table id = "table_demo"> <tr> <th> id </th> <th> ชื่อ </th> <th> descpription </th> <th> <button type = "button" command = "newline"> บรรทัดใหม่ data = '{"ฟิลด์": "id", "datatype": "number", "render": "innertext"}'> 1 </td> <td data = '{"ฟิลด์": "ชื่อ" data = '{"ฟิลด์": "คำอธิบาย", "dataType": "สตริง", "render": "innerhtml"}'> workingService </td> <td> <button type = "button" command = "type = javascript" document.getElementById ("table_demo"); var g = กริดใหม่ (ตาราง, {onDatabinding: ฟังก์ชัน (ฟิลด์, ค่า) {ค่าส่งคืน;}, onrowbinded: ฟังก์ชัน (rowindex, แถว) {}}); g.bind ([{id: 0, ชื่อ: "kilin"}, {id: 1, ชื่อ: "kilin1"}, {id: 2, ชื่อ: "kilin2"}, {id: 3, ชื่อ: "kilin3"}]); </script> </body> </html>