EasyUI使用笔记之combobox下拉框动态赋值

jQueryEasyUI为Combo,Combobox添加清除值功能的实例效果图：图标(function($){//初始化清除按钮function initClear(target){var jq = $(target);var opts = jq.data('combo').options;var combo = jq.data('combo').combo;var arrow = combo.find('bo-arrow');var clear = arrow.siblings("bo-clear");if(clear.size()==0){//创建清除按钮。

clear = $('<span class="combo-clear" style="height: 20px;"></span>');//清除按钮添加悬停效果。

clear.unbind("bo bo").bind("bo bo",function(event){var isEnter = event.type=="mouseenter";clear[isEnter ? 'addClass' : 'removeClass']("combo-clear-hover");});//清除按钮添加点击事件，清除当前选中值及隐藏选择⾯板。

clear.unbind("bo").bind("bo",function(){bo("setValue","").combo("setText","");bo('hidePanel');});arrow.before(clear);};var input = combo.find("bo-text");input.outerWidth(input.outerWidth()-clear.outerWidth());opts.initClear = true;//已进⾏清除按钮初始化。

1. 设定默认值把属性Style->Sort去掉，这一步必须的CComboBox *pBox = (CComboBox *)GetDlgItem( IDC_COMBOBOX1 ) ; //假设ID为IDC_COMBOBOX1pBox->SetCurSel( 0 ) ; //设置为第零个元素一、如何添加/删除Combo Box内容1. 在Combo Box控件属性的Data标签里面添加，一行表示Combo Box下拉列表中的一行。

换行用ctrl+回车。

2. 在程序初始化时动态添加如：//控件内容初始化CString strTemp;((CComboBox*)GetDlgItem(IDC_COMBO_CF))->ResetContent();//消除现有所有内容for(int i=1;i<=100;i++){strTemp.Format("%d",i);((CComboBox*)GetDlgItem(IDC_COMBO_CF))->AddString(strTemp);}3. 下拉的时候添加如：CString strTemp;int iCount=((CComboBox*)GetDlgItem(IDC_COMBO_CF))->GetCount();//取得目前已经有的行数if(iCount<1)//防止重复多次添加{((CComboBox*)GetDlgItem(IDC_COMBO_CF))->ResetContent();for(int i=1;i<=100;i++){strTemp.Format("%d",i);((CComboBox*)GetDlgItem(IDC_COMBO_CF))->AddString(strTemp);}}4. 删除DeleteString( UINT nIndex )//删除指定行，5. 插入InsertString( int nIndex, LPCTSTR lpszItem )//将行插入到指定位置6. 查找FindString( int nStartAfter, LPCTSTR lpszItem )//可以在当前所有行中查找指定的字符传的位置，nStartAfter指明从那一行开始进行查找。

jQueryEasyUI-ComboBox（下拉列表框）⼀、combobox 前台页⾯动态加载显⽰判断输⼊值在下拉列表是否存在var nameStr ='';$(document).ready(function(){$('#customerId').combobox({prompt:'请输⼊或选择客户名称', //prompt属性为没有选中任何选项的时候显⽰的标签如“--性别--”url:'${rc.contextPath}/sale/findBusinessPartnerByName',valueField:'id',textField:'text' ,onClick: function(node) {attributeShow($("#customerId").combotree("getValue"));},filter: function(q, row){ //filter属性模糊查询var opts = $(this).combobox('options');//return row[opts.textField].indexOf(q) == 0;return row[opts.textField].indexOf(q)>-1;//将从头位置匹配改为任意匹配},onLoadSuccess: function(){var partnerId = '${(saleOrder.partnerId)!}';if(partnerId){$('#customerId').combobox('setValue',partnerId);}},onSelect: function(){var partnerId = $("#customerId").combotree("getValue");$("#business_partner_id").val(partnerId);findBusinessPartnerContactByPartnerId(partnerId);findSaleAddressByPartnerId(partnerId);},onChange: function(newValue, oldValue){var v = $("#customerId").combotree("getText");var arr = nameStr.split(',');var index = $.inArray(v, arr);if(index < 0 ){$("#business_partner_id").val('');}else{$("#business_partner_id").val($("#customerId").combobox("getValue"));}},formatter: function(row){var opts = $(this).combobox('options');nameStr += row[opts.textField] + "," ;return row[opts.textField];}});});Combobox⽤法和⽅法参数:1、需要引⼊class=" easyui-combobox”2、参数设置需要在data-options中设置3、属性参数配置：valueField：基础数据值名称绑定到Combobox(提交值)textField：基础数据的字段名称绑定的Combobox（显⽰值）mode:定义当⽂本改变时如何加载列表数据，当设置为remote模式下，什么类型的⽤户将被发送http请求参数名为'q'的服务器，以获取新的数据。

第⼆百⼆⼗四节，jQueryEasyUI，ComboGrid（数据表格下拉框）组件jQuery EasyUI，ComboGrid(数据表格下拉框)组件学习要点： 1.加载⽅式 2.属性列表 3.⽅法列表本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使⽤⽅法，这个组件依赖于 Combo(⾃定义下拉框)和 DataGrid(数据表格)组件。

⼀．加载⽅式class 加载⽅式<select id="box" class="easyui-combogrid" name="dept"style="width:250px;"data-options="panelWidth:450,value:'请选择⼀个值',idField:'id',textField:'user',url:'content.json',columns:[[{field:'user',title:'帐号',width:120},{field:'email',title:'邮箱',width:120},{field:'date',title:'创建时间',width:120},]]"></select>JS 加载⽅式<input id="box" name="user" value="请选择⼀个⽤户">jscombogrid()将⼀个input元素执⾏数据表格下拉框组件$(function () {$('#box').combogrid({panelWidth: 600,idField: 'id',textField: 'user',url: 'content.json',columns: [[{field: 'id',title: '编号',width: 120,},{},{field: 'date',title: '创建时间',width: 120,}]]});});⼆．属性列表注意：Combo(⾃定义下拉框)组件，⽤⾃定义下拉框的属性，⽅法，事件 DataGrid(数据表格)组件⽤数据表格的属性，⽅法，事件loadMsg string 在数据表格加载远程数据的时候显⽰消息。

ComboBox控件的用法（转载）一、如何添加/删除Combo Box内容1，在Combo Box控件属性的Data标签里面添加，一行表示Combo Box下拉列表中的一行。

换行用ctrl+回车。

2，在程序初始化时动态添加如：//控件内容初始化CString strTemp;((CComboBox*)GetDlgItem(IDC_COMBO_CF))->ResetConte nt();//消除现有所有内容for(int i=1;i<=100;i++){strTemp.Format("%d",i);((CComboBox*)GetDlgItem(IDC_COMBO_CF))->AddString(st rTemp);}3，下拉的时候添加如：CString strTemp;intiCount=((CComboBox*)GetDlgItem(IDC_COMBO_CF))->GetCou nt();//取得目前已经有的行数if(iCount<1)//防止重复多次添加{((CComboBox*)GetDlgItem(IDC_COMBO_CF))->ResetConte nt();for(int i=1;i<=100;i++){strTemp.Format("%d",i);((CComboBox*)GetDlgItem(IDC_COMBO_CF))->AddString(st rTemp);}}4，删除DeleteString( UINT nIndex )//删除指定行，5，插入InsertString( int nIndex, LPCTSTR lpszItem )//将行插入到指定位置6，查找FindString( int nStartAfter, LPCTSTR lpszItem )//可以在当前所有行中查找指定的字符串的位置，nStartAfter指明从那一行开始进行查找。

JQueryEasyUI内Combobox的onChange事件1、原始⽅法我想写个html代码的都对下拉选择标签select不陌⽣，关于这个标签，在不加任何渲染的情况下，想要触发其onchange事件是很简单的⼀件事情，如下：<select id="sOne" onchange="getVal()"><option value="0">STEP DAY</option><option value="1">DAY</option></select>紧接着书写js函数getVal()即可实现。

2、遇到曹操就没辙了但是，当我们⽤EasyUI的CSS和JS来选择了select过后，想要向上⾯⼀样来触发其onchange事件，那就不⾏了的。

如下：<select id="sTwo" class="easyui-combobox" multiple="true" panelheight="auto" style="width: 100px" onchange="getValTwo()"><option value="">STEP DAY</option><option value="1">STEP</option><option value="0">DAY</option></select>这⾥提供了⼀个js函数如下：function getValTwo(){alert("Success!");}不管我们如何地点击select，始终都得不到客户端页⾯的响应，给你弹出⼀个Success!的窗体。

jQueryEasyUIAPI中⽂⽂档-ComboBox组合框扩展⾃ $bo.defaults。

⽤ $bobox.defaults 重写了 defaults。

依赖 combo ⽤法 <select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option><option>bitem2</option> <option>bitem3</option> <option>ditem4</option> <option>eitem5</option> </select> <inputid="cc" name="dept" value="aa"> 复制代码代码如下: $('#cc').combobox({ url:'combobox_data.json', valueField:'id', textField:'text' }); json 数据格式的⽰例复制代码代码如下: [{ "id":1, "text":"text1" },{ "id":2, "text":"text2" },{ "id":3, "text":"text3", "selected":true },{ "id":4, "text":"text4" },{ "id":5, "text":"text5" }]其特性扩展⾃ combo，下列是为combobox 增加的特性。

利⽤easyui-combotree实现下拉菜单多选功能（带多选框）最终的效果图原easyui-combotree样式Html<select id="select_order_type" name="select_order_type" class="easyui-combotree" multiple style="width:140px;"></select>JavaScript其中 <{$select_option_order_type}> 为 php后端 Smarty 赋值例： { "id":1, "text":"订机" }, { "id":2, "text":"My BBBBB" }, { "id":3, "text":"My CCCCC" }注意：双引号必须要有//easyui-combotree 加载数据$("#select_order_type").combotree({data: [ <{$select_option_order_type}> ]});//页⾯加载完成后执⾏$(document).ready(function(){//easyui-combotree 去掉图标$(".tree-icon,.tree-file").removeClass("tree-icon tree-file");$(".tree-icon,.tree-folder").removeClass("tree-icon tree-folder tree-folder-open tree-folder-closed");});//EasyUI Combotree 获取所有选中的节点function getCombotreePropValues(combotreeId){var result = "";var tr= $("#"+combotreeId).combotree('tree');var nodes = tr.tree('getChecked');if(nodes.length > 0){for(var i=0; i<nodes.length; i++){//console.log(nodes[i] );//result += nodes[i].id + ":"+nodes[i].text + "," ; //1:My AAAAA,2:My BBBBB,3:My CCCCCresult += nodes[i].text + "," ;}if(result.indexOf(",") > -1){result = result.substring(0, result.length - 1);}}return result;};取值//easyui-combotree 获取选中值var order_type=getCombotreePropValues("select_order_type"); 如果不选则返回空 如果选⼀个则返回⼀个值没有逗号如订机 如果选两个及以上则返回多个值⽤逗号分隔如订机,投诉,咨询 如果判断必须选中三项则//必须选中三项var subject=getCombotreePropValues("consult_subject"); //alert(subject);//easyui-combotree 获取选中值if(subject==''){alert('请选择3+3科⽬！');return;}else{var arr_subject =subject.split(","); //字符串转数组if(arr_subject.length!=3){alert('3+3科⽬必须选 3 项！');return;}}JavaScript 赋选中项例：在数据库中取到的选中项为 ⽣物,物理,历史Combotree 设置所有选中的节点的⽅法//EasyUI Combotree 设置所有选中的节点function setCombotreeSelectedItem(combotreeId,strSelectedText){//所有项//获取combotree的树tree对象var tree = $('#'+combotreeId).combotree('tree');//var str=JSON.stringify(tree); console.log(str+"---------- "+tree);//通过树tree对象获取根节点var root = tree.tree('getRoot');//var str1=JSON.stringify(root); console.log(str1+"---------------------------");//通过根节点获取根节点下的⼦节点var json_select_data = tree.tree('getChildren',root); //所有项//var children1=JSON.stringify(children);console.log(children1+"---------------------------");//选中项var arr_selected= new Array();arr_selected = strSelectedText.split(","); //选中项⽣物,物理,历史var arr_id='';for (var i in arr_selected ) //遍历选中项{//console.log(arr_selected[i]);for( var j in json_select_data){ //遍历所有项 json_select_data 数组时，i为索引//console.log(json_select_data[i].id + " " + json_select_data[i].text);if(arr_selected[i]==json_select_data[j].text){if(arr_id==""){arr_id=json_select_data[j].id;}else{arr_id=arr_id+","+json_select_data[j].id;}}}}$('#'+combotreeId).combotree('setValues', arr_id); }调⽤⽅法：subject为 combotree控件的 id//在数据库中取到选中项的格式var strText="⽣物,物理,历史";//设置选中项setCombotreeSelectedItem('subject',strText);Html<select id="subject" name="subject" class="easyui-combotree" style="height:28px;width:160px;" multiple >清空所有选中项$("#subject").combotree("clear");注意：在 $('#fm').form('load',row); 之后如果 combotree 没有选中项就必须⽤ $("#subject").combotree("clear"); 清空所有选中，否则每次选中的项后⾯会多加⼀个逗号如：解决⽅法：$('#fm').form('load',row);if(row.subject!=null && row.subject!=""){//设置所有选中的节点的⽅法setCombotreeSelectedItem('subject',row.subject); //row.subject 为⽣物,物理,历史}else{$("#subject").combotree("clear");}将 easyui-combotree 设为只读并清空所选项$('#consult_subject').combobox("readonly",true);//设只读$("#consult_subject").combotree("clear");//清空所选项。