easyui的combobox下拉框初始化默認值以及保持該值一直顯示的方法

easyui的combobox下拉框默認初始值是空，下面是實現從遠程加載數據之后初始化默認值,以及讓該值一直排在下拉框的最頂部的方式。

目前的需求是需要在初始化的時候添加"全部數據庫"字段,並且在下拉的時候,"全部數據庫"一直排在最頂部。

初始化效果如下:

下拉之后的效果如下:

實現方式:

easyui的combobox有一個loader屬性,easyui的API對loader屬性說明如下:

easyui的combobox有一個onLoadSuccess事件,easyui的API對onLoadSuccess事件說明如下:

實現方式就是綜合利用easyui的loader屬性和onLoadSuccess事件。

完整的代碼如下所示(請關注重點代碼,紅色標注的部分):

<input id="dBName" name="dBName" class="easyui-combobox" style="width: 200px"
                                       data-options="
                                        valueField: 'dbname',   
                                        textField: 'dbname',   
                                        editable:false,
                                        loader:function(param,success,error){  
                                            $.ajax({  
                                                url: '${pageContext.request.contextPath}/rds/rds_findRdsDatabases.action?dbinstanceid=${param.dbinstanceid}',  
                                                dataType: 'json',  
                                                success: function(data){
                                                data.rows.unshift({dbname:'',dbname:'全部數據庫'});
                                                success(data.rows); //loader的success
                                                } 
                                            }); 
                                        },
                                        onLoadSuccess:function(){ $('#dBName').combobox('setValue','全部數據庫'); } "/>

上面的方法unshift()會將一個或多個元素添加到數組的頭部，然后把已有的元素移動到下標較大的位置一騰出空間，它返回的是數組的新長度。