easyui combotree --异步加载

来源:互联网 发布:ubuntu 中文界面 编辑:程序博客网 时间:2024/06/05 18:56

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

});


原创粉丝点击