EasyUI combobox 加载JSON数据《一》

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUI combobox 加载JSON数据《一》相关的知识,希望对你有一定的参考价值。

Action返回 JSON 格式如下:

jsonResult = 
{
  total=7,rows=[
     {TEXT=技术支持, ID=402894ca4419acf1014419b148a10000}, 
     {TEXT=开发部, ID=402894ca4419acf1014419beb1bc0001}, 
     {TEXT=实施, ID=4028e439476b55be01477bbf0fab0000}, 
     {TEXT=技术支持, ID=4028e439476b55be01477bbfb80e0001},
     {TEXT=客户服务, ID=4028e439476b55be01477bc015a80002}]
}

json中包含 totalrows,我们需要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"  
}]

官方给出了一个示例

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

一直不明白只需一个url 如何返回数据?百思不得姐

以下是两种解决方法

第一种:

var url = "admin/FrmQueryAllGroup.do";
$.getJSON(url,function(json) {
    $(‘#cc‘).combobox({
        data: json.jsonResult.rows,
        valueField: ‘ID‘,
        textField: ‘TEXT‘
    });
});

第二种:

$.ajax({
    type: "POST",
    url: ‘admin/FrmQueryAllGroup.do‘,
    dataType: "json",
    success: function(json) {
        $(‘#cc‘).combobox({
            data: json.jsonResult.rows,
            valueField: ‘ID‘,
            textField: ‘TEXT‘
        });
    }
});

注:jsonResult 为Action中返回值,rows 为 jsonResult 中的属性

struts.xml

<package name="FrmTaskUser_Ajax_code" extends="json-default">
    <action name="FrmQueryAllGroup" method="queryAllGroup"
        class="org.bkgd.autoform.web.action.ActionTaskuserFormQuery">
        <result type="json"></result>
    </action>
</package>

以上是关于EasyUI combobox 加载JSON数据《一》的主要内容,如果未能解决你的问题,请参考以下文章

jquery easyui combobox如何动态加载.json数据

jquery easyui-combobox 只能选第一个选项

easyUI-combobox 后台导入Json数据的方法

Easyui combobox 怎么加载数据

jquery easyui 中的combobox读取后台传递过来的json数据的例子

easyui combobox 在datagrid中动态加载数据