项目中用到的一个带树的下拉框
var unitCB = new Ext.form.ComboBox({// 所属单位选择框
fieldLabel : '所属单位',
resizable : true,
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : false,
valueField : 'id',
displayField : 'text',
value : ' ',
maxHeight : 390,
// labelStyle : micolor,
anchor : '84%',
mode : 'local',
triggerAction : 'all',
allowBlank : false,
onSelect : Ext.emptyFn(),
emptyText : '请选择所属单位'
});
add_unitCB.tpl = '<tpl for="."><div id="' + unitCB.getId()
+ 'orgTpl" style="height:390px;width:100"><div id="'
+ unitCB.getId() + 'orgTreeDiv"></div></div></tpl>';
var orgTreeloader = new Ext.tree.TreeLoader({
url : '/stm/system/org.do?method=findOrgTree'
});
orgTreeloader.on('beforeload', function(orgTreeloader, node) {
this.baseParams.id = node.attributes.id; // set parameter
});
var orgTreeRoot = new Ext.tree.AsyncTreeNode({
id : '00',
text : '根节点'
});
var orgTree = new Ext.tree.TreePanel({
width : 210,
autoScroll : true,
containerScroll : true,
collapsible : true,
loader : orgTreeloader,
root : orgTreeRoot,
animate : false,
border : false,
rootVisible : true,
border : false
});
var org_id; // 存储所属单位的ID
// 监听下拉树的节点单击事件
orgTree.on('click', function(node) {
org_id = node.attributes.id;
unitCB.setValue(node.text);
unitCB.collapse();
});
// 默认选择总公司
unitCB.on('render', function() {
org_id = '00';
unitCB.setValue('根节点');
});
// 监听下拉框的下拉展开事件 下拉框中加入树
unitCB.on('expand', function() {
// 将UI树挂到treeDiv容器
orgTree.root.reload(); // 每次下拉都会加载数据
// orgTree.root.expand(); //只是第一次下拉会加载数据
orgTree.render(unitCB.getId() + 'orgTreeDiv');
});
分享到:
相关推荐
在本场景中,我们将探讨如何利用`bootstrap-treeview.js`创建一个带有树形结构的下拉菜单。 首先,你需要确保已经包含了Bootstrap的基本样式和JavaScript库,这通常包括`bootstrap.css`和`bootstrap.js`。这些文件...
"layui组件之树形下拉框"是Layui框架中的一个重要组件,用于在下拉菜单中展示层级结构的数据,常用于选择组织结构、地区分类等具有树状关系的场景。 ### layui组件简介 Layui是一个轻量级的前端框架,它包含了基础...
在Bootstrap中,下拉框(Dropdown)是一种常见的交互元素,而"bootstrap树形下拉框 下拉框树形菜单(修改版)"则是将传统的下拉菜单与树形结构相结合,以提供更复杂的选项选择体验。 在Web开发中,有时我们需要在一...
这个组件是基于流行的前端框架Bootstrap和JavaScript库构建的,使得在网页设计中实现树形下拉框变得简单高效。 在Bootstrap中,树形下拉框主要依赖于`bootstrap-treeview.js`这个JavaScript插件,它扩展了Bootstrap...
在这种情况下,“带树形显示的下拉框”是一种很好的解决方案,它将传统的下拉框与树形视图的功能相结合,允许用户以更直观的方式浏览和选择数据。下面我们将深入探讨这个主题。 1. **控件设计** - **自定义控件**...
这会将普通的`<select>`转换为带有Bootstrap样式的下拉框。 3. **树形插件集成**:要启用树形结构,需要额外引入一个处理树形结构的库,如`jquery.treeview.js`。然后,使用该库的方法(如`$("#treeSelect")....
在IT领域,"树形下拉框样式"是一种常见的用户界面元素,主要用于数据组织和导航。它结合了传统的下拉框功能与树形结构,使得用户可以方便地浏览和选择层级关系的数据。这种设计通常应用于文件系统、组织结构或者分类...
下拉框实现树结构带禁用.vue
标题“为dwz扩展树形下拉框”指的是在DWZ(Dynamic Web Zone)框架中对树形下拉框功能的扩展。DWZ是一个基于jQuery的前端开发框架,主要用于构建富交互式的Web应用。这个扩展可能涉及到在原有的DWZ组件基础上增加或...
"部门或人员下拉框树形"是一种常见的UI元素,它将传统的下拉框与树形结构相结合,以提供更直观、高效的筛选和选择体验。这个设计尤其适用于组织结构复杂、部门或人员众多的企业系统,用户可以通过展开和折叠节点来...
下载之前请看好,不是所有都适用,只是树形下拉框的风格比较贴近bootstrap <link rel="stylesheet" type="text/css" href="easyUI/css/easyui.css"> <link rel="stylesheet" type="text/css" href="easyUI/...
在传统的下拉框(ComboBox)中,用户只能看到一个单一的列表,而“带树型结构的下拉框控件”则允许用户在展开控件时看到一个层次结构,这特别适用于表示具有分层关系的数据,如组织结构、文件系统或者分类目录。...
下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)(下拉框和树结合)
在下拉框里面绑定树形显示 1、递归绑定 2、树形显示下拉框列表
TreeCombo是Ext JS库中的一个组件,它结合了树形结构和下拉框的功能,为用户提供了一种在有限空间内展示复杂数据结构的选择方式。在Web应用开发中,这种组件非常实用,尤其当用户需要从层次化的选项中进行选择时。 ...
根据给定的信息,“树形下拉框.NET”主要涉及如何在.NET框架中通过树形下拉框(Tree Dropdown)来展示组织结构中的部门或岗位层级关系。下面将详细阐述这一技术实现过程及其背后的关键概念。 ### 一、树形下拉框的...
在网页开发中,"JS实现下拉框树形"是一种常见的交互设计,它结合了下拉框和树形结构的特点,使得用户可以在一个下拉菜单中以层级方式浏览和选择数据。这种技术常用于需要展示多级分类或者层级关系的场景,如地区选择...