Flexigrid的编辑功能

原创于 2013-06-24 14:15:41 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flexigrid #编辑 #input

技术同时被 2 个专栏收录

67 篇文章

订阅专栏

27 篇文章

订阅专栏

本文介绍了一种在网页中实现表格单元格编辑的方法。通过切换单元格显示状态，在编辑模式下将静态文本替换为可编辑的输入框，完成编辑后再将输入框内容转回文本形式保存更改。

editCells:function(){
				if(!isEditing){
					isEditing = true;
					$('tbody tr',$(t)).each(function () {
	    			for(var i=0;i<this.cells.length;i++){
	    				  var td = this.cells[i];
	    				  if(p.colModel[i].isEdit){
	    				  	  var div = $('div',$(td));
										div[0].innerHTML = '<input type="text" style="width:' + (p.colModel[i].width-2) + 'px" value="'+div[0].innerHTML+'"/>';
								}
	    			}
	    		});
    	  }
			},
			commitCells:function(){
				if(!isEditing) return;
				$('tbody tr',$(t)).each(function() {
    			for(var i=0;i<this.cells.length;i++){
    				  var td = this.cells[i];
    				  if(p.colModel[i].isEdit){
    				  	  var div = $('div',$(td));
    				  	  var inputbox = $('input',$(div[0]));
    				  	  if(inputbox.length>0){
										div[0].innerHTML = inputbox[0].value;
								  }
							}
    			}
    		});
    		isEditing = false;
			}

效果如下图

该章节不贴全部代码了，详细代码可以参见前面博文的介绍