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

最新推荐文章于 2020-10-21 21:42:49 发布

DemoJavaCss

最新推荐文章于 2020-10-21 21:42:49 发布

阅读量665

点赞数

分类专栏：框架实践文章标签： jquery-easyui中表格的行编辑功能 easyui-1.5 datagrid editor

本文链接：https://blog.csdn.net/u011252234/article/details/84824378

版权

本文深入解析jQuery EasyUI中的datagrid表格行编辑功能，包括点击添加新行、双击编辑行和删除选中行的实现方法。重点讨论了在editor属性中的URL参数设置问题，并提供了一种更合理的解决方案。查看完整代码实现，请访问相关链接。

摘要由CSDN通过智能技术生成

这一篇我们将对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){
				    	
				    },onBeforeEdi