`
zhsq_java
  • 浏览: 61636 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

带树的下拉框

    博客分类:
  • ext
阅读更多
项目中用到的一个带树的下拉框
		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');
		});

1
1
分享到:
评论

相关推荐

    bootstrap树形下拉框 下拉框树形菜单

    在本场景中,我们将探讨如何利用`bootstrap-treeview.js`创建一个带有树形结构的下拉菜单。 首先,你需要确保已经包含了Bootstrap的基本样式和JavaScript库,这通常包括`bootstrap.css`和`bootstrap.js`。这些文件...

    layui组件之树形下拉框

    "layui组件之树形下拉框"是Layui框架中的一个重要组件,用于在下拉菜单中展示层级结构的数据,常用于选择组织结构、地区分类等具有树状关系的场景。 ### layui组件简介 Layui是一个轻量级的前端框架,它包含了基础...

    bootstrap树形下拉框 下拉框树形菜单(修改版)

    在Bootstrap中,下拉框(Dropdown)是一种常见的交互元素,而"bootstrap树形下拉框 下拉框树形菜单(修改版)"则是将传统的下拉菜单与树形结构相结合,以提供更复杂的选项选择体验。 在Web开发中,有时我们需要在一...

    bootstrap树形下拉框 下拉框树形菜单(花了一小时修改过的)

    这个组件是基于流行的前端框架Bootstrap和JavaScript库构建的,使得在网页设计中实现树形下拉框变得简单高效。 在Bootstrap中,树形下拉框主要依赖于`bootstrap-treeview.js`这个JavaScript插件,它扩展了Bootstrap...

    c# 带树形显示的下拉框

    在这种情况下,“带树形显示的下拉框”是一种很好的解决方案,它将传统的下拉框与树形视图的功能相结合,允许用户以更直观的方式浏览和选择数据。下面我们将深入探讨这个主题。 1. **控件设计** - **自定义控件**...

    bootstrap select树形下拉框

    这会将普通的`&lt;select&gt;`转换为带有Bootstrap样式的下拉框。 3. **树形插件集成**:要启用树形结构,需要额外引入一个处理树形结构的库,如`jquery.treeview.js`。然后,使用该库的方法(如`$("#treeSelect")....

    树形下拉框样式

    在IT领域,"树形下拉框样式"是一种常见的用户界面元素,主要用于数据组织和导航。它结合了传统的下拉框功能与树形结构,使得用户可以方便地浏览和选择层级关系的数据。这种设计通常应用于文件系统、组织结构或者分类...

    下拉框实现树结构带禁用.vue

    下拉框实现树结构带禁用.vue

    为dwz扩展树形下拉框

    标题“为dwz扩展树形下拉框”指的是在DWZ(Dynamic Web Zone)框架中对树形下拉框功能的扩展。DWZ是一个基于jQuery的前端开发框架,主要用于构建富交互式的Web应用。这个扩展可能涉及到在原有的DWZ组件基础上增加或...

    部门或人员下拉框树形

    "部门或人员下拉框树形"是一种常见的UI元素,它将传统的下拉框与树形结构相结合,以提供更直观、高效的筛选和选择体验。这个设计尤其适用于组织结构复杂、部门或人员众多的企业系统,用户可以通过展开和折叠节点来...

    适用于bootstrap风格的easyUI树形下拉框

    下载之前请看好,不是所有都适用,只是树形下拉框的风格比较贴近bootstrap &lt;link rel="stylesheet" type="text/css" href="easyUI/css/easyui.css"&gt; &lt;link rel="stylesheet" type="text/css" href="easyUI/...

    C#编写的一个带树型结构的下拉框控件

    在传统的下拉框(ComboBox)中,用户只能看到一个单一的列表,而“带树型结构的下拉框控件”则允许用户在展开控件时看到一个层次结构,这特别适用于表示具有分层关系的数据,如组织结构、文件系统或者分类目录。...

    下拉框树控件(下拉框和树结合)

    下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)下拉框树控件(下拉框和树结合)(下拉框和树结合)

    在下拉框里面绑定树形显示

    在下拉框里面绑定树形显示 1、递归绑定 2、树形显示下拉框列表

    TreeCombo,Ext TreeCombo 树形 下拉框,树形下拉框

    TreeCombo是Ext JS库中的一个组件,它结合了树形结构和下拉框的功能,为用户提供了一种在有限空间内展示复杂数据结构的选择方式。在Web应用开发中,这种组件非常实用,尤其当用户需要从层次化的选项中进行选择时。 ...

    树形下拉框.net

    根据给定的信息,“树形下拉框.NET”主要涉及如何在.NET框架中通过树形下拉框(Tree Dropdown)来展示组织结构中的部门或岗位层级关系。下面将详细阐述这一技术实现过程及其背后的关键概念。 ### 一、树形下拉框的...

    JS实现下拉框树形

    在网页开发中,"JS实现下拉框树形"是一种常见的交互设计,它结合了下拉框和树形结构的特点,使得用户可以在一个下拉菜单中以层级方式浏览和选择数据。这种技术常用于需要展示多级分类或者层级关系的场景,如地区选择...

Global site tag (gtag.js) - Google Analytics