jquery-easyui中datagrid表格的行编辑功能

这一篇我们将对datagrid editor属性来进行详解

功能：1.点击添加，在首行上面添加一行，2.双击时编辑一行，3.删除选中所有行数，

就以以上三个功能的实现做解释

1.写在editor()中的url加参数不可行，因为初使化datagrid与其combotree时就已定死，所以改为更合理的方式

center_datagrid=$('#center_datagrid').datagrid({
				    url://获取数据
				    columns:[[
						{field:'cid',title:'id',width:50,hidden:false,align:'center',checkbox:true},
						{field:'cname',title:'角色',width:90,align:'center',editor:{type:'validatebox',options:{required:true}}},
						{field:'cdesc',title:'描述',width:200,align:'center',editor:{type:'validatebox'}},
						{field:'authId',title:'权限id',width:50,hidden:true,align:'center'},
						{field:'authName',title:'权限',width:450,align:'center',
						editor:{type:'combotree',options:{multiple:true,checkbox:true,lines:true,onClick:function(node){
							//editorValue=$(editorT.target).combotree('getChecked');//三种状态值，默认为'checked'
							//$(editorT.target).combotree('setValues',editorValue);
						}}
						}}]],
				    toolbar:[{
						text:'添加',
						iconCls:'icon-add',
						handler:function(){
							//alert("add");
							add();
						}				    
				    },'-',{
				    	text:'删除',
				    	iconCls:'icon-remove',
				    	handler:function(){
				    		remove();
				    	}
				    },'-',{
				    	text:'编辑',
				    	iconCls:'icon-edit',
				    	handler:function(){
				    		edit();
				    	}
				    },'-',{
				    	text:'取消编辑',
				    	iconCls:'icon-cancel',
				    	handler:function(){
				    	}
				    },'-',{
				    	text:'保存',
				    	iconCls:'icon-save',
				    	handler:function(){
				    		save();
				    	}
				    }],
				    onDblClickRow:function(rowIndex,rowData){
				    	
				    },onBeforeEdit:function(rowIndex, rowData){
				    	//编辑时选中
			    		//清除所有选中的

				    	//获取选中的那一行数据
				    	var row=center_datagrid.datagrid('getSelected');

						$.ajax({});
				    },onAfterEdit:function(rowIndex, rowData, changes){
				    
				    }});
		});
		

 //下面是上面骨架详细实现,详细请看源代码http://download.csdn.net/detail/u011252234/9670064

 

<script type="text/javascript">
		var center_datagrid;
		var editorRow=undefined;
		var editorValue;
		var editorNameText;
		var editorDesText;
		var editorT;
		var str=[];
		var b=true;
		var dataCombotree;
		//http://www.cnblogs.com/kexb/p/3685913.html
		//url:'${pageContext.request.contextPath}/authController/combotree?editorValue='+editorValue,
		$(function(){
			center_datagrid=$('#center_datagrid').datagrid({
				    url:'${pageContext.request.contextPath}/roleController/datagrid',
				    fit:true,
				    nowrap:false,
				    checkOnSelect:true,
				    selectOnCheck:false,
				    border:0,
				    columns:[[
						{field:'cid',title:'id',width:50,hidden:false,align:'center',checkbox:true},
						{field:'cname',title:'角色',width:90,align:'center',editor:{type:'validatebox',options:{required:true}}},
						{field:'cdesc',title:'描述',width:200,align:'center',editor:{type:'validatebox'}},
						{field:'authId',title:'权限id',width:50,hidden:true,align:'center'},
						{field:'authName',title:'权限',width:450,align:'center',
						editor:{type:'combotree',options:{multiple:true,checkbox:true,lines:true,onClick:function(node){
							//editorValue=$(editorT.target).combotree('getChecked');//三种状态值，默认为'checked'
							//$(editorT.target).combotree('setValues',editorValue);
						}},onCheck:function(node, checked){
							//editorValue=$(editorT.target).combotree('getChecked');//三种状态值，默认为'checked'
							//$(editorT.target).combotree('setValues',editorValue);
						}
						}}]],
				    toolbar:[{
						text:'添加',
						iconCls:'icon-add',
						handler:function(){
							//alert("add");
							add();
						}				    
				    },'-',{
				    	text:'删除',
				    	iconCls:'icon-remove',
				    	handler:function(){
				    		remove();
				    	}
				    },'-',{
				    	text:'编辑',
				    	iconCls:'icon-edit',
				    	handler:function(){
				    		edit();
				    	}
				    },'-',{
				    	text:'取消编辑',
				    	iconCls:'icon-cancel',
				    	handler:function(){
				    		if(editorRow!=undefined){
				    			center_datagrid.datagrid('endEdit',editorRow);
				    			editorRow=undefined;
				    			center_datagrid.datagrid('reload');
				    		}
				    	}
				    },'-',{
				    	text:'保存',
				    	iconCls:'icon-save',
				    	handler:function(){
				    		save();
				    	}
				    }],
				    onDblClickRow:function(rowIndex,rowData){
				    	if(editorRow!=undefined){
				    		center_datagrid.datagrid('endEdit',editorRow);
				    		editorRow=undefined;
				    	}
				    	if(editorRow==undefined){
				    		center_datagrid.datagrid('beginEdit',rowIndex);
				    		editorRow=rowIndex;
				    		editorT=center_datagrid.datagrid('getEditor',{index:editorRow,field:'authName'});
							//editorText=$(editor.target).combotree('getText');

							$(editorT.target).combotree('setValues',[]);

							//加载数据	
							$(editorT.target).combotree('loadData',dataCombotree);
				    	}
				    },onBeforeEdit:function(rowIndex, rowData){
				    	//编辑时选中
			    		//清除所有选中的
			    		center_datagrid.datagrid('unselectAll');
			    		center_datagrid.datagrid('selectRow',rowIndex);
				    	//获取选中的那一行数据
				    	var row=center_datagrid.datagrid('getSelected');
				    	//是否为空对象
				    	if(!$.isEmptyObject(row)){
				    		editorValue=row.authName.split(";").join(",");
				    	}

						//editorValue=$(editor.target).combotree('getValue');
						//post是异步
						/*
						$.post('${pageContext.request.contextPath}/authController/combotree',{editorValue:editorValue},function(data){
							dataCombotree=data;
						},'json');
						*/
						//需要的是同步
						$.ajax({url:'${pageContext.request.contextPath}/authController/combotree',data:{editorValue:editorValue},
						 	type :"post",  
       						dataType : "json",
							async : false,
							success:function(data){
								dataCombotree=data;
							}});
				    },onAfterEdit:function(rowIndex, rowData, changes){
				    
				    }});
		});
		
		//方法
		function add(){
			//在第一行添加一行
			if(editorRow!=undefined){
				center_datagrid.datagrid('endEdit',editorRow);
				editorRow=undefined;
			}
			if(editorRow==undefined){
				center_datagrid.datagrid('insertRow',{
					index:0,
					row:{
					}
				});
				//进入编辑状态
				center_datagrid.datagrid('beginEdit',0);
				editorRow=0;
				//加载数据
				editorT=center_datagrid.datagrid('getEditor',{index:editorRow,field:'authName'});
				//editorText=$(editor.target).combotree('getText');
				$(editorT.target).combotree('setValues',[]);

				
				//选中编辑的这一行
				center_datagrid.datagrid('selectRow',0);
				
				
				//加载数据	
				$(editorT.target).combotree('loadData',dataCombotree);
			}
			
		}
		
		function remove(){
			var ids="";
			var b=false;
			var rows=center_datagrid.datagrid('getChecked');
			if(!$.isEmptyObject(rows)){
				for(var i=0;i<rows.length;i++){
					if(b){
						ids+=","+rows[i].cid;
					}else{
						ids+=rows[i].cid;
						b=true;
					}	
				}
				
				$.ajax({
					url:'${pageContext.request.contextPath}/roleController/delete',
					type:"post",
					data:{ids:ids},
					success:function(data){
						var json=$.parseJSON(data);
						if(json.success){
							$.messager.show({
								title:'提示',
								msg:json.msg
							});
							center_datagrid.datagrid('reload');
						}else{
							$.messager.show({
								title:'提示',
								msg:json.msg
							});
						}
					}
				});
			}
		}
		
		function edit(){
			var str=center_datagrid.datagrid('getSelections');
			if(str.length==1){
				if(editorRow!=undefined){
					center_datagrid.datagrid('endEdit',editorRow);
				}
			}else if(str.length>1){
				$.messager.alert('提示','不允许多行编辑,请选择一行!');
			}else{
				$.messager.alert('提示','请请中一行,再进行编辑');
			}
		}
		
		function save(){
		
			//editorValue=$(editorT.target).combotree('getValue');//这个只能获取一个值
			editorValue=$(editorT.target).combotree('getValues');
			editorValue=editorValue.join(",");
			//editorText=$(editorT.target).combotree('getText');//这个获取所有的文本
			var row=center_datagrid.datagrid('getSelected');
			
			if($.isEmptyObject(row)){
				editorNameText=center_datagrid.datagrid('getEditor',{index:0,field:'cname'});
				editorDesText=center_datagrid.datagrid('getEditor',{index:0,field:'cdesc'});
				//validatebox的值获取
				row.cname=$(editorNameText.target).val();
				row.cdesc=$(editorDesText.target).val();
			}
			
			//row.authName;
			//row.authId;
			
			$.ajax({
				url:'${pageContext.request.contextPath}/roleController/saveOrUpdate',
				type:"post",
				data:{editorValue:editorValue,cid:row.cid,cname:row.cname,cdesc:row.cdesc},
				success:function(data){
					var json=$.parseJSON(data);
					if(json.success){
						$.messager.show({
							title:'提示',
							msg:json.msg
						});
						center_datagrid.datagrid('endEdit',editorRow);
						center_datagrid.datagrid('reload');
					}else{
						$.messager.show({
							title:'提示',
							msg:json.msg
						});
					}
				}
			});
		}
	</script>