Jquery combobox api及项目中用到的
来源:互联网 发布:对外贸易依存度数据 编辑:程序博客网 时间:2024/05/16 01:45
ComboBox
Extend from $.fn.combo.defaults. Override defaults with $.fn.combobox.defaults.
The combobox display a editable text box and drop-down list, from which the user can select one or multiple values.The user can type text directly into the top of list, or select one or more of present values from the list.
Dependencies
- combo
Usage Example
Create combobox from <select> element with a pre-defined structure.
<ol class="linenums"><li class="L0"><span class="tag"><select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"cc"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"easyui-combobox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"dept"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="lit">200px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span></li><li class="L1"><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"aa"</span><span class="tag">></span><span class="pln">aitem1</span><span class="tag"></option></span></li><li class="L2"><span class="pln"> </span><span class="tag"><option></span><span class="pln">bitem2</span><span class="tag"></option></span></li><li class="L3"><span class="pln"> </span><span class="tag"><option></span><span class="pln">bitem3</span><span class="tag"></option></span></li><li class="L4"><span class="pln"> </span><span class="tag"><option></span><span class="pln">ditem4</span><span class="tag"></option></span></li><li class="L5"><span class="pln"> </span><span class="tag"><option></span><span class="pln">eitem5</span><span class="tag"></option></span></li><li class="L6"><span class="tag"></select></span></li></ol>
Create combobox from <input> markup.
<ol class="linenums"><li class="L0"><span class="tag"><input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"cc"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"easyui-combobox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"dept"</span></li><li class="L1"><span class="pln"> </span><span class="atn">data-options</span><span class="pun">=</span><span class="atv">"valueField:'id',textField:'text',url:'get_data.php'"</span><span class="tag">></span></li></ol>
Create combobox using javascript.
<ol class="linenums"><li class="L0"><span class="tag"><input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"cc"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"dept"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"aa"</span><span class="tag">></span></li></ol>
<ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#cc'</span><span class="pun">).</span><span class="pln">combobox</span><span class="pun">({</span></li><li class="L1"><span class="pln"> url</span><span class="pun">:</span><span class="str">'combobox_data.json'</span><span class="pun">,</span></li><li class="L2"><span class="pln"> valueField</span><span class="pun">:</span><span class="str">'id'</span><span class="pun">,</span></li><li class="L3"><span class="pln"> textField</span><span class="pun">:</span><span class="str">'text'</span></li><li class="L4"><span class="pun">});</span></li></ol>
Create two dependent comboboxes.
<ol class="linenums"><li class="L0"><span class="tag"><input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"cc1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"easyui-combobox"</span><span class="pln"> </span><span class="atn">data-options</span><span class="pun">=</span><span class="atv">"</span></li><li class="L1"><span class="atv"> valueField: 'id',</span></li><li class="L2"><span class="atv"> textField: 'text',</span></li><li class="L3"><span class="atv"> url: 'get_data1.php',</span></li><li class="L4"><span class="atv"> onSelect: function(rec){</span></li><li class="L5"><span class="atv"> var url = 'get_data2.php?id='+rec.id;</span></li><li class="L6"><span class="atv"> $('#cc2').combobox('reload', url);</span></li><li class="L7"><span class="atv"> }"</span><span class="tag">></span></li><li class="L8"><span class="tag"><input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"cc2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"easyui-combobox"</span><span class="pln"> </span><span class="atn">data-options</span><span class="pun">=</span><span class="atv">"valueField:'id',textField:'text'"</span><span class="tag">></span></li></ol>
The json data format sample:
<ol class="linenums"><li class="L0"><span class="pun">[{</span></li><li class="L1"><span class="pln"> </span><span class="str">"id"</span><span class="pun">:</span><span class="lit">1</span><span class="pun">,</span></li><li class="L2"><span class="pln"> </span><span class="str">"text"</span><span class="pun">:</span><span class="str">"text1"</span></li><li class="L3"><span class="pun">},{</span></li><li class="L4"><span class="pln"> </span><span class="str">"id"</span><span class="pun">:</span><span class="lit">2</span><span class="pun">,</span></li><li class="L5"><span class="pln"> </span><span class="str">"text"</span><span class="pun">:</span><span class="str">"text2"</span></li><li class="L6"><span class="pun">},{</span></li><li class="L7"><span class="pln"> </span><span class="str">"id"</span><span class="pun">:</span><span class="lit">3</span><span class="pun">,</span></li><li class="L8"><span class="pln"> </span><span class="str">"text"</span><span class="pun">:</span><span class="str">"text3"</span><span class="pun">,</span></li><li class="L9"><span class="pln"> </span><span class="str">"selected"</span><span class="pun">:</span><span class="kwd">true</span></li><li class="L0"><span class="pun">},{</span></li><li class="L1"><span class="pln"> </span><span class="str">"id"</span><span class="pun">:</span><span class="lit">4</span><span class="pun">,</span></li><li class="L2"><span class="pln"> </span><span class="str">"text"</span><span class="pun">:</span><span class="str">"text4"</span></li><li class="L3"><span class="pun">},{</span></li><li class="L4"><span class="pln"> </span><span class="str">"id"</span><span class="pun">:</span><span class="lit">5</span><span class="pun">,</span></li><li class="L5"><span class="pln"> </span><span class="str">"text"</span><span class="pun">:</span><span class="str">"text5"</span></li><li class="L6"><span class="pun">}]</span></li></ol>
Properties
The properties extend from combo, below is the added properties for combobox.
Code example:
$('#cc').combobox({groupFormatter: function(group){return '<span style="color:red">' + group + '</span>';}});modestringDefines how to load list data when text changed.Set to 'remote' if the combobox loads from server.When set to 'remote' mode, what the user types will be sent as the http request parameter named 'q' to server to retrieve the new data.localurlstringA URL to load list data from remote.nullmethodstringThe http method to retrieve data.postdataarrayThe list data to be loaded.
Code example:
<input class="easyui-combobox" data-options="valueField: 'label',textField: 'value',data: [{label: 'java',value: 'Java'},{label: 'perl',value: 'Perl'},{label: 'ruby',value: 'Ruby'}]" />nullqueryParamsobjectThe additional parameters that will be sent to server when requesting remote data.Available since version 1.4.2.{}showItemIconbooleanTrue to display icon of the selected item on the textbox.Available since version 1.4.5.falsegroupPositionstringThe item group position, possible values are: 'static' and 'sticky'.Set this property to 'sticky' to stick the item group to the top of drop-down panel.Available since version 1.4.5.staticfilterfunctionDefines how to filter the local data when 'mode' is set to 'local'. The function takes two parameters:
q: the user typed text.
row: the list row data.
Return true to allow the row to be displayed.
Code example:
$('#cc').combobox({filter: function(q, row){var opts = $(this).combobox('options');return row[opts.textField].indexOf(q) == 0;}});formatterfunctionDefineds how to render the row. The function takes one parameter: row.
Code example:
$('#cc').combobox({formatter: function(row){var opts = $(this).combobox('options');return row[opts.textField];}});loaderfunction(param,success,error)Defines how to load data from remote server. Return false can abort this action.This function takes following parameters:
param: the parameter object to pass to remote server.
success(data): the callback function that will be called when retrieve data successfully.
error(): the callback function that will be called when failed to retrieve data.json loaderloadFilterfunction(data)Return the filtered data to display. Available since version 1.3.3.
Events
The events extend from combo, below is the added events for combobox.
Code example:
// change the http request parameters before load data from server$('#cc').combobox({onBeforeLoad: function(param){param.id = 2;param.language = 'js';}});onLoadSuccessnoneFires when remote data is loaded successfully.onLoadErrornoneFires when remote data load error.onChangenewValue,oldValueFires when the field value is changed.onSelectrecordFires when the user select a list item.onUnselectrecordFires when the user unselect a list item.
Methods
The methods extend from combo, below is the added or overridden methods for combobox.
Code example:
$('#cc').combobox('reload'); // reload list data using old URL$('#cc').combobox('reload','get_data.php'); // reload list data using new URLsetValuesvaluesSet the combobox value array.
Code example:
$('#cc').combobox('setValues', ['001','002']);setValuevalueSet the combobox value.
Code example:
$('#cc').combobox('setValue', '001');clearnoneClear the combobox value.selectvalueSelect the specified item.unselectvalueUnselect the specified item.
- Jquery combobox api及项目中用到的
- 项目中用到的
- 项目中用到的ext及js细节
- 项目中用到的开源库
- 项目中用到的工具
- 项目中用到的css
- 串口通信中用到的api函数
- 项目中用到的一个小插件,基于jQuery的消息提醒 toastr.js
- 项目管理中用到的图释
- 项目中用到的一个树控件
- AppFuse中用到的开源项目
- js一个项目中用到的脚本
- wap项目中用到的分页技术
- 项目中用到的一些开源
- 项目中用到的ajax(jsp)
- 项目中用到的ajax(php)
- 项目中用到的SQL语句
- 项目过程中用到的工具
- 算法列表List of Algorithms
- 《MySQL必知必会学习笔记》:通配符的使用
- iOS笔试面试问题总结
- 主成分分析(Principal components analysis)-最大方差解释
- JavaScript学习笔记1
- Jquery combobox api及项目中用到的
- 毕设项目期间遇到的问题记录
- android studio 导图第三方库(列:sildingMenu)
- 集线器,路由器,二层交换机和三层交换机的作用和区别
- MFC-CMenu(菜单)
- 《NumPy Beginner's Guide》笔记Chapter5
- 主成分分析(Principal components analysis)-最小平方误差解释
- go语言defer执行时机简单分析
- Vim使用总结