easyui combobox

雨点打透心脏的1/2处 2022-07-21 08:56 201阅读 0赞

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中对象的属性][easyui-combobox_json] #

[2012 十二 01][2012 _ 01]

[共2条评论][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'
    });

看我是怎么解决的：

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

[![easyui-combobox加载json中对象的属性][easyui-combobox_json 1]][easyui-combobox_json_easyui-combobox_json 1]

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

[easyui-combobox_json]: http://www.lihuoqing.cn/code/848.html
[2012 _ 01]: http://www.lihuoqing.cn/date/2012/12/01
[2]: http://www.lihuoqing.cn/code/848.html#comments
[JAVASCRIPT]: http://www.lihuoqing.cn/tag/javascript
[JQUERY]: http://www.lihuoqing.cn/tag/jquery
[easyui-combobox_json 1]: http://www.lihuoqing.cn/soka/2012/12/easyui-combobox-json-300x180.jpg
[easyui-combobox_json_easyui-combobox_json 1]: http://www.lihuoqing.cn/soka/2012/12/easyui-combobox-json.jpg