(/index.

php)

Home(/index.php) Demo(/demo/main/index.php) Tutorial(/tutorial/index.php)

Documentation(/documentation/index.php) Download(/download/index.php)

Extension(/extension/index.php) Contact(/contact.php) Forum(/forum/index.php)

ComboGrid
Extendfrom$.fn.combo.defaultsand$.fn.datagrid.defaults.Overridedefaultswith
$.fn.combogrid.defaults.

Thecombogridcombinesaneditabletextboxwithdropdowndatagridpanel,fromwhichenables
userstoquicklyfindandselect.Thecombogridprovideskeyboardnavigationsupportforselecting
anitem.

Dependencies
combo
datagrid

UsageExample
CreateComboGrid
1.Createacombogridfrommarkup.
 1. <selectid="cc"class="easyuicombogrid"name="dept"style="width:250px;
2. dataoptions="
3. panelWidth:450,
4. value:'006',
5. idField:'code',
6. textField:'name',
7. url:'datagrid_data.json',
8. columns:[[
9. {field:'code',title:'Code',width:60},
10. {field:'name',title:'Name',width:100},
11. {field:'addr',title:'Address',width:120},
12. {field:'col4',title:'Col41',width:100}
13. ]]
14. "></select>

2.Thecombogridcanbecreatedfromexisting<select>or<input>elementusingjavascript.

1. <inputid="cc"name="dept"value="01">

1. $('#cc').combogrid({
2. panelWidth:450,
3. value:'006',
4.
5. idField:'code',
6. textField:'name',
7. url:'datagrid_data.json',
8. columns:[[
9. {field:'code',title:'Code',width:60},
10. {field:'name',title:'Name',width:100},
11. {field:'addr',title:'Address',width:120},
12. {field:'col4',title:'Col41',width:100}
13. ]]
14. });

AutocompleteFunctionality

Let'saddadvancedautocompletefunctionalitytothecombogrid.Thedropdowndatagridwill
displaythepossibleresultsaccordingtotheusertypes.
 1. $('#cc').combogrid({
2. delay:500,
3. mode:'remote',
4. url:'get_data.php',
5. idField:'id',
6. textField:'name',
7. columns:[[
8. {field:'code',title:'Code',width:120,sortable:true},
9. {field:'name',title:'Name',width:400,sortable:true}
10. ]]
11. });

Onserverside,the'q'parametermustberetrievefirst.Theusercanquerythedatabaseandthen
returnansqlresultinJSONformattothebrowser.

get_data.php:

1. $q=isset($_POST['q'])?$_POST['q']:'';//therequestparameter
2. //querydatabaseandreturnJSONresultdata
3. $rs=mysql_query("select*fromitemwherenamelike'$q%'");
4. echojson_encode(...);

Properties
Thepropertiesextendfromcomboanddatagrid,belowistheaddedpropertiesforcombogrid.

Name Type Description Default

Themessagedisplayedwhendatagridload
loadMsg string null
remotedata.

idField string Theidfieldname. null

textField string Thetextfieldtobedisplayedintextbox. null

Defineshowtoloaddatagriddatawhentext
changed.Setto'remote'ifthecombogridloads
fromserver.Whensetto'remote'mode,whatthe
mode string local
usertypeswillbesentasthehttprequest
parameternamed'q'toservertoretrievethenew
data.
 filter function(q, Defineshowtoselectthelocaldatawhen'mode'is
row) setto'local'.Returntruetoselecttherow.

Codeexample:

$('#cc').combogrid({
filter:function(q,row){
varopts=$(this).combogrid('options')
returnrow[opts.textField].indexOf(q)==0
}
})

Events
Theeventsextendfromcomboanddatagrid.

Methods
Themethodsextendfromcombo,belowistheaddedoroverriddenmethodsforcombogrid.

Name Parameter Description

options none Returntheoptionsobject.

Returnthedatagridobject.Theexamplebelowshowshowto
gettheselectedrow:
grid none
varg=$('#cc').combogrid('grid') //getdatagridobject
varr=g.datagrid('getSelected') //gettheselectedrow
alert(r.name)

Setthecomponentvalue.

Codeexample:
setValue value
$('#cc').combogrid('setValue','002')
$('#cc').combogrid('setValue',{id:'003',name:'name003'})

Setthecomponentvaluearray.

Codeexample:
setValues values
$('#cc').combogrid('setValues',['001','007'])
$('#cc').combogrid('setValues',['001','007',{id:'008',name:'name008'}])

clear none Clearthecomponentvalue.



Copyright20102017www.jeasyui.com