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