combobox数据获取及使用总结

写在前面

和队友完成工程实践项目过程中遇到combobox数据项加载失败的问题，我将记录下解决该问题中不断填坑的过程。

这是可以确定的填写正确的combobox内容

action也没有错误，Struts配置也正常，但接收不到数据。后经排查，找到了问题所在。

即第一个要点，combobox接收参数的json数据格式：

[{"id":value,"name":value...},{},{},{}...]

这是JSONArray的格式，此处直接使用id,name等属性名可直接访问，并按照数组顺序依次自动填充

如果是使用Struts-json自动转换的方式，则需要action中将相应实体类对象放到list中，然后在result中使用json包中相应的方法完成。下面有示例：

 

 

获取这样的json格式即可，为方便展示，删减了字段和记录。

小技巧：因为json是Struts-json包自动转的，为了知道具体的值，可以使用方法：JSONArray.fromObject(list)

写到这里，因为图方便，我的list是在方法中直接声明的，于是combobox一直接收不到数据，也没有任何报错，combobox的执行成功和失败函数均无反应。此处发现第二个知识点

即当前台接收不到json数据，控制台又没有任何错误提示时，考虑Struts中转json的数据源是否被识别，如上图Struts配置中的jsonList。

所有经过Struts的数据传递，都必须要设置set、get方法。在配置文件中获取数据也是如此，由于我在方法内部直接声明的list，导致配置文件数据获取失败，无法传递json到前台，同时也不会报错！！！

 

 

在填坑过程中，深入理解了combobox的使用，以及easyUI相关组件的使用

 

最大的感受是：请多查看官方文档！！！请多查看官方文档！！！请多查看官方文档！！！

先贴上直通车链接：http://www.jeasyui.net/plugins/169.html

同时，我发现所有组件都是一样的使用方式。

当组件没有销毁时，用id的方式可以直接获取到　　　　$('#id').combobox({url:value,valueField:value,textField:value,..});      --------其他组件则对应改名即可 如$('#id').form(); 

括号中可填写对应参数，或对应方法，有多个时用逗号隔开即可。同时，若重复设置参数，则已设置过的参数的属性值覆盖，未设置过的参数属性值更新。

相关属性，事件，方法的使用

属性直接赋值即可，事件就写上  事件名:function(){} 对应参数要和官方要求的一致，方法需要单独引用$('#id').combobox('方法名','参数');

例：

$("#cc").combobox({
url:'category_query.action', //数据请求
valueField:'id', //选项的value
textField:'type', //选项的显示值
panelHeight:'auto', //自适应高度
panelWidth:120,//下拉列表是两个组件组成的
width:120, //要同时设置两个宽度才行
editable:false, //下拉框不允许编辑
//combobox继承combo继承validatebox，所以可以直接在这里设置验证
required:true,
missingMessage:'请选择所属类别',

onLoadSuccess:function(){

// 加载成功时处理，事件的范例在此演示

var data = $('#cc').combobox('getData'); //此事件获取从后台加载的json数据

alert(JSON.stringify(data));  //转字符串并显示

$('#cc').combobox('select','1'); //此事件设置下拉列表默认值为第一项

}, // 此方法没有参数

onBeforeLoad:function(param){

}// param用于指定加载参数
});