当前位置: 代码迷 >> Web前端 >> EasyUI(v1.26) Combox 几种运用方发与BUG
  详细解决方案

EasyUI(v1.26) Combox 几种运用方发与BUG

热度:753   发布时间:2012-08-29 08:40:14.0
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也出现同样问题。

?


  相关解决方案