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