EasyUI ComboBox 学习总结

Basic ComboBox

http://www.jeasyui.net/demo/488.html

Basic ComboBox - jQuery EasyUI Demo

Basic ComboBox

Type in ComboBox to try auto complete.

<select class="easyui-combobox" name="state" style="width:200px;">
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>
	<option value="CA">California</option>
	<option value="CO">Colorado</option>
	<option value="CT">Connecticut</option>
	<option value="DE">Delaware</option>
	<option value="FL">Florida</option>
</select>

========

EasyUI Combobox 组合框

http://www.jeasyui.net/plugins/169.html

扩展自 $.fn.combo.defaults。通过 $.fn.combobox.defaults 重写默认的 defaults。

组合框（combobox）显示一个可编辑的文本框和下拉列表，用户可以从下拉列表中选择一个或多个值。用户可以直接输入文本到列表的顶部，或者从列表中选择一个或多个现成的值。

依赖
combo

用法
从带有预定义结构的元素创建组合框（combobox）。

aitem1 bitem2 bitem3 ditem4 eitem5

从标记创建组合框（combobox）。

使用 javascript 创建组合框（combobox）。

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

创建两个依赖的组合框（combobox）。

json 数据格式的示例：

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

========

EasyUI中combobox的使用方法和一个代码实例

https://www.cnblogs.com/goloving/p/7115792.html

一、easyUI中select下拉框动态添加option选项

问题：想在combobox的下拉项里动态添加一些内容，但是添加不成功。因为jquery easyui的下拉列表combobox是用DIV模拟的（其实看看它的样式就应该想到）

解决方法：

1、一个空下拉框，注意不能加class=“easyui-combobox”，否则不生效

//注意class不能加easyui-combobox

2、为下拉框添加子项：利用文档碎片

var fragment = document.createDocumentFragment();
for(var i=1;i<25;i++){
var option = document.createElement(“option”);
option.innerHTML = i + “点”;
$(option).attr(“value”,i);
fragment.appendChild(option);
}
$("#selectInfo1").append(fragment);
$("#selectInfo1").combobox({});

3、将下拉框转化为easyUI中的combobox

$("#selectInfo1").combobox({});
　　只要填充好数据，再去转化那就可以了。

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

代码实例

combobox

//设置下拉框的值
function setValue(){
$("#cc").combobox(“setValue”,“动态添加的列表值”);
}

//获取当前选择的值
function getValue(){
var selectText=$("#cc").combobox(“getValue”);
alert(“当前选择的是:”+selectText);
}
//禁用当前选择框
function disable(){
$("#cc").combobox(“disable”);
}
//启用当前选择框
function enable(){
$("#cc").combobox(“enable”);
}

$(’#cc1’).combobox({
filter: function(q, row){
var opts = $(this).combobox(‘options’);
return row[opts.textField].indexOf(q) == 0;
},
formatter: function(row){
var opts = $(this).combobox(‘options’);
return row[opts.textField];
}
});

ComboBox

LoadData SetValue GetValue Disable Enable

单项选择的ComboBox:

Alabama North Carolina North Dakota Ohio Oklahoma Oregon

本地数据源的Combobox

来源网页数据的Combobox

多项选择的ComboBox:

========

easyui combobox 动态加载的两种方法

https://www.cnblogs.com/hailexuexi/p/8119439.html

reload 方法

javascript代码

//指定id 和 text  否则始终选择第一个
$('#contact_city').combobox({ 
     valueField:'id',
    textField:'text'
});

$('#contact_province').combobox({
     onSelect: function (data) {var url = "Ajax-index.php?module=Contact&action=Ajax_Contact_Province_Change"+"&contact_province=" +data.text;
            $('#contact_city').combobox('reload', url);
       }
});

php代码

   $province =trim($_GET['contact_province']);
   $select="SELECT p.province,c.id,c.city,p.provinceid  from  province as p JOIN city as c ON p.provinceid = c.provinceid where p.province='" . $province . "'";

$result=$ db->query($select);
$Select_Option=""; while($ row= $db->fetch_array($ result)){
$key=$ row[1];
$value=$ row[2];

        if($Select_Option==""){
            $Select_Option=  '{"id":"'.$key.'","text":"'.$value.'"}' ;   
        }else{
            $Select_Option=$Select_Option .",". '{"id":"'.$key.'","text":"'.$value.'"}' ;
        }
    }
    $Select_Option="[" . $Select_Option ."]";
    echo $Select_Option;

loadData 方法

javascript

$(function(){
$(’#contact_city’).combobox({
valueField:‘id’,
textField:‘text’,
editable:false //是否可编辑
});
})

$(document).ready(function () {
$("#contact_province").combobox({
onChange: function (newVal,oldVal) {

            var contact_province=newVal;
            $.ajax({
                type: "POST",
                url: "Ajax-index.php?module=<{$module_name}>&action=Ajax_Contact_Province_Change",
                dataType: "json",
                data: {"contact_province":contact_province },
                beforeSend: function(){
                    //$('<div id="msg" />').addClass("loading").html("加载中...").css("color","#999").appendTo('.sub1');
                },
                success: function(json){
                    if(json.success==1){
                        //alert(json.msg);
                        var data = $.parseJSON(json.msg); 
                        $("#contact_city").combobox("loadData", data);
                        $("#contact_city ").combobox('select',data[0].text);//默认选中第一项
                    }else{
                        $.messager.alert('消息','数据加载失败!','error'); 
                        return false;
                    }
                }
           });
        }
    });
});

PHP代码

    $province =trim($_POST['contact_province']);

    $select="SELECT p.province,c.city,p.provinceid  from  province as p JOIN city as c ON p.provinceid = c.provinceid where p.province='" . $province . "'";

    $result=$db->query($select);
    $Select_Option="";
    while($row=$db->fetch_array($result)){
        $value=$row[1];
       
        if($Select_Option==""){
            $Select_Option=  '{"id":"'.$value.'","text":"'.$value.'"}' ;   
        }else{
            $Select_Option=$Select_Option .",". '{"id":"'.$value.'","text":"'.$value.'"}' ;
        }
    }
    $Select_Option="[" . $Select_Option ."]";

    $arr['success'] = 1;
    $arr['msg'] = $Select_Option; 
    echo json_encode($arr);

====

Easyui combobox 始终选择第一个的问题
//必须指定 id 和 text
$(’#contact_city’).combobox({
valueField:‘id’,
textField:‘text’,
});

========

easyui – combobox 的选值问题

今天在做下拉框问题的时候碰到选择的值和显示的值的问题，

$(’#combobox’).combobox(‘getText’); 所有选中的现在的值

$(’#combobox’).combobox(‘getValue’); 获取选中值的value属性。

$(’#combobox’).combobox(‘getValues’); 获取选中的多个值取出的值的类型为数组还是对象，傻傻分不清楚

jq后添加到页面中的combobox要重新初始化一下，要不然不会生效，下边是设置初始值

       $(document).ready(function(){
            $('#combobox').combobox({
                editable:false,
                multiple:true,
                multiline:true,
            });
        })
        $('#combobox').combobox('setValues',[])

========

jquery easyui 使用 combobox动态加载数据

https://blog.csdn.net/sd6275832ght/article/details/83992293

首先引入相关js 和css

前端代码

一级别分类：二级别分类:

服务器端代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Web.Script.Serialization;
namespace jqeasyui
{
///
/// Type 的摘要说明
///
public class Type : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        int tid = 0;
        //判断是否第一次请求
        if (!string.IsNullOrEmpty(context.Request["id"]))
        {
            
            tid = int.Parse(context.Request["id"]);//获取父类中当前选中项目的id
        }
        web2Bll.TypeInfoBLL tpbll = new web2Bll.TypeInfoBLL();
        List<web2Model.TypeInfo> list = new List<web2Model.TypeInfo>();
        list=tpbll.GetListTypeInfo("  parentId="+tid,"");
        List<TypeModel> listModel = new List<TypeModel>();//创建一个自定义类型的集合  ，类中属性 id 和 text 需要和前端 valueField 和 textField 属性中的值一样
        foreach (web2Model.TypeInfo typeInfo in list)
        {
            listModel.Add(new TypeModel() { 
             id=typeInfo.TypeId,  
             text=typeInfo.TitleName
            });
        }
        JavaScriptSerializer js = new JavaScriptSerializer();//序列化集合转换成json 
        context.Response.Write(js.Serialize(listModel));//返回到前端 
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

}

combobox的其他方法，属性，事件

属性
groupField：
参数类型:string
说明:指示要被分组的字段。该属性自版本 1.3.4 起可用。
默认值:null
groupFormatter:
参数类型:function(group)
说明：返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。
例如：

$(’#cc’).combobox({
groupFormatter: function(group){
return ‘’ + group + ‘’;
}
});

mode
参数类型:string
说明:定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设置为 ‘remote’。当设置为 ‘remote’ 模式时，用户输入的值将会被作为名为 ‘q’ 的 http 请求参数发送到服务器，以获取新的数据。
默认值:local

method:
参数类型:string
说明:用来检索数据的 http 方法。
默认值:post
data:
参数类型: arr
说明：被加载列表数据
例子;

默认值:null
filter:
参数类型:function
说明：定义如何呈现行。该函数有一个参数：row。
例子:

$(’#cc’).combobox({
filter: function(q, row){
var opts = $(this).combobox(‘options’);
return row[opts.textField].indexOf(q) == 0;
}
});

formatter
参数:function(row) row为行内容
说明：如何呈现行
例子

$(’#cc’).combobox({
formatter: function(row){
var opts = $(this).combobox(‘options’);
return row[opts.textField];
}
});

loader:
参数：function(param,success,error)
说明：定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：
param：要传到远程服务器的参数对象。
success(data)：当获取数据成功时将被调用的回调函数。
error()：当获取数据失败时将被调用的回调函数。
默认值:json loader
事件
onBeforeLoad
参数：param
说明：在请求加载数据之前触发，返回 false 则取消加载动作。
例子

$(’#cc’).combobox({
onBeforeLoad: function(param){
param.id = 2;
param.language = ‘js’;
}
});

onLoadError
说明：当远程数据加载失败时触发。
onUnselect
参数：record
说明：当用户取消一个列表项时触发。

方法
getData
说明:返回加载的数据。
loadData
参数 data
说明:加载本地列表数据。

reload
参数: url
说明：请求远程的列表数据。传 ‘url’ 参数来重写原始的 URL 值。
例子：

$(’#cc’).combobox(‘reload’); // reload list data using old URL
$(’#cc’).combobox(‘reload’,‘get_data.php’); // reload list data using new URL

setValues
参数 values
设置组合框（combobox）值的数组值。
如:

$(’#cc’).combobox(‘setValues’, [‘001’,‘002’]);

setValue
设置组合框值
getValue
获取组合框的值

var t1=$(’#cc’).combobox(‘getValue’);

select , unSelect
获取选中的项目 ,取消选中的项目
clear
清空所有的项目

========