<html> <head> <style type = "text/css"> .grid {테두리 : 1px solid #808080; 국경 간격 : 0; 너비 : 500px; Border-Collapse : Collapse} .Grid th, .grid td {border : 0; Text-Align : Center;} .grid tr {height : 25px; line-height : 25px;} .grid tr.odd {background :#d0d0d0} .grid .btn {너비 : 80px; Text-Align : center} </style> <script type = "text/javaScript"> (function () {// var util = {next : next : next (ele) {if (var n = ele.nextsibling; if (n && n.nodetype == 1) {return n;} return (n); JSON! = "return JSON.PARSE (str);"( "+str+"); array.slice.call (obj, 0); "undefined"){ result.push(target); delete target; } } } } return result; }, isFunction:function(fn){ return typeof fn === "function"; }, trim:function(str){ if(typeof str !== "string"){ return str; } return str.replace(/^/s+|/s+$/g,""); }, offset:function 오프셋 (ele) {var result = {top : 0, 왼쪽}; (ele.style.top || "0"). 교체 (/[^/d]+$/, ""); result.left = number (ele.offsetleft || (ele.style.left.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); } else if (this.attachevent) {// 将事件缓冲到该标签上, 已解决 this 指向 wind if (! element [_eventRef]) {요소 [_eventRef] = []; } var _eventRefs = 요소 [_eventRef]; var index; for (eventrefs의 index) {if (_eventrefs [index] [ 'realfn'] == fn) {return; }} var nestfn = function () {fn.apply (요소, 인수); }; 요소 [_eventRef] .push ({ 'realfn': fn, 'nestfn': nestfn}); 요소 .attachevent ( 'on'+eventtype, nestfn); }}, 제거 : function (eventType, fn) {var element = this; if (this.removeEventListener) {this.removeEventListener (EventType, fn, false); } else if (this.detachevent) {var _eventref = '_'+eventType+'eventRef'; if (! element [_eventRef]) {요소 [_eventRef] = []; } var _eventRefs = 요소 [_eventRef] var index; var nestfn; for (eventRefs의 index) {if (_eventRefs [index] [ 'realfn'] == fn) {nestfn = _eventRefs [index] [ 'nestfn']; if (index == _ eventRefs.length-1) {요소 [_eventRef] = _ eventRefs.slice (0, index); } else {요소 [_eventRef] = _ eventRefs.slice (0, index) .concat (_eventrefs.slice (index+1, _eventrefs.length-1)); } 부서지다; }} if (nestfn) {element.detachevent ( 'on'+eventtype, nestfn); }}}}; // function () {// array.prototype.remove = function (index) {index) {var o = this [index]; if (typeof o! == "undefined") {if (index == 0) {this.shift ();} else (index === this.length -1) {var art.pop ();}; ARR2 (index+1) i = 0; this. this.__data[this.length++] = obj; }, get:function(index){ return this.__data[index]; }, remove:function(index){ var obj = this.__data[index]; if(typeof obj !== "undefined"){ this.length--; } delete this.__data[index]; }, clear:function(){ this.__data = {}; this.length = 0;}, 함수 (fn) {var index = 0; for (var k in this .__ data) {if (k && this. }}}, toArray : function () {var arr = []; this.each (function () {arr.push (this);}); 반환 ARR; }}; }) (); // var grid = this.grid = function (테이블, 옵션) {grid.prototype._init.call (this, 테이블, 옵션); } grid.prototype = {_init : 함수 (테이블, 옵션) {if (typeof table === "undefined"||! table) {Throw "테이블은 정의되지 않았거나 null"; } if (table.nodeType! == 1 ||!/^표 $/i.test (tageName)) { "Tash"테이블은 '테이블'요소 "; } table.guid = ++ grid.guid; 이 .__ cache = {}; var self = 이것; var header = this .__ 캐시 [ "헤더"] = loadheader (); // header this .__ root = header.parentNode; var templaterow = this .__ cache [ "template"] = loadtemplate (); // 模板行 this .__ this .__ cache [ "dataformat"] = loaddataformat (); // 数据模板 this .__ this .__ cache [ "datarows"] = new Collection (); // th this .__ 캐시 [ "Customcace"] = new Collection (); this .__ savecontainer = createSaveButton (); // 保存按钮 th this .__ cache [ "commandHandles"] = {// 명령 핸드 오버 removerow : function () {var rowIndex = this.getAttribute ( "index"); self.removerow.apply (self, [rowindex]); }, newline : function () {self.newline (); }}; this .__ regcommand = function (commandName, row) {// 注册 명령 if (row) {var arg = row.getAttribute ( "index"); this.setattribute ( "index", arg || false); } this.commandName = CommandName; event.remove.call (this, "click", exec); event.on.call (this, "click", exec); } this .__ removerOwCallback = function () {// 改变行的背景样式 var rows = this .__ cache [ "DataRows"]; var customCache = this .__ 캐시 [ "CustomCache"]; var arr = rows.toarray (), dataarr = []; var rowindex, 행, 데이터; rows.clear (); arr.each (function (i) {rowindex = this.getAttribute ( "index"); data = customCache.get (rowIndex); dataarr.push (data); this.setAttribute ( "index", i.toString ()); add (this); if (i % 2 == 1) {// 基数行 基数行. 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 = Options.ondatabinding || this.ondatabinding; this.onrowbinding = Options.onrowbinding || 이. rowbinding; this.onrowbinded = 옵션 이. rowbind; 함수 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; } function loadTemplate () {tr = util.next (헤더); // 获取模板行 return tr; } 함수 loadDataFormat () {var nodes = templaterow.childnodes, ele, data, result = {}, attr; 노드 = util.parsearray (노드); 노드 .Each (function (i) {ele = this; if (ele && ele.nodeType == 1) {attr = ele.data || ele.getAttribute ( "data"); if (attr) {data = util.parsejson (att); ele.field = data.field; 결과 [ele.field] = data}}); 반환 결과; } 함수 createSaveButton () {var div = document.createElement ( "div"); div.style.position = "절대"; div.style.display = "none"; div.style.width = "Auto"; var btn = document.createElement ( "버튼"); btn.innerhtml = btn.innertext = btn.textContent = btn.value = "저장"; {btn.type = "버튼"을 시도하십시오. } catch (e) {btn.setattribute ( "type", "button"); } Div.AppendChild (BTN); var btncancel = document.createElement ( "버튼"); btncancel.innerhtml = btncancel.innertext = btncancel.textContent = btncancel.value = "취소"; try {btncancel.type = "button"; } catch (e) {btncancel.setattribute ( "type", "button"); } Div.AppendChild (btncancel); Document.body.appendChild (div); event.on.call (btn, "click", function () {self.save ();}); event.on.call (btncancel, "click", function () {div.style.display = "none"; if (self .__ editrow) {self .__ editrow.parentnode.removechild (self .__ editrow); self .__ editrow = null;}); 반환 div; } function exec () {if (self .__ editrow) {// 如果当前处于编辑模式, 则禁用所有 명령 return; } var commandname = this.commandName; var handler = self .__ 캐시 [ "CommandHandles"] [CommandName]; if (handler) {handler.call (this); }} //} templaterow.parentNode.removeChild (Templaterow); // 处理表格中的 명령 处理表格中的 var elements = header.getElementsByTagName ( "*"); 요소 = util.parsearray (요소); elements.each (function () {if (this.nodetype === 1) {var commandname = this.command || this.getAttribute ( "명령"); if (commandname) {self .__ regcommand.call (this, commandname, header);}}); }, // bangding bind : function (data) {this.clear (); if (data && data.length> 0) {var self = this; data.each (function () {self.append (this);}); }}, // 清理表 清理表, 删除所以除 헤더 以外的数据行 clear : function () {var rows = this .__ cache [ "datarows"], 행; rows.each (function () {row = this; if (row) {row.parentNode.RemoveChild (row);}}); rows.clear (); // 清理 rows}, // 删除指定的行 removerow : function (rowindex) {var rows = this .__ 캐시 [ "Datarows"]; var row = rows.get (rowindex); if (row) {var data = this .__ cache [ "CustomCache"] [rowIndex]; row.parentNode.RemoveChild (행); rows.remove (rowindex); // 通知用户数据行被移除 if (util.ispunction (this.onrowremoved)) {this.onrowremoved (data, row); }} this .__ removerOwCallback (); }, // /行 append : function (data) {if (! data) {return; } var 템플릿 = this .__ 캐시 [ "템플릿"]; var rows = this .__ cache [ "datarows"]; var rowindex = rows.length; var tr = template.clonenode (); var customCache = this .__ 캐시 [ "CustomCache"]; customCache.add (데이터); // 将数据行添加到 테이블 this .__ root.appendChild (Tr); var self = 이것; var td, //, dataformat, // 数据格式化器 value; // 单元格中的给定的数据 tr.setattribute ( "index", rowindex.toString ()); // 更改样式 if (rowIndex % 2 == 1) {tr.className = (tr.className || "") + "홀수"; } // 通知 /if (util.isfunction (this.onrowbinding)) {this.onrowbinding (rowindex, tr); } var templatetd = template.firstchild; while (templatetd) {td = templatetd.clonenode (true); 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 = type value == "undefined"|| value == null? "" : 값; 부서지다; "InnerText": 기본값 : td.innerText = td.textContent = typeof value == "undefined"|| value == null? "" : 값; 부서지다; }}} templatetd = templatetd.nextsibling; } rows.add (tr); // 处理 명령 var elements = tr.getElementsByTagName ( "*"), ele, attr; 요소 = util.parsearray (요소); elements.each (function () {ele = this; if (ele.nodetype == 1 && (ele.command || ele.getAttribute ( "명령"))) {attr = ele.command || ele.getAttribute ( "명령"); self .__ regcommand.call (ele, att, tr);}); // 通知 行数据绑定完成 if (util.isfunction (this.onrowbinded)) {this.onrowbinded (rowindex, tr); }}, // 手动产生新的输入行 newline : function () {if (this .__ editrow) {// 如果当前有存在编辑行, 则直接返回, 每次最多限制编辑一行数据 return; } var 템플릿 = this .__ 캐시 [ "템플릿"]; var row = this .__ editrow = template.clonenode (false); var templatetd = template.firstchild; var textarealist = []; while (templatetd) {td = templatetd.clonenode (true); Row.appendChild (TD); if (td.nodeType == 1) {if (templatetd.field) {td.field = 템플릿 테드. 필드; td.innerhtml = ""; var dataformat = this .__ cache [ "dataformat"] [templatetd.field]; var textRea = null; if (dataformat.render == "innerHtml") {textArea = document.createElement ( "TextArea"); } else {textArea = document.createElement ( "입력"); textRea.type = "텍스트"; } textRea.style.display = "None"; Td. AppendChild (Textarea); Textarealist.push (Textarea); }} templatetd = templatetd.nextsibling; } // 将数据行添加到 테이블 this .__ root.appendChild (행); var height = row.offsetheight, width = row.offsetWidth, Offset = util.offset (행); Textarealist.each (function () {this.style.height = (0.8 * height) + "px"; this.style.width = (0.8 * this.parentNode.offsetWidth) + "px"; this.style.display = "";}); var left = Offset.left + 너비 + 5; var top = offset.top; this.__saveContainer.style.top = Top + "PX"; this .__ savecontainer.style.left = left + "px"; 이 .__ savecontainer.style.height = this .__ savecontainer.style.lineheight = height + "px"; this .__ savecontainer.style.display = "block"; }, // /save : function () {if (! this .__ editrow) {return; } var row = this .__ editrow; var td = row.firstchild; var data = {}; while (td) {if (td.nodetype === 1 && td.field) {var dataformat = this .__ cache [ "dataformat"] [td.field]; var textRea = null; if (dataformat.render == "innerHtml") {textArea = td.getElementsByTagName ( "TextArea") [0]; } else {textArea = td.getElementsByTagName ( "input") [0]; } value = textRea.Value; switch (dataformat.datatype) {case "number": value = util.trim (value); 값 = 숫자 (value.length == 0? 0 : value); 부서지다; 기본값 : 브레이크; } data [td.field] = 값; } td = td.nextsibling; } this .__ editrow.parentNode.removeChild (this .__ editrow); 이 .__ editrow = null; this .__ savecontainer.style.display = "none"; // 通知用户正在保存数据 if (util.isfunction (this.onsaving)) {this.onsaving (data); } this.Append (데이터); }, getRowData : function (rowIndex) {return this .__ cache [ "CustomCache"]. get (rowIndex); }, // /셀 + Ondatabinding : 함수 (필드, 값, 셀, 데이터) {return value; }, // /onrowbinding : function (rowIndex, row) {}, // 当数据行绑定完成时的事件 //@parame row {dom element tr} onrowbinded : function (rowIndex, row) {}, // 当编辑的数据被保存时的事件 ansaving : function (data) {}, // 当数据行被移除时的通知事件 当数据行被移除时的通知事件 onrowremoved : function (data, row)}}; grid.guid = 0; }) (); </script> </head> <body> <table id = "table_demo"> <tr> <th> id </th> <th> name </th> <th> descpription </th> <th> <버튼 유형 = "button"명령 = "newline"> new line </button> </th> </tr> <td data = '{ "field": "id", "datatype": "number", "render": "innertext"}'> 1 </td> <td data = '{ "field": "name", "datatype": "string", "render": "innertext"}'> workingservice </td> <td data = '{ "field": "description", "datatype": "string", "render": "innerhtml"}'> WorkingService </td> <td> <버튼 유형 = "command ="Removerow "> delete </td> </tr> </table> <스크립트 타입/var table"> var table = document.getElementById ( "table_demo"); var g = new 그리드 (테이블, {ondatabinding : 함수 (필드, 값) {return value;}, onrowbinded : function (rowindex, row) {}}); g.bind ([{id : 0, name : "kilin"}, {id : 1, name : "kilin1"}, {id : 2, name : "kilin2"}, {id : 3, name : "kilin3"}]); </script> </body> </html>