这几天写代码碰到这个问题,记一下。因为不了解EasyUI的combobox的工作过程,上周星期五,调试了一下午,通过ajax请求
后台成功得到了数据,为什么就不能显示在combobox上,太尼抓狂了。 这个问题和是和combobox的data属性有关,以及valueField
属性有关
一.combobox的data属性
先来说说combobox的data属性。 打开API文档,看combobox初始化时,给data的赋值方式,如下
你会发现,combobox的data是一个json对象。所以当我们将数据放到combobox中的时候,必须注意数据要是json类型!!!否则,
在显示数据的时候会出错。
之前我写的,通过ajax请求得到数据,并让它显示在combobox上的代码是这样的:
$.ajax({//加载班组数据
url:'/PocketShop/EmployeeManageServlet?Method=TeamLoad',
type: "post",
async : false,
data:{StoreId:StoreId,PositionId:PositionId},
success:function(result){
$('#TeamId').combobox({
valueField:'Id',
textField:'Name',
data:result.rows
});
}
});
结果,在显示数据的时候出错了,我点击datagrid的一行数据,想让它显示在一个对话框中,其中datagrid有一个字段是
TeamId,它的值是数字。TeamId对应的控件是combobox,在显示数据之前,我使用了上述的ajax向后台请求数据,并把数据赋给
TeamId的combobox的data。但是,结果是combobox显示的是数字,并非该数字对应的textFiel。我就很纳闷,一直在调试。后来请
教了别人,人家在我的ajax里加了一个dataType:'json' 就可以了。加了dataType:'json'的代码如下
$.ajax({//加载班组数据
url:'/PocketShop/EmployeeManageServlet?Method=TeamLoad',
type: "post",
async : false,
dataType:'json',
data:{StoreId:StoreId,PositionId:PositionId},
success:function(result){
$('#TeamId').combobox({
valueField:'Id',
textField:'Name',
data:result.rows
});
}
});
之前写代码都是复制粘贴别人的代码,并没有好好去理解,所以出现这种情况。
二.combobox的运作过程
有时候,情况是这样子,我们的数据是数字,但是它放到combobox的时候显示的是字符。那么到底combobox是怎么运作
的,把数字显示成字符串。
通常这样就是combobox设置了valueField和textField属性,我们的数据是数字,每个数字对应一个字符串,也就是valueField和
textField是一一对应的。我们将数字给combobox,combobox把数字和valueField进行对比查找,找到与数字相等的valueField,然后
再根据valueField找到与之相应的字符,并将字符显示在combobox中。如果找不到,它就直接显示数字。像我上边提到的,原因是
因为赋给combobox的data的数据不是json类型,combobox无法识别,里边就什么都没有。当我把数字给combobox,让它显示的相
应字符串的时候,找不到与该数字对应的字符串,于是就直接显示数字。