datagrid 内嵌 combotree 显示 valueField 而不是 valueText 的解决办法

问题描述:获取部门树,从数据库中返回的数据格式为{id: text:},其中id为部门ID,text为部门名称。在 datagrid 中 unitName(部门名称,下拉选)为  combotree  类型。当编辑某一行时,选择相应部门名称,但是结束行编辑时该列字段显示的是  【部门ID】 而不是 【部门名称】。


1)在 部门下拉树  中选择  销售部

datagrid 内嵌 combotree 显示 valueField 而不是 valueText 的解决办法_第1张图片


2)选择之后会在  部门下拉树  中显示  销售部


3) 但是当结束改行编辑时(endEdit),部门下拉树 就会显示 【 部门ID】  而不是  【部门名称】



解决方法:

1  定义全局变量 unitName

//接收部门下拉树的部门名称
var unitName = undefined;

2  在  部门下拉树  中的 onSelect  时间中为 unitName 赋值

					{field:'receivablesUnitName',title:'回款部门',width:100,
						editor:{
							type:'combotree',
							options:{
								required:true,
								valueField : 'id',
								textField : 'text',
								data : unitList,
								panelHeight:"auto",
								onSelect : function(record){
									var edUnitId = $("#receivablesRecordsDatagrid").datagrid('getEditor',{
										index : lastEditRowIndex,
										field : 'receivablesUnitId',
									});
									$(edUnitId.target).val(record.id);
									//为 unitTreeName赋值
									unitTreeName = record.text;
								
								}
							}
						},
//						formatter : function(value,row,index){
//							if(row.eventId != undefined && row.eventId.length > 15){
//								return value;
//							}else{
//								return unitTreeName;
//							}
//						}
					},

3  在OnEndEdit 事件中 为 部门下拉树  赋值显示

		onEndEdit : function(index,row){
			if(unitTreeName == undefined){
				$("#receivablesRecordsDatagrid").datagrid('getRows')[index]['receivablesUnitName'] = unitTreeName;
			}
		}

解决结果图:




除了这种方法,还可以通过 formatter 来解决这样的问题。因为无论是加载数据与编辑结束时datagrid都会执行formatter函数,所以我们可以用它来输出我们想要的内容。这种方法已经写出,处在赘述,但是当记录表中已经存在数据时,需要做一个判断,这里通过 eventId 来区分是数据库中已经存在记录还是新增的记录(在这里已存在的 eventId 是一个长度为38位的字符串,新增的 eventId 是一个长度为4的字符串)


总结:

1) formatter 无论加载数据或编辑结束都会执行

2) onEndEdit  事件 与 onAfterEdit 事件的不同

3)getEditor 只能对正在编辑的行起作用,当某一行已经结束编辑,getEditor 获取的值为 null

4)为 datagrid 中某一行的某一列赋值 ,可以通过以下语句

$("#receivablesRecordsDatagrid").datagrid('getRows')[index]['receivablesUnitName'] = unitTreeName;

index为行号, receivablesUnitName为列名

5)  onSelect 中 record 保存的是  combobox 所选择的数据  id  和  text  值


你可能感兴趣的:(easyUI)