<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
var comboWithTooltip = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false, //禁止手写及联想功能
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: '<div id="tree" style="height:200px"></div>', //html代码
selectedClass:'',
onSelect:Ext.emptyFn,
emptyText:'请选择...',
renderTo: 'comboxtree'
});
//创建树形结构
var tree = new Ext.tree.TreePanel({
border:false,
autoScroll:true,
animate:true,
autoWidth:true,
autoHeight:true,
enableDD:true,
containerScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl:'treedata.php'
})
});
//树的点击时间
tree.on("click",function(node,e)
{
if(node.isLeaf()){
e.stopEvent();//非叶子节点则不触发
}
comboWithTooltip.setValue(node.text);//设置option值
comboWithTooltip.collapse();//隐藏option列表
alert(comboWithTooltip.getValue());//打印option值
});
var root = new Ext.tree.AsyncTreeNode({
text: '根节点', //节点名称
draggable:false, //是否支持拖动
id:'0101103' //节点id
});
tree.setRootNode(root);
//展开option时生成树
comboWithTooltip.on('expand',function(){
tree.render('tree');
//tree.expandAll();//自动展开树
});
});
</script>
<div id="comboxtree"></div>
</body>
</html>
分享到:
相关推荐
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
bootstrap树控件使用树形控件在下拉框select中显示,实现树形下拉框
layui组件之树形下拉框例子,看完你就会写下拉树了。不过同时还需要下载ztree的相关js和style 不过压缩包里都有呢!希望对大家有所帮助
下载之前请看好,不是所有都适用,只是树形下拉框的风格比较贴近bootstrap <link rel="stylesheet" type="text/css" href="easyUI/css/easyui.css"> <link rel="stylesheet" type="text/css" href="easyUI/...
TreeCombo,Ext TreeCombo 树形 下拉框,树形下拉框
树形下拉框.net 通过树形下拉框来显示部门或者岗位的层级关系.
树形下拉框样式
<!...<... <head> <title>Bootstrap Tree View<...link href="css/bootstrap.min.css" rel="stylesheet">...link href="css/bootstrap-treeview.css" rel="stylesheet">...input type="text" id="depName...
为庆祝QUI框架V2.1.5版本正式发布,这次给大家介绍一款非常好用的树形下拉框组件:QUI树形下拉框
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
NULL 博文链接:https://qing-gee.iteye.com/blog/2151860
jquery_ztree树形下拉框.rar
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可).zip
完善的树形下拉框功能,根据自定义层级规则展开,可以直接嵌入项目,还附带两个漂亮的登录界面; 更多介绍:https://blog.csdn.net/weixin_43151418/article/details/124689160
flex复选树形下拉框,在ReportListPage.mxml里面有应用及树数据的加载