javascript实现动态模态绑定grid过程代码_javascript技巧

 
 
  
 
  
 (function(){ 
 // 
 var util = { 
 next:function next(ele){ 
 if(ele){ 
 var n = ele.nextSibling; 
 if(n && n.nodeType === 1){ 
 return n; 
 } 
 return next(n); 
 } 
 }, 
 parseJSON:function(str){ 
 if(typeof JSON !== "undefined"){ 
 return JSON.parse(str); 
 } 
 return eval("("+str+")"); 
 }, 
 parseArray:function(obj){ 
 if(!obj){ 
 return obj; 
 } 
 var result = []; 
 if(typeof obj.length !== "undefined"){ 
 try{ 
 var arr = Array.prototype.slice.call(obj,0); 
 result = arr; 
 }catch(e){ 
 for(var i=0;i 0){ 
 var self = this; 
 data.each(function(){ 
 self.append(this); 
 }); 
 } 
 }, 
 //清理表，删除所以除header以外的数据行 
 clear:function(){ 
 var rows = this.__cache["dataRows"],row; 
 rows.each(function(){ 
 row = this; 
 if(row){ 
 row.parentNode.removeChild(row); 
 } 
 }); 
 rows.clear();//清理rows 
 }, 
 //删除指定的行 
 removeRow:function(rowIndex){ 
 var rows = this.__cache["dataRows"]; 
 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.__cache["template"]; 
 var rows = this.__cache["dataRows"]; 
 var rowIndex = rows.length; 
 var tr = template.cloneNode(); 
 var customCache = this.__cache["customCache"]; 
 customCache.add(data); 
 //将数据行添加到table 
 this.__root.appendChild(tr); 
 var self = this; 
 var td,//数据单元格 
 dataFormat,//数据格式化器 
 value;//单元格中的给定的数据 
 tr.setAttribute("index",rowIndex.toString()); 
 //更改样式 
 if(rowIndex % 2 == 1){ 
 tr.className = (tr.className || "") + " odd"; 
 } 
 //通知 行数据绑定开始 
 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" || value == null ? "" : value; 
 break; 
 case "innerText": 
 default: 
 td.innerText = td.textContent = typeof value == "undefined" || value == null ? "" : value; 
 break; 
 } 
 } 
 } 
 templateTD = templateTD.nextSibling; 
 } 
 rows.add(tr); 
 
 //处理command 
 var elements = tr.getElementsByTagName("*"),ele,attr; 
 elements = util.parseArray(elements); 
 elements.each(function(){ 
 ele = this; 
 if(ele.nodeType == 1 && (ele.command || ele.getAttribute("command"))){ 
 attr = ele.command || ele.getAttribute("command"); 
 self.__regCommand.call(ele,attr,tr); 
 } 
 }); 
 
 //通知 行数据绑定完成 
 if(util.isFunction(this.onRowBinded)){ 
 this.onRowBinded(rowIndex,tr); 
 } 
 }, 
 //手动产生新的输入行 
 newLine:function(){ 
 if(this.__editRow){//如果当前有存在编辑行，则直接返回，每次最多限制编辑一行数据 
 return; 
 } 
 var template = this.__cache["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.__cache["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; 
 } 
 //将数据行添加到table 
 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"; 
 this.__saveContainer.style.left = left + "px"; 
 this.__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 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; 
 default: 
 break; 
 } 
 data[td.field] = value; 
 } 
 td = td.nextSibling; 
 } 
 this.__editRow.parentNode.removeChild(this.__editRow); 
 this.__editRow = null; 
 this.__saveContainer.style.display = "none"; 
 
 //通知用户正在保存数据 
 if(util.isFunction(this.onSaving)){ 
 this.onSaving(data); 
 } 
 
 this.append(data); 
 }, 
 getRowData:function(rowIndex){ 
 return this.__cache["customCache"].get(rowIndex); 
 }, 
 
 //数据绑定到指定cell时的事件 
 onDataBinding:function(field,value,cell,data){ 
 return value; 
 }, 
 //当数据行绑定开始时的事件 
 onRowBinding:function(rowIndex, row){ 
 }, 
 //当数据行绑定完成时的事件 
 //@param row {DOM element tr} 
 onRowBinded:function(rowIndex, row){ 
 }, 
 //当编辑的数据被保存时的事件 
 onSaving:function(data){ 
 }, 
 //当数据行被移除时的通知事件 
 onRowRemoved:function(data,row){ 
 } 
 }; 
 
 grid.guid = 0; 
 })(); 
 
 
  
 
 
 
 
 
 
 
 
ID
 
 
Name
 
 
Descpription
 
 
New Line
 
 
 
 
 
 
1
 
 
WorkingService
 
 
WorkingService
 
 
 
 Delete