解决easyui propertygrid控件中，combobox控件（下拉框控件）回显value值的问题

最新推荐文章于 2020-12-01 19:28:43 发布

原创最新推荐文章于 2020-12-01 19:28:43 发布 · 8.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #propertygrid #下拉框回显 #formatter #datagrid

本文介绍了一种解决EasyUI中PropertyGrid控件下拉框值回显问题的方法，通过为PropertyGrid的columns属性添加formatter回调函数，实现了正确显示下拉框对应的文本值，同时保持传送至服务器的数据不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景：

我们用easyui做项目，经常会碰到这样的场景，如下图：

没错，我们都喜欢弹出个对话框，然后在里面放个propertygrid控件来实现ui布局和信息的输入。但是如果其中含有需要下拉框选择的字段，比如“性别”，就会出现经典的下拉框value值回显的问题，如下面的几张图所示：

是不是有种似曾相识的感觉涌上心头？

关键问题是，我百度了半个下午，找到了个解决方案，就是用$extend强制扩展propertygrid控件，但是特么的不管用。是的，你没看错，没有卵用。得，还是要自己动手，丰衣足食。经过我半个小时不断地试错，终于搞定了。其实很简单的。

先说一下解决该问题的思路，错误的解决过程就不说了，只说正确的过程。首先看了下easyui的api文档中，关于propertygrid控件的那部分，看到这么一句话

看到propertygrid控件是从datagrid控件继承来的，于是马上想到了datagrid解决这个问题是在columns属性中，为field加上formatter回调函数来解决的，就像这样：

columns : [ [ 
				{
					field : 'membername',
					title : '会员名称',
					width : 200
				},
				{
					field : 'gender',
					title : '性别',
					width : 150,
					sortable : true,
					<span style="color:#FF6666;"><strong>formatter</strong></span>: function(value){
						if(value)
						{
							for(var o in dict_gender)
							{
								if(value == dict_gender[o].code)
								{
									return dict_gender[o].name;
								}
							}
						}
					}
				},

然后再看propertygrid控件的初始化代码

pg = $("#property_grid");
					pg.propertygrid({
						width: 'auto',
				        height: 'auto',
				        <span style="color:#FF6666;"><strong>columns</strong></span>:[[
			             	{ field:'name', title:'Name', width:100, sortable:true },
			         		{ field:'value', title:'Value', width:200 } 
			            ]],
				        showGroup: true,
				        scrollbarSize: 0
					});

看到columns属性后，立马意识到，我们是不是也可以像在datagrid控件中那样，为propertygrid控件的colunms属性中的field字段加上formatter回调函数呢？

ok，说干就干。加上formatter回调函数后，就成了这个样子

pg = $("#property_grid");
					pg.propertygrid({
						width: 'auto',
				        height: 'auto',
				        columns:[[
			             	{ field:'name', title:'Name', width:100, sortable:true },
			         		{ 
			         			field:'value', 
			         			title:'Value', 
			         			width:200,
			         			<span style="color:#FF6666;"><strong>formatter</strong></span>: function(value,rowData,rowIndex){
			         				switch(rowData.field)
			         				{
			         				case 'gender':
			         					return <span style="color:#FF6666;"><strong>getDictNameByVal</strong></span>(value, rowData.field);
			         				case 'type':
			         					return getDictNameByVal(value, 'member_type');
			         				case 'source':
			         					return getDictNameByVal(value, rowData.field);
			         				default:
			         					return value;
			         				}
			         			} 
			         		} 
			            ]],
				        showGroup: true,
				        scrollbarSize: 0
					});

其中，getDictNameByVal是我写的一个公共方法，用途是根据value值，从相关的字典数组中取出相应的name属性。代码如下

function getDictNameByVal(value, colName)
{
	var data = eval('dict_' + colName);
	for(var o in data)
	{
		if(value == data[o].code)
		{
			return data[o].name;
		}
	}
	
	return value;
}

dict_gender数组的定义如下

/* 性别 */
var dict_gender = [
    {code:'male',name:'男'},
    {code:'female',name:'女'}
];

加上formatter以后，果然搞定了！

并且传送到服务器端的数据，也是value值，而不是显示的值

经测试，此方法在ie8，firefox和chrome中均好使。

哎，不说了，我要去吃饭了，饿死我了。