|
carcaret
|
 |
« on: May 10, 2013, 03:06:12 AM » |
|
Hi!
I was trying to accomplish something with combobox but not sure how to do it.
Let's say I have a combobox with 12 options, and let's say those options are divided into 3 groups, so 4 options per group.
What I'd like to do is prior to the first option of each group, add the name of the group, and make it not selectable, so it'd look like this:
Group1 (not selectable)
Option11
Option12
Option13
Option14
Group2 (not selectable)
Option21
Option22
Option23
Option24
Group3 (not selectable)
Option31
Option32
Option33
Option34
I've tried to play with 'onLoadSuccess' event and the 'formatter', but not sure how to do it correctly, any suggestion?
Thanks!
|
|
|
|
|
Logged
|
|
|
|
|
carcaret
|
|
« Reply #1 on: May 10, 2013, 05:02:36 AM » |
|
Forgot to say that I'm retrieving the options via AJAX, and then I wanted to add de group names via javascript. Is that possible?
|
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #2 on: May 10, 2013, 08:29:29 AM » |
|
Here is the example shows how to achieve the group item in combobox. var data = [
{group:'Group1',items:[
{value:'v11',text:'Option11'},
{value:'v12',text:'Option12'},
{value:'v13',text:'Option13'},
{value:'v14',text:'Option14'}
]},
{group:'Group2',items:[
{value:'v21',text:'Option21'},
{value:'v22',text:'Option22'},
{value:'v23',text:'Option23'},
{value:'v24',text:'Option24'}
]}
];
function loadFilter(data){
var dd = [];
for(var i=0; i<data.length; i++){
var group = data[i].group;
dd.push({
group:group,
text:group
});
dd = dd.concat(data[i].items);
}
return dd;
}
function onLoadSuccess(){
var groupItems = $(this).combobox('panel').find('div.combobox-item:has(span.combobox-group-text)');
groupItems.removeClass('combobox-item');
}
function formatter(row){
if (row.group){
return '<span class="combobox-group-text" style="font-weight:bold">'+row.group+'</span>';
} else {
return '<span style="padding-left:10px">'+row.text+'</span>';
}
}
$(function(){
$('#cc').combobox({
data:data,
loadFilter:loadFilter,
formatter:formatter,
onLoadSuccess:onLoadSuccess
});
});
|
|
|
|
|
Logged
|
|
|
|
|
carcaret
|
|
« Reply #3 on: May 13, 2013, 03:19:00 AM » |
|
Thanks a lot, worked perfectly.
|
|
|
|
|
Logged
|
|
|
|
andrux
Newbie
Posts: 26
|
|
« Reply #4 on: June 15, 2013, 11:40:05 AM » |
|
Great, this thread helped me get the group feature working! I would like to ask something about this, though, how do you add also items with no group? I tried a couple variations including the one below but they don't work, I get a Cannot read property 'value' of undefined error. var data = [
{group:'Group1',items:[
{value:'v11',text:'Option11'},
{value:'v12',text:'Option12'},
]},
{group:'Group2',items:[
{value:'v21',text:'Option21'},
]},
{value:'gl',text:'Groupless'},
]; Thanks for any help |
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #5 on: June 15, 2013, 06:26:41 PM » |
|
The group combobox will be supported in version 1.3.4. The updated combobox plugin can be downloaded from http://www.jeasyui.com/easyui/plugins/jquery.combobox.js. Please refer to this example http://www.jeasyui.com/demo/main/index.php?plugin=ComboBox&theme=default&dir=ltr&pitem=Group%20ComboBox or the code below. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/combobox.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/plugins/jquery.combobox.js"></script>
<script>
var data = [{
"value":"f20",
"text":"Firefox 2.0 or higher",
"group":"Firefox"
},{
"value":"f15",
"text":"Firefox 1.5.x",
"group":"Firefox"
},{
"value":"f10",
"text":"Firefox 1.0.x",
"group":"Firefox"
},{
"value":"ie7",
"text":"Microsoft Internet Explorer 7.0 or higher",
"group":"Microsoft Internet Explorer"
},{
"value":"ie6",
"text":"Microsoft Internet Explorer 6.x",
"group":"Microsoft Internet Explorer"
},{
"value":"ie5",
"text":"Microsoft Internet Explorer 5.x",
"group":"Microsoft Internet Explorer"
},{
"value":"ie4",
"text":"Microsoft Internet Explorer 4.x",
"group":"Microsoft Internet Explorer"
},{
"value":"op9",
"text":"Opera 9.0 or higher",
"group":"Opera"
},{
"value":"op8",
"text":"Opera 8.x",
"group":"Opera"
},{
"value":"op7",
"text":"Opera 7.x",
"group":"Opera"
},{
"value":"Safari",
"text":"Safari"
},{
"value":"Other",
"text":"Other"
}];
</script>
</head>
<body>
<input class="easyui-combobox" name="browser" style="width:280px;" data-options="
data:data,
valueField:'value',
textField:'text',
groupField:'group'
">
</body>
</html>
|
|
|
|
|
Logged
|
|
|
|
andrux
Newbie
Posts: 26
|
|
« Reply #6 on: June 15, 2013, 06:28:01 PM » |
|
Thanks, I'll give it a try
|
|
|
|
|
Logged
|
|
|
|
andrux
Newbie
Posts: 26
|
|
« Reply #7 on: June 16, 2013, 07:40:08 PM » |
|
Thank you, stworthy, it worked! All I needed was to use the combobox.js file you suggested!
|
|
|
|
|
Logged
|
|
|
|
bluesand4
Newbie
Posts: 5
|
|
« Reply #8 on: June 27, 2013, 10:34:47 AM » |
|
Hi,
Thanks for the example which helped me a lot.
I would like to know how I can set the valueField (i.e. what will be displayed in the combobox after the user selects an option) to be a mix of the group name & the item name (e.g. Grp1-item1).
|
|
|
|
« Last Edit: June 27, 2013, 12:56:21 PM by bluesand4 »
|
Logged
|
|
|
|
bluesand4
Newbie
Posts: 5
|
|
« Reply #9 on: July 01, 2013, 10:42:04 PM » |
|
any help regarding my question?
|
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #10 on: July 02, 2013, 12:42:24 AM » |
|
To use the group combobox, the 'valueField', 'textField' and 'groupField' should be assigned.
|
|
|
|
|
Logged
|
|
|
|
|
aswzen
|
|
« Reply #11 on: January 13, 2017, 08:58:58 AM » |
|
How to achieve it thru html ? thank you..
[UPDATE] sorry got it
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
|
|
|
|
|
Logged
|
|
|
|
|
