<html> <head> <style type =“ text/css”> .grid {border {border：1px實心＃808080;邊界間距：0;寬度：500px;邊界崩潰：崩潰} .grid th，.grid td {border：0; text-align：center;} .grid tr {高度：25px; line-height：25px;} .grid tr.odd {背景：＃d0d0d0} .grid .btn .btn {width {width：80px; text-align：中心} </style> <script type =“ text/javaScript”>（function（）{// var util = {next：next：function next（ele）{if（ele）{var n = ele.nextsibling; if（n && n && n && n.odetype = == 1） json！==“ undefined”）{返回json.parse（str）;}返回（“+str+”）;} array.prototype.slice.call（obj，0）; “未定義”）{target）;偏移：函數offset（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 = offset（ele.parentNode）; result.top += r.top;結果。左 += r.left; }返回結果; }}; //事件處理var event = {on：function（eventType，fn）{var element = this; if（this.addeventListener）{this.addeventListener（eventType，fn，false）; } else if（this.attachevent）{//將事件緩衝到該標籤上，已解決，this this window（this this this指向元素）和移除匿名事件問題var _eventRef ='_'_''+eventType+'eventRef';如果（！element [_eventRef]）{element [_eventref] = []; } var _eventRefs = element [_eventRef]; var索引； for（_eventRefs中的索引）{if（_eventRefs [index] ['realfn'] == fn）{return; }} var nestfn = function（）{fn.apply（element，gragments）; }; element [_eventRef] .push（{'realfn'：fn，'nestfn'：nestfn}）; element.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';如果（！element [_eventRef]）{element [_eventref] = []; } var _eventRefs = element [_eventRef] var index; var nestfn; for（_eventRefs中的index）{if（_eventRefs [index] ['realfn'] == fn）{nestfn = _eventRefs [index] [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'on'+eventType，nestfn）; }}}}}; // Extend（function（）{//刪除數組中指定下標出的元素array.protype.remove = function（index）{var o = this [index]; if（typeof o！ ==“ undefined”）{if（index = = 0）{this.shift（this.shift（）;} else slice（0，index）; var arr2 = this.slice（index+1）; if（！ collect.protype = {add：function（obj）{this .__數據[this.length ++] = obj; }，clear：function（）{this .__ data = {}; this.length = 0; for（在此.__ data中的var k）{if（k && type this .__數據[k]！==“ undefined”）{fn.call（this .__數據[k]，index ++）; }}}，toarray：function（）{var arr = []; this.each（function（）{arr.push（this）;}）;返回arr; }}; }）（）; // var grid = this.grid = function（表，選項）{grid.prototype._init.call（this，table，options）; } grid.protype = {_init：function（table，options）{if（typeof table ===“ undefined” ||！table）{throw“ table是未定義的或null”; } if（table.nodetype！== 1 ||！/^表$/i.test（table.tagname））{投擲“表必須為'table'元素。”; } table.guid = ++ grid.guid;此.__ cache = {}; var self = this; var header = this .__緩存[“ header”] = loadheader（）; // header this .__ root = header.parentnode; var templaterow = this .__緩存[“ template”] = loadTemplate（）; //模板行this .__緩存[“ dataformat”] = loadDataFormat（）; // this .__ cache [dataRows'] = new Collection（new collection” = new Collection（） this .__ savecontainer = createsEveButton（）; // this .__緩存[“ commandHandles”] = {// Command handels RemoverOw：function（）{var rowIndex = this.getAttribute（“ index”）; self.removerow.apply（self，[rowindex]）; }，newline：function（）{self.newline（）; }}; this .__ regcommand = function（命令名，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（此“單擊”，exec）; } this .__ REMORVEROWCALLBACK = function（）{//改變行的背景樣式var rows = this .__緩存[“ datarows”]; var customcache = this .__緩存[“ customCache”]; var arr = lows.toArray（），dataarr = []; var Rowindex，行，數據； lows.clear（）; arr.each（function（i）{rowindex = this.getAttribute（“ index”）; data = customcache.get（rowindex）; dataarr.push（data）; this.setAttribute（“ index”，i.toString（i.toString（i.toString（）） 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（）{custyCache.add（this）;}）; } //事件處理選項=選項|| {}; this.ondatabinding = options.ondatabinding ||這個。 this.onrowbinding = options.onrowbinding ||這個。 this.onrowbinded = options.onrowbinded ||這個。函數loadHeader（）{var tr = table.firstchild; if（tr && tr.nodetype！= 1）{tr = util.next（tr）; } if（！/tr/i.test（tr.tagname））{//如果第一個元素不是tr，則瀏覽器支持tbodytr = tr.firstchild; if（tr.nodeType！= 1）{tr = util.next（tr）; }}返回tr; }函數loadTemplate（）{tr = util.next（header）; //獲取模板行返回tr; }函數loadDataFormat（）{var nodes = templaterow.childnodes，ele，data，result = {}，attr; nodes = util.parsearray（節點）; nodes.each（function（i）{ele = this; if（ele && ele.nodetype == 1）{attr = ele.data || ele.getAttribute（“ data”）; if（attr）{data = util.parsejson（at）返回結果； }函數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”;嘗試{btncancel.type =“ button”; } catch（e）{btncancel.setAttribute（“ type”，“” button”）; } div.AppendChild（btncancel）; document.body.body.appendchild（div）; event.on.call（btn，“ click”，function（）{self.save（）;}）; event.on.call（btncancel，“ click”，function（）{div.style.display =“ none”; if（self .__ edistrow）{self .__ edistrow.parentnode.removechild（self .__ ed.__ edistrow）返回div; } function exec（）{if（self .__ editrow）{//如果當前處於編輯模式，則禁用所有命令返回; } var命令名稱= this.commandName; var handler = self .__緩存[“ commandHandles”] [commandName];如果（處理程序）{handler.call（this）; }} //去除模板行templaterow.parentnode.removechild（templaterow）; //處理表格中的命令事件var elements = header.getElementsbytagname（“*”）; elements = util.parsearray（elements）; elements.each（function（）{if（this.nodeType === 1）{var命令名稱= this.command || this.getAttribute（“ command”）; if（commandname）{self .__ regcommand.call（this，commandname，name，header，header）;}}}}}}}）; }，// bangding綁定：function（data）{this.clear（）; if（data && data.length> 0）{var self = this; data.each（function（）{self.append（this）;}）; }}，//清理表，刪除所以除header以外的數據行clear：function（）{var rows = this .__緩存[“ datarows”]，row; lows.each（function（）{row = this; if（row）{row.parentnode.removechild（row）;}}）; lows.clear（）; //清理rows}，//刪除指定的行啟動：function（rowindex）{var rows = this .__ cache [“ datarows”]; var row = rows.get（rowindex）; if（row）{var data = this .__緩存[“ customCache”] [RowIndex]; row.parentnode.removechild（row）; ROWS.REMOVE（ROWINDEX）; //通知用戶數據行被移除If（util.function（this.onrowremaved））{this.onrowremaved（data，row）; }} this .__ removerowCallback（）; }，//添加添加附錄：function（data）{if（！ data）{return; } var template = this .__緩存[“ template”]; var行= this .__緩存[“ datarows”]; var rowindex = lows.length; var tr = template.clononode（）; var customcache = this .__緩存[“ customCache”]; customcache.add（data）; //將數據行添加到表this .__ root.AppendChild（tr）; var self = this; var td，//數據單元格dataformat，//數據格式化器值; //單元格中的給定的數據tr.setAttribute（“ index”，rowindex.toString（））; //更改樣式if（rowindex％2 == 1）{tr.ClassName =（tr.ClassName ||“”） +“奇數”; } //通知行數據綁定開始if（util.function（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？ ““ ： 價值;休息;案例“ innertext”：默認值：td.innertext = td.textContent = typeof value ==“ undefined” ||值== null？ ““ ： 價值;休息; }}} templatetd = templatetd.nextsibling; } lows.add（tr）; //處理命令var elements = tr.getElementsbytagname（“*”），ele，attr; elements = util.parsearray（elements）; elements.each（function（）{ele = this; if（ele.nodeType == 1 &&（ele.command || ele.getAttribute（“命令”）））{attr = ele.command || ele.getAttribute（' //通知通知if（util.function（this.onrowbinded））{this.onrowbinded（rowindex，tr）; }}，//手動產生新的輸入行newline：function（）{if（this .__ editrow）{//如果當前有存在編輯行} 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 *高） +“ 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”; this .__ savecontainer.style.left =左 +“ px”; this .__ savecontainer.style.height = this .__ savecontainer.style.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 .__緩存[“ 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）;值= number（value.length == 0？0：value）;休息;默認值：break; } data [td.field] = value; } td = td.nextsibling; } this .__ editrow.parentnode.removechild（this .__ editrow）;此.__ editrow = null; this .__ savecontainer.style.display =“ none”; //通知用戶正在保存數據If（util.function（this.onsaving））{this.onsaving（data）; } this.append（data）; }，getRowdata：function（rowindex）{返回此.__緩存[“ customCache”]。 get（rowindex）; }，//數據綁定到指定單元格時的事件ondatabinding：function（字段，值，單元格，數據）{return value; }，//當數據行綁定開始時的事件onrowbinding：function（rowindex，row）{}，//當數據行綁定完成時的事件//@param row {dom element tr} onrowbinded：function（rowIndex，row）{}，//當編輯的數據被保存時的事件onsaving：function（function（function（data）{}，// onrowRemever otrowRemem otrowRemect grid.guid = 0; }）（）; </script> </head> <body> <table id =“ table_demo”> <tr> <tr> <th> id </th> <th> name </th> <th> descpription </th> </th> <th> <th> <th> <button ofte data ='{“ field”：“ id”，“ dataType”：“ number”，“ render”：“ innertext”}'> 1 </td> <td data ='{“ field” field“：” name“ name”，“ dataType”，“ datatype”：“ string”，“ data ='{“ field”：“描述”，“ datatype”：“ string”，“ render”：“ innerhtml”}'}'> workingService </td> <td> <tdd> <tbutt> <butch document.getElementById（“ table_demo”）; var g = new Grid（表，{onDataBinding：function（field，value）{return value;}，onrowbinded：function（rowindex，row）{}}）{}}）; g.bind（[{id：0，name：“ bilin”}，{id：1，name：“ bilin1”}，{id：2，name：“ bilin2”}，{id：3，name：“ bilin3”}]）; </script> </body> </html>