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：触发时，远程数据加载错误 ONS www.hbbz08.com ELECT：触发，当用户选择一个列表项 onUnselect：触发，当用户取消选择一个列表 5、方法： options()：返回选择对象 getData():返回加载的数据 loadData(data):加载列表数据 reload(url):重新加载远程数据列表 setValues(values):设置combobox的值数组 setValue(value):设置combobox的值 clear():清空combobox的值 select(value):选中指定的值 unselect(value):取消指定的值
Combo Box (组合框)控件很简单，可以节省空间。从用户角度来看，这个控件是由一个文本输入控件和一个下拉菜单组成的。用户可以从一个预先定义的列表里选择一个选项，同时也可以直接在文本框里面输入文本。
1、定义控件对应变量
假定已经创建了一个Dialog，并且从控件工具箱将 Combo Box 控件拖放到上面。打开 Class Wizard，添加控件对应变量，
如：CComboBox m_cbExamble;
在后面的代码中会不断使用这个变量。
2、向控件添加 Items
1) 在Combo Box控件属性的Data标签里面添加，一行表示Combo Box下拉列表中的一行。换行用ctrl+回车。
2)利用函数 AddString()向Combo Box 控件添加 Items，如：
m_cbExample.AddString(“StringData1”);
m_cbExample.AddString(“StringData2”);
m_cbExample.AddString(“StringData3”);
3)也可以调用函数 InsertString()将 Item插入指定位置 nIndex，如：
m_cbExample.InsertString( nIndex, “StringData” );
3、从控件得到选定的Item
假设在控件列表中已经选定某项，现在要得到被选定项的内容，首先要得到该项的位置，然后得到对应位置的内容。这里会用到两个函数，如：
int nIndex = m_cbExample.GetCurSel();
CString strCBText;
m_cbExample.GetLBText( nIndex, strCBText);
这样，得到的内容就保存在 strCBText中。
若要选取当前内容，可调用函数GetWindowText(strCBText)。
4、在控件中查找给定Item
这种操作一般用于在程序中动态修改控件中该项的值，可以用函数FindStringExact()精确匹配，如：
int nIndex = m_cbExample.FindStringExact( nStartAfter, “value to be found”);
nStartAfter指明从哪一行开始查找。如果查找成功，返回的是该项的位置；否则，返回CB_ERR。
也可以选中包含指定字符串的项，如：
int nIndex = m_cbExample.SelectString( nStartAfter, “value to be selected”);
5、删除控件中的Item
该操作可以利用函数DeleteString()，需要指定被删除项的位置，如：
m_cbExample.DeleteString(nIndex);
也可以使用函数ResetContent()，清除目前的所有项，如：
m_cbExample.ResetContent();
6、显示控件中的某项
int nIndex = m_cbExample.GetCurSel(); //当前选中的项
m_cbExample.SetCurSel(nIndex); //设置第nIndex项为显示的内容
7、得到或设置输入框中被选中的字符位置
DWORD GetEditSel( ) /BOOL SetEditSel( int nStartChar, int nEndChar );
BOOL LimitText( int nMaxChars );设置输入框中可输入的最大字符数。
8、列表框常用消息映射宏
ON_CBN_DBLCLK 鼠标双击
ON_CBN_DROPDOWN 列表框被弹出
ON_CBN_KILLFOCUS / ON_CBN_SETFOCUS 在输入框失去/得到输入焦点时产生
ON_CBN_SELCHANGE 列表框中选择的行发生改变
ON_CBN_EDITUPDATE 输入框中内容被更新
先定义一个性别的选择框，如下：
{name:"gender",id:"gendere",fieldLabel:"用户性别",
mode: 'local',
triggerAction: 'all',
typeAhead: true,
lazyRender:true,
xtype:"combo",
emptyText:"--请选择--",
store: new Ext.data.ArrayStore({
id:2,
fields:['key','values'],
data:[[0,'男'],[1,'女']]
}),
displayField:'values',
valueField:'key',
selectOnFocus:true
}
再定义点击gridview时的触发事件，如下，将点击那行的性别赋值给性别选择框：
userGrid.on('rowclick',function(grid,rowIndex,event){
var record = userGrid.getStore().getAt(rowIndex);
Ext.getCmp('gendere').setValue(record.get("gender"));
});
这样应该就可以显示出来了。
修改数据源 id text 修改成id name
$('#selGlade').combobox({
url: Handler(GladeHandler, [["t", "CobmoList"]]),
valueField: 'id',
textField: 'text',
panelHeight:'auto',//面板自动高度
panelWidth: 142,//面板宽度
width:142//select宽度
});
json:
[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]
$('#com').combobox({
url: url,//ajax后台取数据路径，返回的是json格式的数据
valueField: 'id',
textField: 'text',//json格式如下示 这里的valueField和textField值要与json中一致
onSelect: function (r) {
alert(r.id);
},
onLoadSuccess: function () {
$(this).combobox('setText', '--请选择--');
}
});
json:格式
[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
}]
详见easyui api
1：准备2个input设置不同的id
2：注册easyui的combobox控件
$('#box1').combobox({
data:[{id:0,text:'广州'},{id:1,text:'上海'}]
valueField:'id',
textField:'text'
});
$('#box2').combobox({
valueField:'id',
textField:'text'
});
3：由box1联动显示box2的数据，设置box1的onSelect事件
$('#box1').combobox({
onSelect:function(record){
var region=[];
if(record.id==0){//如果城市是广州
region.push={id:0101,text:"黄埔区"};
region.push={id:0102,text:"天河区"};
}else if(record.id==1){//如果城市是上海
region.push={id:0101,text:"浦东区"};
region.push={id:0102,text:"松江区"};
}
//给box2赋值
$('#box2').combobox({
data: region
});
}
});
$("#cbx_quale").combobox({
url: '@(Url.Action("BaseDataCombobox", "System"))?type=@(CMM.RedStrings.Model.Const.BaseDataCategory.EnterpriseProperty)',
valueField: "ID",
textField: "Text",
panelHeight: "auto",
editable: false,
onSelect: function (record) {
$("#hide_quale").val(record.ID);
},
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "ID") {
$(this).combobox("select", val[0][item]);
}
}
}
});
只是有一定combobox不好的是后台返回的json数据不能直接绑定，网上的很多解决方法都是先通过ajax请求获取json数据，再通过回调函数将数据绑定到combobox中。
$.ajax({
url:"${ctx}/carpark-type/combobox.json",
type:"post",
datatype:"json",
success:function(data){
$('#cc').combobox({
data:data.rows,
valueField:'id',
textField:'text',
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "id") {
$(this).combobox("select", val[0][item]);
}
}
}
});
}
});
第一个combobox的options中加 onSelect: function () { //获取选中的值 var varSelect = $(this).combobox('getText'); if (varSelect == '中国') { //获取第二个combobox所在的datagrid Editor var varEditor = $('#DataGridId').datagrid('getEditor', { index: index, field: '' }); $(varEditor.target).combobox('disable'); } else { //获取第二个combobox所在的datagrid Editor var varEditor = $('#DataGridId').datagrid('getEditor', { index: index, field: '' }); $(varEditor.target).combobox('enable'); } }
1.添加combobox后做如下设置
2.根据自己的需要在类中重写如下方法
// ==========================================================
// Combo box data source methods
// ==========================================================
- (NSInteger) numberOfItemsInComboBox: (NSComboBox *) aComboBox {
#pragma unused (aComboBox)
return ([dataSource count]);
}
- (id) comboBox: (NSComboBox *) aComboBox objectValueForItemAtIndex: (NSInteger) index {
#pragma unused (aComboBox)
return [dataSource objectAtIndex:index];
}
- (NSUInteger) comboBox: (NSComboBox *) aComboBox indexOfItemWithStringValue: (NSString *) string {
#pragma unused (aComboBox)
return [dataSource indexOfObject:string];
}
- (NSString *) firstGenreMatchingPrefix: (NSString *) prefix {
NSString *string = nil;
NSString *lowercasePrefix = [prefix lowercaseString];
NSEnumerator *stringEnum = [dataSource objectEnumerator];
while ( string = [stringEnum nextObject] )
if ([[string lowercaseString] hasPrefix:lowercasePrefix] ) {
return (string) ;
}
return (nil);
} // firstGenreMatchingPrefix
- (NSString *) comboBox: (NSComboBox *) aComboBox completedString: (NSString *) inputString {
#pragma unused (aComboBox)
// This method is received after each character typed by the user, because we have checked the "completes" flag for
// genreComboBox in IB.
// Given the inputString the user has typed, see if we can find a genre with the prefix, and return it as the suggested complete
// string.
NSString *candidate = [self firstGenreMatchingPrefix:inputString];
return (candidate ? candidate : inputString);
}
这些方法实现combobox在选择选项、自动完成时的处理方式。其中dataSource为NSArray。
3.设置combobox的datasource为实现上述方法的对象即可。
直接在option里面写即可 { title: '企业', field: 'Ent', align: 'center', width: 100, editor: { type: 'combobox', options: { data: GetEnt(), valueField: "value", textField: "text", editable: false, required: true } } }其中GetEnt方法中可以写ajax 返回一个对象数组 如[{ value: 0, text:'企业1' },{ value: 2, text:'企业1' }]
var width = $(window).width()-80; var height = $(window).height()-120; stView_layout = $('#stView_layout').layout({ width: width, height: height }); station_view = $('#stationView').window({ title: '测站导航', left:50, top:80, width: width, modal: false, shadow: false, closed: true, height: height, onResize:function(w,h){ if(stView_treegrid){ stView_treegrid.treegrid({ width:w-20, height:h-260 }); } } });