java easyui combobox_EasyUI中combobox的使用方法和一个代码实例

  • Post author:
  • Post category:java


一、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:定义如何从远程服务器加载数据

常用属性:

“>

*

//style:设置宽度样式之类//panelWidth:设置下拉面板宽度//panelHeight:设置下拉面板高度

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 loadData(){

$(‘#cc’).combobox({

url:’combobox_data.json’,

valueField:’id’,

textField:’text’});

}//设置下拉框的值

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’);returnrow[opts.textField];

}

});

ComboBox

单项选择的ComboBox:

Alabama

North Carolina

North Dakota

Ohio

Oklahoma

Oregon

本地数据源的Combobox

来源网页数据的Combobox

多项选择的ComboBox:



版权声明:本文为weixin_35545135原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。