easyui-combobox高度渲染问题

来源:互联网 发布:mysql中syntax error 编辑:程序博客网 时间:2024/06/06 20:40

问题:easyui-combobox在高度渲染时,如果通过panelHeight给定高度,则下拉面板的高度始终是不变的,此时若选项较少,则会出现空白版面看起来不协调!
实现结果:高度根据给定的条数或者给定的高度自适应,超出时带滚动条,未超出时自适应。
1、有些网友给出的方法是通过获取下拉面板中选项的条数动态设置面板panelHeight,如下:

$("#id").combobox({    //.....    onShowPanel : function(){            var count = $(this).combobox('getData').length;            if(count > 10){                $(this).combobox('panel').height(180);            }else{                $(this).combobox('panel').height("auto");            }        },    //.....})

此方法实现当数据的条数超出10条时,设置下拉面板高度为180,自带滚动条;小于10条时,下拉面板高度自适应。
2、上面的方法可以解决上面所描述的问题,下面给出一种通过easyui-combobox自带属性来解决上述问题:
(1)html(可行)

<input class="easyui-combobox" data-options="panelHeight:'auto',panelMaxHeight:180">

(2)html+js(可行)

<input id="id">$("#id").combobox({    panelHeight:'auto',    panelMaxHeight:180})

(3)html+js(不可行)
此方法panelMaxHeight属性将无效,下拉面板的高度会永远的自适应,当数据条数过多的时候可能会出现超出浏览器的显示高度

<input id="id" class="easyui-combobox">$("#id").combobox({    panelHeight:'auto',    panelMaxHeight:180})

(1)、(2)两种方法实现当下拉面板高度超出180时,自带滚动条;小于180时,下拉面板高度自适应;(3)方法不可用。

原创粉丝点击