easyui 没有提供下拉树的demo,效果图:最下面
ComboTree
Extend from $.fn.combo.defaults and $.fn.tree.defaults. Override defaults with $.fn.combotree.defaults.
上面为官网http://www.jeasyui.com/documentation/index.php#上面的一句话,comboTree是来自tree和combox的组合控件
例子: *别忘记引用jquery.js和jquery.easyui.mini.js和jquery.css
(其中 返回的json数据 要和easyui提供的 id,parentId,state,text...保持一致)***
<td><input id="testComt" name="testComt" class="easyui-combotree" style="width:156px;"/></td>
$(function{
$('#testComt').combotree({
url :"org/fillTree?root=Y",
onBeforeExpand:function(node,param){
$('#testComt').combotree("tree").tree("options").url = "org/fillTree?root=Y&parentId=" + node.id;
},
onSelect: function(node){
alert(22);
}
})
})
注意:要确定是用的tree还是combo里面的方法属性
$('#testComt').combotree("tree")("options")...
同时:会出现一个问题,下拉树的数据过多和层次很深的时候 会出现 滚动条
so:可以到jquery.easyui.mini.js 中 找到:
$.fn.combotree.defaults = $.extend({}, $.fn.combo.defaults,
$.fn.tree.defaults, {
editable : false
});
})(jQuery);
将其改成:
$.fn.combotree.defaults = $.extend({}, $.fn.combo.defaults,
$.fn.tree.defaults, {
panelWidth : 200,
panelHeight : 300,
editable : false
});
})(jQuery);
仔细阅读其代码可以明白,combo下面的控件均estends-from $.fn.combo.defaults
顺便提一句:
combo下面
-combobox
-combotree
-combogrid
所有combo或扩展自combo的控件都有的属性由panelHeight控制下拉列表框高度 ,
用户需要指定具体数值,页面上有很多列表框要指定高度,一一指定很麻烦,
想看看有没有自动调整高度根据内容。
打开jquery.easyui.min.js
看到类似以下代码 panelHeight:(t.attr("panelHeight")=="auto"?"auto":
看来有自动高度 panelHeight="auto" 即可
或者直接定义
$('#cc').combotree({
panelHeight:100,
panelHeight:100
});