<html> <head> <スタイルタイプ= "Text/css"> .grid {border:1px solid#808080;境界面:0;幅:500px;境界線崩壊:崩壊} .grid th、.grid td {border:0; TEXT-ALIGN:center;} .grid tr {height:25px; line-height:25px;} .grid tr.odd {background:#d0d0d0} .grid .btn {width:80px; TEXT-ALIGN:center} </style> <script type = "text/javascript">(function(){// var util = {next:function next(ele){if(ele){ele.nextsibling; if(n&n.nodeType === 1){return n;} return next(n) json!== {return json.parse(str); array.prototype.slice.call(obj、0); 「未定義」{ターゲット)}}}}}オフセット:function offset(ele){var result = {top:0、left:0}; (ELE.Style.Top || "0")。置き換え(/[^/d]+$/、 "")); result.left = number(ele.offsetLeft ||(ELE.Style.Left || "0")。置き換え(/[^/d]+$/、 "")); if(ele.parentnode){var r = offset(ele.parentnode); result.top += r.top; result.left += r.left; } return result; }}; //事件处理var event = {on:function(eventType、fn){var element = this; if(this.addeventlistener){this.addeventlistener(eventType、fn、false); } else if(this.attachevent){//将事件缓冲到该标签上、已解决this指向window(现fn内this指向element)和移除匿名事件问题var _eventref = '_'+eventtype+'eventref'; if(!element [_eventref]){element [_eventref] = []; } var _eventrefs = element [_eventref]; varインデックス; for(_eventrefsのインデックス){if(_eventrefs [index] ['realfn'] == fn){return; }} var nestfn = function(){fn.apply(element、arguments); }; element [_eventref] .push({'realfn':fn、 'nestfn':nestfn}); Element.Attachevent( 'on'+eventType、nestfn); }}、remove: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]){element [_eventref] = []; } var _eventrefs = element [_eventref] var index; var nestfn; for(_eventrefsのインデックス){if(_eventrefs [index] ['realfn'] == fn){nestfn = _eventrefs [index] ['nestfn']; if(index == _ eventrefs.length-1){element [_eventref] = _ eventrefs.slice(0、index); } else {element [_eventref] = _ eventrefs.slice(0、index).concat(_eventrefs.slice(index+1、_eventrefs.length-1)); } 壊す; }} if(nestfn){element.detachevent( 'on'+eventType、nestfn); }}}}; // extend(function(){// arr2 = slice+1); i = 0; i <this length; i ++){if(i]!== "fn.call(this [i]、i)} // var collection = function() 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;}、function(fn){var index = 0; for(この.__データのvar k){if(k && typeof this .__ data [k]!== "undefined"){fn.call(this .__ data [k]、index ++); }}}、toarray:function(){var arr = []; this.each(function(){arr.push(this);}); arrを返します。 }}; })(); // var grid = this.grid = function(table、options){grid.prototype._init.call(this、table、options); } grid.prototype = {_init:function(table、options){if(typeof table === "undefined" ||!table){throw "テーブルは未定義またはnull"; } if(table.nodeType!== 1 ||!/^table $/i.test(tagle.tagname)){throw "table be 'table' element。"; } table.guid = ++ grid.guid;この.__ cache = {}; var self = this; var header = this .__ cache ["header"] = loadheader(); // header this .__ root = header.parentnode; var templaterow = this .__ cache ["template"] = loadtemplate(); // this .__ savecontainer = createSaveButton(); //保存按钮this .__ cache ["commandhandles"] = {// command handels 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 .__キャッシュ["datarows"]; var customcache = this .__キャッシュ["customcache"]; var arr = rows.toarray()、dataarr = []; var RowIndex、row、data; rows.clear(); arr.each(function(i){rowindex = this.getattribute( "index"); data = customcache.get(rowindex); dataarr.push(data); this.setattribute( "index"、i.tostring()); rows.add(this); if(i%2 == 1){// if(!// sodd/s |/sodd$/g.test(this.classname)){this.classname =(this.classname || "") + "odd"} this.classname.replace(// sodd/s |/sodd $/g "); customcache.clear(); dataarr.each(function(){customcache.add(this);}); } //事件处理オプション=オプション|| {}; this.ondatabinding = options.ondatabinding || this.ondatabind; this.onrowbinding = options.onrowbinding || this.onrowbinding; this.onrowbinde = options.onrowbinde || this.onrowbined; function 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); }} trを返します。 } function loadTemplate(){tr = util.next(header); // } function loaddataformat(){var nodes = templaterow.childnodes、ele、data、result = {}、attr; nodes = util.parsearray(nodes); nodes.each(function(i){ele = this; if(ele && ele.nodetype == 1){attr = ele.data || ele.getattribute( "data"); if(attr){data = util.parsejson(attr); ele.field = data.field;返品結果; } function createSaveButton(){var div = document.createElement( "div"); div.style.position = "absolute"; div.style.display = "none"; div.style.width = "auto"; var btn = document.createelement( "button"); btn.innerhtml = btn.innertext = btn.textcontent = btn.value = "save"; {btn.type = "button"; } catch(e){btn.setattribute( "type"、 "button"); } div.AppendChild(BTN); var btncancel = document.createelement( "button"); btncancel.innerhtml = btncancel.innertext = btncancel.textcontent = btncancel.value = "cancel"; 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); //处理表格中的コマンドbar要素= header.getElementsByTagname( "*");要素= util.parsearray(elements); elements.each(function(){if(this.nodetype === 1){var commandName = this.command || this.getAttribute( "command"); if(commandName){self .__ regcommand.call(this、commandname、header);}}}}}}}}}}}}}} }、//バンディングバインド: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"]、row; rows.each(function(){row = this; if(row){row.parentnode.removechild(row);}}); rows.clear(); //清理rows}、// var row = rows.get(rowindex); if(row){var data = this .__ cache ["customcache"] [rowindex]; row.ParentNode.RemoveChild(row); rows.remove(rowindex); //通知用户数据行被移除if(util.isfunction(this.onrowremoved)){this.onrowremoved(data、row); }} this .__ removerowcallback(); }、//添加添加append:function(data){if(!data){return; } var template = this .__キャッシュ["Template"]; var rows = this .__キャッシュ["datarows"]; var rowindex = rows.length; var tr = template.clonenode(); var customcache = this .__キャッシュ["customcache"]; customcache.add(data); //将数据行添加到テーブルThis .__ root.AppendChild(TR); var self = this; var td、//数据单元格dataformat、// //更改样式if(rowindex%2 == 1){tr.classname =(tr.classname || "") + "dud"; } //通知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 = typeof value == "undefined" ||値== null? "" : 価値;壊す; case "Innertext":default:td.innertext = td.textcontent = typeof value == "未定義" ||値== null? "" : 価値;壊す; }}} templatetd = templatetd.nextsibling; } rows.add(tr); // command var elements = tr.getelementsbytagname( "*")、ele、attr;要素= util.parsearray(elements); elements.each(function(){ele = this; if(ele.nodetype == 1 &&(ele.command || ele.getattribute( "command"))){attr = ele.command || getattribute( "command"); self .__ regcommand.call(ele、attr、tr);}}}; //通知if(util.isfunction(this.onrowbided)){this.onrowbinde(rowindex、tr); }}、// } var template = this .__キャッシュ["Template"]; 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 = 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( "input"); textarea.type = "text"; } textarea.style.display = "none"; Td.AppendChild(Textarea); textarealist.push(textarea); }} templatetd = templatetd.nextsibling; } //将数据行添加到テーブルThis .__ root.AppendChild(row); var height = row.offseTheight、width = row.offsetwidth、offset = util.offset(row); 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 + width + 5; var top = offset.top; this.__savecontainer.style.top = top + "px";この.__ savecontainer.style.left = left + "px";この.__ savecontainer.style.height = this .__ savecontainer.lineheight = height + "px";この.__ 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 textarea = null; if(dataformat.render == "innerhtml"){textarea = td.getelementsbytagname( "textarea")[0]; } else {textarea = td.getelementsbytagname( "input")[0]; } value = textarea.value; switch(dataformat.datatype){case "number":value = util.trim(value); value = number(value.length == 0?0:value);壊す;デフォルト:break; } data [td.field] = value; } td = td.nextsibling; } this .__ editrow.parentnode.removechild(this .__ editrow);この.__ editrow = null;この.__ savecontainer.style.display = "none"; //通知用户正在保存数据if(util.isfunction(this.Onsaving)){this.Onsaving(data); } this.append(data); }、getRowData:function(rowindex){return this .__ cache ["customcache"]。get(rowindex); }、// }、//当数据行绑定开始时的事件onrowbinding:function(rowindex、row){}、// grid.guid = 0; })(); </script> </head> <body> <table id = "table_demo"> <tr> <th> id </th> <th> descpription </th> <th> descpription </th> <th> <ボタン= "ボタン"コマンド= "newline" data = '{"field": "id"、 "dataType": "number"、 "render": "innertext"}'> 1 </td> <td data = '{"field": "name"、 "datatype": "string"、 "render": "innertext"}'> data = '{"field": "description"、 "dataType": "string"、 "render": "innerhtml"}'> workingservice </td> <td> <button = "button" command = "removerow" document.getElementById( "table_demo"); var g = new Grid(table、{ondatabinding:function(field、value){return value;}、onrowbinde:function(rowindex、row){}}); g.bind([{id:0、name: "kilin"}、{id:1、name: "kilin1"}、{id:2、name: "kilin2"}、{id:3、name: "kilin3"}]); </script> </body> </html>