解决easyui propertygrid控件中,combobox控件(下拉框控件)回显value值的问题

原创 2016年05月31日 19:02:05

问题背景:

    我们用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中均好使。

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

相关文章推荐

easyUI PropertyGrid

@author YHC 从$.fn.datagrid.defaults继承,覆盖默认值 $.fn.propertygrid.defaults propertygrid 提供用户一个接口,浏览和...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

另一种方法创建EasyUI中的PropertyGrid

现在有需求新建一个EasyUI中的PropertyGrid控件,在网上找了半天,都是用json传值的,官网上的例子如下:  $('#tt').propertygrid({ width:300, he...

easyui propertyGrid combobox类型的editor数据绑定

见demo里的propertygrid,在propertygrid_data.json文件添加一个combobox类型的选项 {"name":"combox类型","value":"1","grou...

EasyUI combobox 多选及回显赋值

multiple boolean 决定是否支持多项选择. $('#cc').combobox({ url:'combobox_data.json', multiple:true...

easyui combobox回显

$('#realTime').combobox('select',value); value 为combobox选中的valueField,并不是textField

调整EasyUI中输入框(下拉,时间,文本框等)高度一致问题

默认情况下文本验证输入框easyui-validatebox高度为22px,而easyui-datebox,easyui-combobox默认高度为20px。 不光光是高度不一致的问题,而且还有...
  • jumtre
  • jumtre
  • 2014年08月20日 16:19
  • 6322

jquery easyui combobox加载数量过多引起渲染页面缓慢问题

有些时候,当我们用easyui combobox控件加载页面数据的时候,由于数据量过多(几千几万),而且如果操作频繁的话,进而会引起需要加载半天才能去打开下拉面板,还有可能卡死。其实这种问题主要时间浪...
  • txp1993
  • txp1993
  • 2015年08月27日 17:35
  • 3431

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

PropertyGrid控件下拉列表

把别人的例子稍做了一下修改,部分内容没看懂,但程序可以运行,如果有什么错误或不当之处,请指教!   1 /// 2 /// 一.自定义一个特性类L...
  • Andeewu
  • Andeewu
  • 2013年09月21日 13:42
  • 1896
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决easyui propertygrid控件中,combobox控件(下拉框控件)回显value值的问题
举报原因:
原因补充:

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