关闭

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

标签: easyuipropertygrid下拉框回显formatterdatagrid
3227人阅读 评论(4) 收藏 举报

问题背景:

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

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

1
2

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30832次
    • 积分:540
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:14篇
    • 译文:0篇
    • 评论:10条
    文章分类
    最新评论