写在前面

和队友完成工程实践项目过程中遇到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用于指定加载参数
});

combobox数据获取及使用总结的更多相关文章

  1. WPF combobox数据绑定和数据获取

    本文章仅为个人学习,如有错误之处请指正. 搭建WPF界面的时候,想用combobox构建一个下拉菜单,搜索的时候看到大多数都是大段代码,逻辑顺序不是很详细,摸索了大概,记录一下方便来者. 拖入comb ...

  2. easyui combobox 实时刷新

    使用场景: A页面以及B页面,A页面有个下拉框,数据是从B页面存在的数据库中获取得到的:现将B页面的数据删除掉,但是在A页面再次点开下拉框时,依旧看到了刚才删除的那条数据: 期望:当B页面已何种方式改 ...

  3. FTL页面常用到的一些方法combobox、combotree、datagrid

    参考文件:点击下载 1.combobox: (1).js 1)初始化combobox //相似度 $('#same').combobox({ //url:"<@s.url value= ...

  4. Extjs 让combobox写起来更简单

    也已经写了很久时间的extjs ,每次都用到很多的combobox,配置很多东西觉得实在是太麻烦,所以根据常用到的情况写了一个简便的combobox,再次记录下来,以免放在某个地方忘记了找不到了. 定 ...

  5. ASP.NET Aries JSAPI 文档说明:AR.Form、AR.Combobox

    AR.Form 文档 1:对象或属性: 名称 类型 说明 data 属性 编辑页根据主键请求回来的数据 method 属性 用于获取数据的函数指向,默认值Get objName 属性 用于拦截form ...

  6. 带搜索的ComboBox

    带搜索的ComboBox就是给ComboBox一个依赖属性的ItemSource,然后通过数据源中是否包含要查询的值,重新给ComboBox绑定数据源. public class EditComboB ...

  7. 【MVVM DEV】DataColumn中的TextBox与ComboBox的并存

    一.前言       在WPF编程中,有时候我们使用DataGrid会需要在一个DataColumn中既有TextBox,也要有ComboBox或者TextBlock等其他数据显示样式. 这个时候我们 ...

  8. [WinForm] DataGridView 绑定 DT && ComboBox 列绑定 Dict

    一  需求介绍 一般像枚举类型的数据,我们在数据库里存储着诸如(1.2.3.4-)或者("001"."002"."003"-)此类,但是界面 ...

  9. EasyUI combobox

    高度自适应 data-options="required:true,editable:false,panelHeight:'auto',panelMaxHeight:170" 加上 ...

随机推荐

  1. java面向对象(五)之多态

    多态 面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. ...

  2. c# 读取excel数据的两种方法(转)

    转载自:http://developer.51cto.com/art/201302/380622.htm, 方法一:OleDb: 用这种方法读取Excel速度还是非常的快的,但这种方式读取数据的时候不 ...

  3. 再起航,我的学习笔记之JavaScript设计模式20(策略模式)

    策略模式 策略模式(Strategy):将定义的一组算法封装起来,使其相互之间可以替换.封装的算法具有一定的独立性,不会随客户端变化而变化. 其实策略模式在我们生活中可应用的地方还是比较多的,比如在商 ...

  4. NHibernate教程(12)--延迟加载

    本节内容 引入 延迟加载 实例分析 1.一对多关系实例 2.多对多关系实例 结语 引入 通过前面文章的分析,我们知道了如何使用NHibernate,比如CRUD操作.事务.一对多.多对多映射等问题,这 ...

  5. OSX 10.8+下开启Web 共享 的方法

    MENU Home Archives About SUBSCRIBE ☰MENU OSX 10.8+ Mountain Lion 下开启 Web Sharing(Web 共享)的方法 JUL 28, ...

  6. html5 javascript 小型计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 团队作业9——测试与发布(Beta版本)

    Beta版本测试报告 一bug汇总 计时没有显示即倒计时,难度不同的功能没有实现(已修复) 没有导入试卷和错题功能(不打算修复) 前台管理功能(部分修复) 界面美观问题(没有修复也不打算修复) 二.场 ...

  8. 201521123040《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 本周学习了类的继承,包括子类父类的概念还有extends关键字,super关键字.继承与代码 ...

  9. 201521123042《Java程序》第二周总结

    1. 本周学习总结 了解枚举类型的使用方法. 学会使用ArrayList替换数组,并且学会运用相关函数,例如: strList.contains(str)(判断数组中是否包含字符串str,包含则返回t ...

  10. 《JAVA程序设计》第11周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. synchronized方法/代码块 wait().notify()用法,生产者消费者例子 lock.condit ...