EasyUI-Combobox 用法

来源:互联网 发布:华为交换机端口看光功 编辑:程序博客网 时间:2024/06/04 19:20

1.Combobox绑定数值
用input 创建combobox:

<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

在做项目过程中遇到一个问题:下拉框有值,但是点击选项时combobox 获取不到值,如下图所示:
这里写图片描述

往combobx 里面添加数据如下,则添加不上数据:

data1.push({"text": data[i].text});$("#Combobox").combobox("loadData", data1);

如果添加上id改成如下就可以获取combobox 选择的值。

data1.push({"text": data[i].text"id":data[i].text});$("#Combobox").combobox("loadData", data1);

上网查了才知道combobox 绑定数据是通过id 绑定的,显示的只是text 的值

combobox 有两个属性:
valueField:绑定到该组合框(ComboBox)的 value 上的基础数据的名称,是用于标识combobox 选项的。
textField:绑定到该组合框(ComboBox)的 text 上的基础数据的名称,是显示给用户看的文本。

如果我们只是传text ,而不传递id ,那么combobox就不会捕获到选中的数据。

Combobox添加数据,json 数据格式:

//data为从后台获得的转为了json的数据,data为数组,元素为对象success :funciton(data){var data1 = [];  //定义data1 数组//把需要的数据从data放到data1中,每一个text对应一个编号Nofor (i = 0; i < data.length; i++){data1.push({"id": data[i].No,"text": data[i].text })}}//把数据加载到combobox中,这样当我们再选择某个项时,才会显示到combobox中国显示$("#Combobox").combobox("loadData", data1);或者:data1=[{"id":1"text":"text1"},{ "id":2,"text":"text2"},{"id":3,"text":"text3""selected":true},{"id":4,"text":"text4"}]$("#Combobox").combobox("loadData", data1);

2.Combobox加载数据

$("#Combobox").combobox("loadData", data);

在创建combobox 的时候使用option添加数据。

<select id="select_GoodsTerms" class="easyui-combobox" editable="false" name="MyApplication" data-options="panelHeight:'auto',valueField:'id',textField:'text',required:'true'" style ="width: 110px">            <option value="itemName">商品名称</option>            <option value="itemNo">商品编号</option>            <option value="status">状态</option>        </select>

3.获取combobox的 id或text

$("#Combobox").combobox("getValue");或$("#Combobox").val()

获取text

$("#Combobox").combobox("getText");

4.Combobox选项内容改变时触发事件

 $('#Combobox').combobox({        onChange: function (n, o) {}})

该方法有两个参数,一个是n,一个是o. n代表value, o代表text.