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"> <input
                        type="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