下载文档原格式
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");//清空所选项。
Combobox下拉框赋值 1string sql = "select distinct RoleName from tb_Role";2 DataTable dt = SqlHelper.DataTable(sql);3 cmb_Authority.Items.Clear();//移除下拉框中所有集合4foreach (DataRow dr in dt.Rows)//遍历数据表中⾏的数据5 {6 cmb_Authority.Items.Add(dr[0]);//把表中第⼀列的数据添加到下拉框中7 }8if (xiu==0)9 {10 cmb_Authority.SelectedIndex = 0;11 }12if (xiu==1)13 {14 btn_Reg.Text = "修改";15 txt_OperatorName.Text = tb_users.OperatorName;16 txt_UserName.Text = tb_erName;17 txt_UserName.ReadOnly = true;18 txt_Pwd.Text = tb_users.Pwd;19 cmb_Authority.Items.Clear();//移除下拉框中所有集合20 cmb_Authority.Items.Add(tb_users.RoleName);21 cmb_Authority.SelectedIndex = 0;22foreach (DataRow dr in dt.Rows)//遍历数据表中⾏的数据23 {24if (dr[0].ToString()== tb_users.RoleName)25 {26continue;27 }28 cmb_Authority.Items.Add(dr[0]);//把表中第⼀列的数据添加到下拉框中29 }3031 }1string sql = "select * from tb_Role"; //查询数据所有信息2 DataTable dt = SqlHelper.DataTable(sql);3 cmb_Authority.DataSource = dt; //下拉框数据源为dt4 cmb_Authority.DisplayMember = "RoleName";//显⽰成员5 cmb_Authority.ValueMember = "RoleID"; //值成员(类似与索引)67//cmb_Authority.Items.Clear();//移除下拉框中所有集合8//foreach (DataRow dr in dt.Rows)//遍历数据表中⾏的数据9//{10// cmb_Authority.Items.Add(dr[0]);//把表中第⼀列的数据添加到下拉框中11//}12//if (xiu==0)13//{14// cmb_Authority.SelectedIndex = 0;15//}16if (xiu==1)17 {18 btn_Reg.Text = "修改";19 txt_OperatorName.Text = tb_users.OperatorName;20 txt_UserName.Text = tb_erName;21 txt_UserName.ReadOnly = true;22 txt_Pwd.Text = tb_users.Pwd;23 cmb_Authority.SelectedValue = tb_users.RoleID; //(下拉框的值=这个索引)24 }⼀个是书库绑定⼀个是再次循环赋值两种赋值⽅法comboBox1.Items.Add(new { key = "key", value = "value" });ArrayList list = new ArrayList();list.Add(new DictionaryEntry("name", "姓名"));list.Add(new DictionaryEntry("username", "⽤户名"));list.Add(new DictionaryEntry("sfz", "⾝份Y证号"));list.Add(new DictionaryEntry("Tel", "电话号码"));comboBox1.DataSource = list;comboBox1.DisplayMember = "Value";//显⽰出来的。
easyui--下拉列表普通的combobox：1.<input id="brandid_C" class="easyui-combobox" name="brandid"2.data-options="valueField:'value',textField:'text',3.url:'<%=path %>/controller/common/fosys.data.brand.type.json'" />valueField: 'value'——选项的值textField: 'text'——选项的⽂本获取加载数据：var cData = $('#brandid_C').combobox('getData');获取选择的数据：var cCombox = $('#brandid_C').combobox('getValue');重置选项数据：var cCombox = $('#brandid_C').combobox('setValue','');级联combobox ：1.地市：<input id="cityid_analSum" name="cityid" class="easyui-combobox" data-options="2.valueField: 'area_code',3.textField: 'area_name',4.url: '<%=path %>/controller/businessAnalyse/getAreaInfo?parentarea_id=-1',5.onSelect: function(rec){6.$('#countyid_analSum').combobox('setValue','');7.var url = '<%=path %>/controller/businessAnalyse/getAreaInfo?parentarea_id='+rec.area_code;8.$('#countyid_analSum').combobox('reload', url);9.}" />10.县市： <input id="countyid_analSum" name="countyid" class="easyui-combobox" data-options="valueField:'area_code',textField:'area_name'" />//下拉列表⾃动选中原来默认的选项1. $(document).ready(function() {2.$('#cityId').combobox({3.url: '',4.valueField: 'id',5.textField: 'name',6.panelHeights: '200',7.onLoadSuccess: function () { //数据加载完毕事件,设置默认选中8.var data = $('#cityId').combobox('getData');9.if (data.length > 0) {10.$("#cityId").combobox('select', data[0].id);11.}12.}13.});14.});。
ComboBox（下拉列表框）⼀． 加载⽅式//class 加载⽅式<select id="box" class="easyui-combobox" name="box"style="width:200px;"><option value="aaaa">aaaa</option><option value="bbbb">bbbb</option><option value="cccc">cccc</option><option value="dddd">dddd</option><option value="eeee">eeee</option></select>//JS 加载⽅式<input id="box" name="user">$('#box').combobox({valueField : 'id',textField : 'user',url : 'content.json',});⼆．属性列表//部分属性$('#box').combobox({valueField : 'id',textField : 'user',//url : 'content.json',url : 'user.php',groupField : 'gender',groupFormatter: function(group){return '<span style="color:red">' + group + '</span>';},mode : 'remote',});//部分属性$('#box').combobox({valueField : 'label',textField : 'value',data : [{label : 'java',value : 'java',}, {label : 'C#',value : 'C#',}]});//部分属性$('#box').combobox({valueField : 'id',textField : 'user',//url : 'content.json',url : 'user.php',filter: function(q, row){var opts = $(this).combobox('options');return row[opts.textField].indexOf(q) >= 0;},formatter: function(row){var opts = $(this).combobox('options');return '[' + row[opts.textField] + ']';},});三．事件列表//部分事件$('#box').combobox({onSelect : function () {//alert('选定项时触发！');},onUnselect : function () {alert('选定后触发！');},});三．⽅法列表//部分⽅法console.log($('#box').combobox('getData')); $('#box').combobox('loadData', [{"id" : 1,"user" : "蜡笔⼩新","email" : "xiaoxin@","group" : "男","date" : "2014-10-1"},{"id" : 2,"user" : "樱桃⼩丸⼦","email" : "xiaowanzi@", "group" : "⼥","date" : "2014-10-2"},{"id" : 3,"user" : "⿊崎⼀护","email" : "yihu@","group" : "男","date" : "2014-10-3"}]);$('#box').combobox('reload');$('#box').combobox('reload', 'content.json'); $('#box').combobox('setValue', '001');$('#box').combobox('unselect', 1);。
15ComboboxCombobox是下拉框控件。
由一个输入框、下拉按钮组成。
当点击下拉按钮之后，会弹出下拉列表，用户选择相应的选项后，下拉列表会收起，用户选择的选项会出现在输入框中。
Combobox不是定义在tkinter中的控件，而是定义在ttk中的一个控件。
Combobox不是继承的Widget类，而是继承了Entry类，因此可以把Combobox当成是Entry类的扩展。
下拉框控件和列表框控件非常类似，不过只显示为一个输入框，更省窗口空间。
15.1属性属性描述class_设置创建的Combobox实例的名字cursor鼠标位于Combobox的形状exportselection决定是否可以复制选中的文本内容。
如果exportselection=True，表示可以。
exportselection=False，表示不可复制列表框中选中的选项height下拉列表的行数。
默认值是20justify输入框中的对齐方式。
postcommand下拉列表弹出前的回调函数。
用于动态改变下拉列表内容。
takefocus能够使用Tab获得输入焦点values设置下拉列表的值width定义输入框的宽度。
默认值是20。
下拉箭头的宽度是固定的，不可调整。
15.1.1class_设置创建的Combobox的名字。
这个名字只能在创建实例的时候赋值，不能动态更改。
15.1.2cursor鼠标位于Combobox控件时的形状。
具体的关于cursor的介绍见3.2.6节。
不过此属性对combobox不起作用，鼠标的形状不会发生改变15.1.3exportselection决定是否可以复制选中的文本内容。
如果exportselection=True，表示可以。
exportselection=False，表示不可复制选中的选项。
不过此属性对于Combobox控件不起作用。
15.1.4height确定下拉列表的行数或者项目数。
默认值是20，如果超过这个默认值，会自动出现滚动条。
