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