topjui中combobox使用

1.创建combobox的方法

常用的一种是通过Js定义，一种是通过在input输入框中定义，还有一种通过在selete标签中定义，可以去看easyui的官方文档 http://www.jeasyui.net/plugins/169.html

补充：dataoptions是easyui的新特性，可以在里面定义属性，方法，样式等

2.掌握combobox的属性

去参考easyui的官方文档，这里对自己所用到的做一个总结

1.combobox有一个url属性，使用这个属性，后台方法传json数组过来即可

2.textField与valueField：后台在传 json数据过来之后，一个表示在combobox中显示的值，一个是提交表单存到数据库的值

3.设置组合框的值 $('#cc').combobox('setValue', '001');

4.设置组合框数组的值 $('#cc').combobox('setValues', ['001','002']);

5.清除组合框的值$('#cc').combobox('clear');

6.combobox如果不让它展示下拉框样式的话，设置hasDownArrow:false即可，

combobox让它高度自适应设置panelHeight:true即可

　combobox实现可编辑editable:true

3.实现combobox级联

实现级联的方式有不少,自己用到的两种方式，这里记录easyui的方式,代码如下：

<div data-toggle="topjui-layout" data-options="fit:true"><div data-options="region:'center',title:'',fit:true,border:false,bodyCls:'border_right_bottom'"><div class="topjui-fluid"><fieldset><legend>子表基本信息</legend></fieldset><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">器材代码</label> <input type="hidden" name="uuid"> <inputtype="hidden" name="c88"><input type="hidden" name="c00"><div class="topjui-input-block"><input type="text" name="c1" data-toggle="topjui-combobox"data-options="panelHeight:'auto',required:true,url:'Details/indexHandle.jsp?flags=queryC1',valueField:'c1',textField:'c1',onSelect:function(rec){<!-- alert(rec.c0); -->$('[comboname=c2]').combobox('clear');$('[comboname=c2]').combobox('reload','Details/indexHandle.jsp?flags=queryC2&c1='+rec.c1);    $('[comboname=c3]').combobox('clear');$('[comboname=c3]').combobox('reload','Details/indexHandle.jsp?flags=queryC3&c1='+rec.c1);        $('[comboname=c5]').combobox('clear');$('[comboname=c5]').combobox('reload','Details/indexHandle.jsp?flags=queryC5&c1='+rec.c1);    $('[comboname=c6]').combobox('clear');$('[comboname=c6]').combobox('reload','Details/indexHandle.jsp?flags=queryC6&c1='+rec.c1);                        }"></div></div><div class="topjui-col-sm6"><label class="topjui-form-label">器材名称</label><div class="topjui-input-block"><input type="text" name="c2" data-toggle="topjui-combobox"data-options="prompt:'请先选择器材代码',hasDownArrow:false,readonly:true,required:true,panelHeight:'auto',textField:'c2',valueField:'c2'"></div></div></div><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">件号/规格</label><div class="topjui-input-block"><input type="text" name="c3" data-toggle="topjui-combobox"data-options="prompt:'请先选择器材代码',hasDownArrow:false,required:true,readonly:true,panelHeight:'auto',textField:'c3',valueField:'c3'"></div></div><div class="topjui-col-sm6"><label class="topjui-form-label">数量</label><div class="topjui-input-block"><input type="text" name=c4 data-toggle="topjui-numberspinner"data-options="maxLength:4,precision:2, required:true"></div></div></div><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">计量单位</label><div class="topjui-input-block"><input type="text" name="c5" data-toggle="topjui-combobox"data-options="prompt:'请先选择器材代码',hasDownArrow:false,readonly:true,required:true,panelHeight:'auto',textField:'c5',valueField:'c5'"></div></div><div class="topjui-col-sm6"><label class="topjui-form-label">参考单价</label><div class="topjui-input-block"><input type="text" name="c6" data-toggle="topjui-combobox"data-options="prompt:'请先选择器材代码',hasDownArrow:false,readonly:true,required:true,panelHeight:'auto',textField:'c6',valueField:'c6'"></div></div></div><div class="topjui-row"><div class="topjui-col-sm6"><label class="topjui-form-label">单装名称</label><div class="topjui-input-block"><input type="text" name="c8" data-toggle="topjui-combobox"data-options="panelHeight:'auto',required:true,url:'Details/indexHandle.jsp?flags=queryC8',valueField:'c8',textField:'c8',onSelect:function(rec){<!-- alert(rec.c0); -->$('[comboname=c9]').combobox('clear');$('[comboname=c9]').combobox('reload','Details/indexHandle.jsp?flags=queryC9&c8='+rec.c8);                                                    }"></div></div><div class="topjui-col-sm6"><label class="topjui-form-label">单装编号</label><div class="topjui-input-block"><input type="text" name="c9" data-toggle="topjui-combobox"data-options="panelHeight:'auto',prompt:'请先选择单装名称',hasDownArrow:false,required:true,readonly:true,valueField:'c9',textField:'c9'"></div></div></div><div class="topjui-row"><div class="topjui-col-sm12"><label class="topjui-form-label">是否在质保期</label><div class="topjui-input-block"><input type="text" name="c10" data-toggle="topjui-combobox"data-options="required:true,panelHeight:'auto',textField:'text',valueField:'text',url:'../common/isDefind.json'"></div></div></div></div></div>
</div>

效果如下：当选择完器材代码之后，自动填充一系列数据。。。我在后台传json的时候还传了个selected:true过来,如果要实现像省市区那样的级联就不用传selected：true了

补充：

1、为combobox指定name后，经过easyUI自己解析后，生成的combobox（也就是select）没有name这个属性，

取而代之的是comboname，因为name要作为input的name。所以要根据name得到combobox要使用comboname

转载于:https://www.cnblogs.com/zengcongcong/p/10709764.html