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()会将一个或多个元素添加到数组的头部，然后把已有的元素移动到下标较大的位置一腾出空间，它返回的是数组的新长度。