EasyUI（v1.26） Combox 几种使用方发与BUG

EasyUI（v1.26） Combox 可以内嵌radio tree等，使用灵活方便。但是也有BUG不方便的地方。

使用方法一，使用json设置和传递Combox值。

 

<td>Gender</td>
<td><input name="gender" id="editPerson_gender" class="easyui-combobox" style="width:60px" 
	url="combobox_data_gender.json"
	valueField="id" textField="gender" required="true" editable="false" >	
    </input>
</td>	

 

 其中url 可以非常灵活的以json格式从后台取的值，或者读取json文件加载，这里为json文件格式

combobox_data_gender.json代码如下：

 

[{
	"id":"male",
	"gender":"Male"
},{
	"id":"female",
	"gender":"Female"
},{
	"id":"unknow",
	"gender":"Unknow"
}]

 请注意：第一行 “id” 为所设置的值，第二行“gender”为设置显示的文本，这两个json key分别对应html valueField和textField

在使用“编辑”功能时，必须先取得原先的值，并且把再获得修改的值，所以使用“编辑”功能，js必须添加以下代码

 

//从已经加载的datagride中所选择的行（row）中获取key值gender中值
$("#editPerson_gender").combobox('setValue',rows[0].gender);

 设置新的“gender”值（这里后台使用Struts2,所以在person.gender才能为传递给后台struts2）

 

//设置json格式的gender的新值
"person.gender":$("#editPerson_gender").combobox('getValue')

 

 

 使用方法二（在IE运行有BUG如下图）：

 

<td><select name="person.gender" class="easyui-combobox"  panelHeight="60" style="width:60px" required="true" editable="false">
            <option>Male</option>
            <option>Female</option>
       </select>
</td>	

 js处理同上，这样更加简单，在Chrome和Firefox运行很正常，但是在IE上运行会出现多选和重新设值不获取新值的情况，根据文档我添加“multiple=“false””也没有作用，运行作者相关demo也出现同样问题。

 

评论

1 楼 longhua2003 2015-04-07  

感谢你的分享，解决了我的问题啊