easyui datagrid实现行内编辑一列数据

原创 2016年08月31日 16:17:39

           这篇文章主要想介绍一下easyui 的datagrid控件实现行内编辑的功能。

我着这里主要实现的大概功能就是:可以行内编辑人员类别的功能,这里主要要用到editor(编辑器)

首先介绍一下editor相关的东西:

一 , 编辑器(editor)

 

datagrid 通过调用 beginEdit 传入要开始编辑行的对应的索引,该行进入编辑模式。通过 endEdit 或者 cancleEdit结束编辑模式,endEdit会提交一个数据变更记录,cancleEdit会还原为初始数据。

getEditors以及getEditor 返回指定行当前编辑器,getEditor 底层调用getEditors 方法。getEditors 返回一个编辑器对象数组。


二、实现的效果如下:

            图1:


当我们点击【设置】的时候可以编辑人员类别,如图2 所示

        图2:


从图2可以看出,我们可以人员类别下拉框中的选中我们希望设置的类别,然后保存到数据库

也可以点击取消,不进行修改,保持初始值。

二、实现步骤:

 (1)创建数据网格(datagrid)

//初始化datagrid
function initDatagrid(id,type){
	var url="${base}/system/queryEmployeeList.action?id="+id+"&type="+type;
	url=encodeURI(encodeURI(url));
	$("#dataGridObject").datagrid({
		title:'', //标题
		method:'post',
		border:false,
		singleSelect:true, //多选
		fitColumns: true, //自动调整各列,用了这个属性,下面各列的宽度值就只是一个比例。
		striped: true, //奇偶行颜色不同
		collapsible:true,//可折叠 
		url:url, //数据来源
		queryParams:params, //查询条件
		pageSize:20,
		pagination:true, //显示分页
		rownumbers:true, //显示行号
		columns:[[
		
			{field:'LBNAME',title:'人员类别',width:fillsize(0.15),sortable:false,align:'center',
				editor: {  
					 type:'combobox', 
				     options:{ 
				            valueField:'LBCODE', 
				            textField:'LBNAME', 
				            editable:false, 
				            mode:'remote'
				         }  
            		},
            		formatter:function(value,row,index){  
	            	    return row.LBNAME ;
						} 
	            	     	
			 },
			{field:'opt',title:'操作',align:'center', width:fillsize(0.1),sortable:false,align:'center', 
	            	formatter:function(value,row,index){  
	            	     var btn = '<a href="#" id="bj'+index+'" onclick="edit(\''+index+'\');">设置</a> '
	            	        + '<a href="#"  id="bc'+index+'" style="display:none" onclick="save(\''+index+'\',\''+row.EMP_ID+'\',\''+row.JOB_NUMBER+'\',\''+row.NAME+'\');">保存</a>'
	            	        + '<a href="#"  id="qx'+index+'" style="display:none" onclick="cancel(\''+index+'\');">取消</a>'; 
	                	 return btn;  
						}  	
		}
			]],

		onBeforeLoad: setQueryParams
  	});
}
为了启用datagrid的行内编辑功能,我们需要添加一个editor属性到列中,编辑器(editor)会告诉数据网格(datagrid)如何编辑字段值和如何保存字段值,正如上面代码写的

我在 人员类别 列定义了一个编辑器(editor): combobox 定义如下


editor里面的type:主要是对列中将要改变的数据做类型限制,共有text, textarea ,checkbox ,numberbox ,validatebox ,datebox, combobox, combotree。

editor 里面的option :为相应的类型属性

2、点击【设置】开启datagrid的行内编辑

【设置】javascript代码如下:

function edit(index){
		   $('#dataGridObject').datagrid('updateRow',{
			   index : parseInt(index),
		       row : {
		    	   LBNAME: ''    //更新的值  
		       }
		   });
		   $('#bj' + index).hide();
		   $('#bc' + index).show();
		   $('#qx' + index).show();
		   
		   //启动编辑
		   $('#dataGridObject').datagrid('beginEdit',index);
		   globalIndex =index;
		   $("#dataGridObject").datagrid("selectRow",globalIndex);
		   var row=$("#dataGridObject").datagrid("getSelected"); 
			 //设置人员类别
		   getYylb(row.LBNAME); 
	   }
	   //加载combobox的下拉列表【所长、副所长、科主任、科员】
	   function getYylb(type){  
		   //获取所有人员类别的url
		   var url = "${base}/system/getAllLb.action";
		   var ed = $("#dataGridObject").datagrid('getEditor', {index:globalIndex,field:'LBNAME'}); 
				$(ed.target).combobox({ 
					url:url,
					editable:false,
					multiple:false,
					panelWidth:160,
					panelHeight:'auto',  
					valueField:'LBCODE', 
			        textField:'LBNAME',
				 });
		}

这里面主要涉及的新的知识点有:

(1)datagrid 的updateRow 可以更新一个单元格

         用法如下:

 $('#dataGridObject').datagrid('updateRow',{
		       index : parseInt(index),
		       row : {
		    	   LBNAME: ''    //更新的值  
		       }
		   });
index: 表示更新datagrid的第几行
row里面的‘LBNAME’ 表示你要更新的字段名称,冒号后面的‘ ’表示更新的值
那么:LBNAME: ''   就表示将LBNAME字段的值更新为空。
(2)启动行内编辑
只有启动行内编辑了之后,才能进行编辑,开启行内编辑的代码如下:
//启动编辑
$('#dataGridObject').datagrid('beginEdit',index);
(3)获取指定行的编辑器,加载combobox下拉列表的数据(数据远程获取)
function getYylb(type){  
		   //获取所有人员类别的url
		   var url = "${base}/system/getAllLb.action";
		   var ed = $("#dataGridObject").datagrid('getEditor', {index:globalIndex,field:'LBNAME'}); 
				$(ed.target).combobox({ 
					url:url,
					editable:false,
					multiple:false,
					panelWidth:160,
					panelHeight:'auto',  
					valueField:'LBCODE', 
			        textField:'LBNAME',
				 });
这这段代码中:
var ed = $("#dataGridObject").datagrid('getEditor', {index:globalIndex,field:'LBNAME'}); 用到了editor的getEditor获取指行的编辑器,这一句代码的意思是获取datagrid的第globalIndex 行,字段’LBNAME‘列对应单元格的编辑器ed, 返回值ed (表示指定编辑器)包含四个属性:action、target、field、 type,我们可以在上面的editor(编辑器)的介绍中查看这几个属性代表的意思,我们主要获取这个对象是为了获取它的target属性,target属性是目标编辑器的jquery对象,其实这个对象指的即使我们的combobox对象,然后我们就可以用下面的方法远程加载编辑器里面的combobox的下拉列表数据了
$(ed.target).combobox({ 
					url:url,
					editable:false,
					multiple:false,
					panelWidth:160,
					panelHeight:'auto',  
					valueField:'LBCODE', 
			        textField:'LBNAME',
				 });

三、【保存】:将新设置的值保存在数据库中
js代码如下:
 // 保存设置的人员类别
		function save(index,empid,empno,name){
			$("#dataGridObject").datagrid("selectRow",globalIndex);
			var row=$("#dataGridObject").datagrid("getSelected");
			
			//获取人员类别编辑对象的combobox
			var lbed = $('#dataGridObject').datagrid('getEditor', {index:index,field:'LBNAME'});
			//获取人员类别编码
			var lbcode = $(lbed.target).combobox('getValue');
			if(lbcode == null || lbcode == '' ){
				$.messager.alert('提示','请选择人员类别','info');
				return ;
			}
			progressMask('open');
			$.ajax({
			    url:"${base}/system/saveLb.action",//保存人员类别
				data: {"empid":empid,"empno":empno,"name":name,"lbcode":lbcode}, // 员工id、人员类别
				type:"POST",
				dataType:"json",
				success:function(result){
					progressMask('close');
					if(result.data){
						$.messager.alert('提示',result.message,'success');
						$('#dataGridObject').datagrid('cancelEdit',index);
						$('#dataGridObject').datagrid('reload');//刷新
					}else{
						$.messager.alert('提示',result.message,'error');
					}
				}
			});	
		}

四、【取消】
代码如下:
            //取消
	   function cancel(index){
			$('#dataGridObject').datagrid('cancelEdit',index);
			$('#dataGridObject').datagrid('reload');
		}






版权声明:本文为博主原创文章,未经博主允许不得转载。

EasyUi DataGrid中数据编辑方式及编辑后数据获取,校验处理

  EasyUi中的DataGrid提供前台编辑的相关函数。 实现客户选中DataGrid中一列后,对选中列中的一个字段进行编辑,并对数据进行实时校验后,传递至后台保存的需求, 主要涉...

easyui实现datagrid行内编辑

easyui的datagrid行内编辑对于修改信息而言比较方便直观,下面举例说明:  需求说明:  在行内编辑员工状态    一、编辑jsp  Html代码   ...         ...
  • dotedy
  • dotedy
  • 2015年10月16日 01:07
  • 2601

Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】

前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据,同时对行内数据上移下移,所以对这几个功能做个总结。 1、首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添...

easyui-datagrid 行内编辑禁止字段可编辑

Row Editing DataGrid - jQuery EasyUI Demo Row Editing DataGrid Click the row to ...

easyui datagrid 行编辑功能(行内编辑、删除、保存、取消)

function initTT() { $("#tt").datagrid({ title: '批次', url: '', method: 'ge...
  • xuezt
  • xuezt
  • 2015年05月14日 22:48
  • 8078

easyui 数据表格行内编辑(编辑、保存、删除)

easyui 数据表格行内编辑(编辑、保存、删除)

easyui datagrid的列编辑,同时插入两张表的数据进去

看图说话。 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第二张表有一个列是需要用户手动填写添加的。 国际惯例,上代码 div...
  • s01896
  • s01896
  • 2017年04月30日 00:25
  • 87

easyui datagrid批量编辑向后台保存数据。

前台页面: String path = request.getContextPath(); String basePath = request.getScheme()+"://"+requ...

struts2+easyui datagrid可编辑操作及列表数据提交

//设置可编辑datagrid列表 $('#levelGlad').datagrid({               title:’自增可编辑列表’               toolbar:...

ASP.NET + EXTJS 实现类似GridView行内编辑、Pannel、分页、增删改查、数据验证,格式转换

Extjs版本:3.2.1 Newtonsoft.Json.dll (把数据序列化为Json格式)文件可在Newtonsoft官网去下载http://james.newtonking.com/ A...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui datagrid实现行内编辑一列数据
举报原因:
原因补充:

(最多只允许输入30个字)