easyui combobox

<div id=id+"_type"></div><span style="white-space:pre">	</span>

var data=[
      {"id":"create","text":"create",selected:true},//加个selected属性表示默认选择
      {"id":"delete","text":"delete"},
        {"id":"update","text":"update"},
      {"id":"retrieve","text":"retrieve/select"},
      {"id":"direct","text":"direct"},
        ]
$("#"+id+"_type").combobox({   
  //url:"josn.do",   
   width:150,
   panelHeight:'auto',//让它下拉框自适应高度
   height:30,
   valueField:'id',   
   textField:'text',

<span style="font-family: Arial, Helvetica, sans-serif;">//value:"create", 默认选择create</span>

   data :data,
   editable:false,//不可手写编辑属性
   onSelect: function(rec){   
//rec的数值为{"id":"create","text":"create"} 或{"id":"delete","text":"delete"}等
if(rec.id=="delete"){
//deleteType();
}      
   },
   onLoadSuccess: function () { //数据加载完毕事件
//          alert("加载成功");
     }
});

获取combox中的值

$("#"+id+"_type").combobox('getValue')    判断是不是为combobox

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如下：

{
"rows": [
{
"chances": [],
"name": "系统管理员",
"password": "admin",
"status": 1,
"userId": 1,
"userName": "admin"
},
{
"chances": [],
"name": "于经理",
"password": "123456",
"status": 1,
"userId": 2,
"userName": "yulibin"
},
{
"chances": [],
"name": "郝经理",
"password": "123456",
"status": 1,
"userId": 3,
"userName": "haominghui"
},
{
"chances": [],
"name": "吴经理",
"password": "123456",
"status": 1,
"userId": 4,
"userName": "wumingliang"
}
],
"total": 4
}

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

[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]

按着常规讲我会像json.rows.userId 这样设置valueField属性，结果明显不行，但这并不出乎我的意料，就是出于尝试的心态。现在的问题是如何获得这个json的对象，并且调用时只用属性名userId,name。

其实，很简单就解决了，还是先看api示例：

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

看我是怎么解决的：

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

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





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):取消指定的值