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