easyui combobox

雨点打透心脏的1/2处 2022-07-21 08:56 290阅读 0赞
  1. <div id=id+"_type"></div><span style="white-space:pre"> </span>
  2. var data=[
  3. {"id":"create","text":"create",selected:true},//加个selected属性表示默认选择
  4. {"id":"delete","text":"delete"},
  5. {"id":"update","text":"update"},
  6. {"id":"retrieve","text":"retrieve/select"},
  7. {"id":"direct","text":"direct"},
  8. ]
  9. $("#"+id+"_type").combobox({
  10. //url:"josn.do",
  11. width:150,
  12. panelHeight:'auto',//让它下拉框自适应高度
  13. height:30,
  14. valueField:'id',
  15. textField:'text',
  16. <span style="font-family: Arial, Helvetica, sans-serif;">//value:"create", 默认选择create</span>
  17. data :data,
  18. editable:false,//不可手写编辑属性
  19. onSelect: function(rec){
  20. //rec的数值为{"id":"create","text":"create"} 或{"id":"delete","text":"delete"}等
  21. if(rec.id=="delete"){
  22. //deleteType();
  23. }
  24. },
  25. onLoadSuccess: function () { //数据加载完毕事件
  26. // alert("加载成功");
  27. }
  28. });

获取combox中的值

  1. $("#"+id+"_type").combobox('getValue') 判断是不是为combobox
  2. if($("#"+id).hasClass("combobox-f") && $("#"+id).hasClass("combo-f") &&$("#"+id).hasClass("textbox-f")) 因为combobox会有这三个样式类

combobox中的url中传过来的json的格式:

easyui-combobox加载json中对象的属性

2012 十二 01

共2条评论

JAVASCRIPT, JQUERY

这次做项目遇到了一个问题,在easyui-combobox加载json数据中对象的属性。后台返回的json中包含一个对象,而我想调用对象中的属性,后台返回的json如下:

  1. {
  2. "rows": [
  3. {
  4. "chances": [],
  5. "name": "系统管理员",
  6. "password": "admin",
  7. "status": 1,
  8. "userId": 1,
  9. "userName": "admin"
  10. },
  11. {
  12. "chances": [],
  13. "name": "于经理",
  14. "password": "123456",
  15. "status": 1,
  16. "userId": 2,
  17. "userName": "yulibin"
  18. },
  19. {
  20. "chances": [],
  21. "name": "郝经理",
  22. "password": "123456",
  23. "status": 1,
  24. "userId": 3,
  25. "userName": "haominghui"
  26. },
  27. {
  28. "chances": [],
  29. "name": "吴经理",
  30. "password": "123456",
  31. "status": 1,
  32. "userId": 4,
  33. "userName": "wumingliang"
  34. }
  35. ],
  36. "total": 4
  37. }

json中包含total和rows,而rows下面才是我要显示在combobox的值,API规定必须用下面格式的json:

  1. [{
  2. "id":1,
  3. "text":"text1"
  4. },{
  5. "id":2,
  6. "text":"text2"
  7. },{
  8. "id":3,
  9. "text":"text3",
  10. "selected":true
  11. },{
  12. "id":4,
  13. "text":"text4"
  14. },{
  15. "id":5,
  16. "text":"text5"
  17. }]

按着常规讲我会像json.rows.userId 这样设置valueField属性,结果明显不行,但这并不出乎我的意料,就是出于尝试的心态。现在的问题是如何获得这个json的对象,并且调用时只用属性名userId,name。
其实,很简单就解决了,还是先看api示例:

  1. $('#cc').combobox({
  2. url:'combobox_data.json',
  3. valueField:'id',
  4. textField:'text'
  5. });

看我是怎么解决的:

  1. var url = "${pageContext.request.contextPath}/user_findUlist.action";
  2. $.getJSON(url, function(json) {
  3. $('#cc').combobox({
  4. data : json.rows,
  5. valueField:'userId',
  6. textField:'name'
  7. });
  8. });

combobox必须按着api指定格式加载json数据,我这里的json是层层嵌套的,所以肯定不信了,那我们可以换个思路。调用Jquery提供的getJSON方法,获取到我json,在初始化combobox使指定data属性为:json.rows,OK,就这么简单!!!看,数据取到了

easyui-combobox加载json中对象的属性

easyui-combobox加载json中对象的属性

Combobox用法和方法参数:

1、 需要引入class=” easyui-combobox”

2、 参数设置需要在data-options中设置

3、 属性参数配置:

valueField:基础数据值名称绑定到Combobox(提交值)

textField:基础数据的字段名称绑定的Combobox(显示值)

mode:定义当文本改变时如何加载列表数据,当设置为remote模式下,什么类型的用户将被发送http请求参数名为’q’的服务器,以获取新的数据。

url:从远程URL来加载列表数据

method:http方法检索列表数据

data:列表中被加载的数据

filter:定义如何过滤本地数据“模式”设置为’local’

formatter:定义如何呈现行

loader:定义如何从远程服务器加载数据

4、 事件:

onBeforeLoad(param): 操作之前将数据加载,返回false就取消这个荷载作用

onLoadSuccess():触发时,远程数据加载成功

onLoadError:触发时,远程数据加载错误

ONSELECT:触发,当用户选择一个列表项

onUnselect:触发,当用户取消选择一个列表

5、方法:

options():返回选择对象

getData():返回加载的数据

loadData(data):加载列表数据

reload(url):重新加载远程数据列表

setValues(values):设置combobox的值数组

setValue(value):设置combobox的值

clear():清空combobox的值

select(value):选中指定的值

unselect(value):取消指定的值

发表评论

表情:
评论列表 (有 0 条评论,290人围观)

还没有评论,来说两句吧...

相关阅读

    相关 easyui-combobox

        在做功能的时候用到easyui的combobox,下拉框经常使用,因此把它的使用方法简单总结如下:     html代码部分: <pre name="cod

    相关 Easyui combobox 手动输入问题

    这里就不上图了很简单的一个问题,如果你使用easyui 的combobox 下拉框 可能碰见过可以手动输入任何值 又或者 选择之后还可以手动输入把选好的值改变了,可以把comb