视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript实现动态模态绑定grid过程代码_javascript技巧
2020-11-27 21:27:23 责编:小采
文档


 
 
  
 
  
 (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
1 WorkingService WorkingService

下载本文
显示全文
专题