`
lemo
  • 浏览: 90877 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在下拉框中显示一个多选的树

阅读更多


主要代码如下:
//在日志中发送短信--------------------------------
			var calendar_department = new Ext.form.ComboBox({
			id : 'calendar_department',
				store : new Ext.data.SimpleStore({
							fields : [],
							data : [[]]
						}),
				editable : false,
				mode : 'local',
				triggerAction : 'all',
				maxHeight: 200, 
				name : 'departments',
				width : 340,
				tpl : "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",
				selectedClass : '',
				fieldLabel : '接收人',
				layerHeight : 120,
				onSelect : Ext.emptyFn
			});
			
			var tree = new Ext.tree.TreePanel({
						animate : true,
						border:false, 
						collapsible : true,
						enableDD : true,
						enableDrag : true,
						rootVisible : false,
						autoScroll : true,
						width : 150,
						lines : true
					
						 
					});
			// 根节点
			var root = new Ext.tree.AsyncTreeNode({
						id : "root",
						text : "根节点",
						draggable:false,  //不能拖动
						checked : false,
						loader: new Ext.tree.TreeLoader({   
			            	dataUrl:'../getUserList.do'  
			        	})
			        	
			        	
					});
			
			tree.setRootNode(root);
			
			tree.on('checkchange', function(node, checked){
			                    node.expand();
			                    node.attributes.checked = checked;
			                    node.eachChild(function(child){
			                        child.ui.toggleCheck(checked);
			                        child.attributes.checked = checked;
			                        child.fireEvent('checkchange', child, checked);
			                    });
			                },tree);
			
			
			tree.on('checkchange',function(){
					 var b = tree.getChecked();
			         var checkid = new Array;// 存放选中值的数组
			         for (var i = 0; i < b.length; i++) {
			         	checkid.push(b[i].text);// 添加选中值到数组
			         }
			        calendar_department.setValue(checkid.toString());
			}
			);
			
			calendar_department.on("expand", function() {
						tree.render("tree");
					});
					
		
		
		
			var calendarSMSForm = new Ext.FormPanel({
				id : 'calendarSMSForm_id',
				title : '',
				width : '100%',
				height : '320',
				layout : 'form',
				// autoHeight:'true',
				labelAlign : 'right',
				frame : true,

				labelWidth : 70,
				items : [
							calendar_department,{
							xtype : 'textarea',
							id : 'calendarSMSCustom_id',
							fieldLabel : '自定义号码',
							name : 'smsCustom',
							height : '90',
							width : '90%'

						}, {

							xtype : 'textarea',
							id : 'calendarSMScontent_id',
							fieldLabel : '信息内容',
							name : 'smscontent',
							height : '100',
							width : '90%',
							allowBlank : false,
							blankText : '信息内容必须填写'

						}, {
							buttons : [{
								text : '发送',
								handler : function() {
									calendarSMSWin.hide();
									var f = calendarSMSForm;

									if (f.form.isValid()) {
										f.form.doAction('submit', {

											// -----------
											url : '../SMSAction.do',
											method : 'post',
											params : '',
											success : function(form, action) {
												// TODO ---625
												Ext.Msg.alert('提示窗口',
														'正在发送中...!');
												// business_store.load();
											},
											failure : function(form, action) {
												win.show();
												var obj = Ext.util.JSON
														.decode(action.response.responseText);
												Ext.Msg.alert('提示窗口',
														obj.errors);
											}

										})
										
									}
								}
							}, {
								text : '取消',
								handler : function() {
									var f = calendarSMSForm;
									f.form.reset();
								}
							}]
						}]
			});
			
			
			   calendarSMSWin = new Ext.Window({ title: "短信息发送" , width: 500 , height:
			  330 , buttonAlign:'center', layout: 'fit', plain:true,
			  resizable:false, frame : true, closeAction:'hide',
			  bodyStyle:'padding:5px;', items : calendarSMSForm
			  
			  }); 



  • 大小: 9.9 KB
分享到:
评论

相关推荐

    结合ztree的下拉框树形结构数据多选,单选

    总的来说,"结合ztree的下拉框树形结构数据多选,单选"是一个涉及到前端开发中JavaScript交互设计、数据处理和用户界面优化的重要知识点。通过理解并熟练运用zTree这个工具,开发者能够创建出功能强大且用户体验良好...

    javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可).zip

    本资源提供了一个最佳的树形下拉框组件,它能够同时支持单选和多选功能,大大提升了用户体验。该组件基于JavaScript和jQuery技术,这两种技术都是现代Web开发的标准工具,JavaScript用于增加页面的交互性,而jQuery...

    Extjs下拉多选树

    6. **模板和渲染**:为了在下拉框中正确显示树节点,需要定义一个模板来决定每个节点如何被呈现。这通常涉及使用`tpl`配置项,或者创建一个自定义的CellRenderer。 7. **事件处理**:ExtJS提供丰富的事件系统,例如...

    zTree实现多选下拉框

    "zTree实现多选下拉框"这个主题聚焦于如何利用zTree这款JavaScript库来创建一个支持多选功能的下拉框控件。zTree是一款强大的树形插件,广泛应用于网页中展示层次结构数据,如组织结构、文件目录等。本文将详细介绍...

    树形下拉多选框

    2. **包含Checkbox的多选树形结构**:在每个节点前添加了复选框,用户可以通过勾选复选框来选择多个树节点,这在需要选取多个相关选项的场景中非常有用。 **标签解析:** - **ZTree**:ZTree的核心在于其强大的树形...

    C# COMBOX 树下拉,多选下拉等功能

    然而,有时我们可能需要更复杂的功能,比如一个可以展示树形结构并支持多选的下拉框。在本文中,我们将深入探讨如何在C#中实现这样的功能,主要关注COMBO BOX(ComboBox)与TREE(树形结构)的结合以及多选功能的...

    c#winform下拉多选自定义控件(带全选)

    在`CustomDropDownMultiSelect`类中,我们首先需要一个列表框(ListBox)来显示可选择的项目,以及一个复选框(CheckBox)来实现全选/全取消功能。我们可以将这两个控件作为私有成员变量添加到类中: ```csharp ...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    用户可以在下拉列表中看到一个树形结构,逐级展开节点,选择需要的项。这种组件特别适合于那些需要展示层级关系且允许用户多选或单选的情况,如部门组织结构、地区分类等。 2. **多选与单选支持** 在ExtJS 4.x的...

    layui+ztree下拉树,支持单选和多选

    `layui`和`ztree`这两个工具结合,可以实现一个功能强大的下拉树组件,支持单选和多选,大大提升了用户体验。本文将详细介绍如何利用`layui`和`ztree`来构建这样的组件,并探讨其关键技术和应用场景。 `layui`是一...

    extjs多选下拉框

    在给定的“extjs多选下拉框”主题中,我们将深入探讨如何在ExtJS中实现一个支持多选功能的下拉框。 首先,`MultiComboBox.js`文件很可能是实现这个功能的核心代码。在ExtJS中,ComboBox是提供下拉选择功能的基础...

    基于Layui, 下拉选择框的多选解决方案

    在Web应用开发中,Layui是一个非常流行的前端框架,它提供了一系列丰富的UI组件,使得开发者可以快速构建出美观且功能强大的网页应用。本话题主要关注的是如何在Layui中实现下拉选择框的多选功能。在实际项目中,...

    html分组多选单选下拉框.rar

    在HTML中,分组多选和单选下拉框是常见的表单元素,它们用于收集用户数据并提供多个选项供用户选择。这些功能通常通过`&lt;select&gt;`标签实现,配合`&lt;optgroup&gt;`进行分组,以及`&lt;option&gt;`定义可选的项目。下面将详细介绍...

    layui-多选下拉框-xm-select-demo源码

    尤其在构建多选下拉框时,layui的xm-select组件提供了一个优雅且实用的解决方案。本文将深入探讨“layui-多选下拉框-xm-select”这一组件,解析其源码,以帮助开发者更好地理解和应用。 首先,layui是一个全面的...

    JSP自定义标签(一)_树形下拉选择菜单

    树形结构的渲染通常在一个单独的JSP页面完成,比如`treeSelectorPage.jsp`。这个页面会接收来自标签的参数,如`id`和`actionUrl`,并使用这些信息来生成树形菜单的HTML结构。 #### 四、JavaScript脚本的作用 两个...

    layui扩展组件之树形下拉多选组件

    总结,layui treeselect组件是layui框架中一个强大的工具,通过将zTree的功能集成到layui中,使得开发者能够更加便捷地在前端实现树形结构的下拉多选功能,提高了用户体验和开发效率。正确理解和使用这个组件,能够...

    antd多选下拉框一行展示的实现方式

    我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,...这种方式存在的弊端是如果有2个选项,一个很短一个很长,那么只能看到很短的值,长值被隐藏,会剩余很大的空白。 2.flex布局

    flex4 下拉框可以多选 CheckBoxTreeComboBox

    `CheckBoxTreeComboBox`将这两种功能集成在一起,允许用户在下拉菜单中选择多个树形结构的节点,也就是实现多选功能。 要创建这样的组件,首先你需要继承`Tree`或`ComboBox`类,并添加`CheckBox`的逻辑。在Flex4中...

    支持树结构的下拉框

    在“支持树结构的下拉框”这个设计中,我们看到ComboBox的下拉部分被替换为一个TreeView,这意味着用户现在可以从一个多级结构中进行选择,这在处理分类或有层次的选项时非常有用。这种控件可能包含以下关键特性: ...

    extjs4 实现下拉树并支持复选

    在EXTJS4中,实现一个下拉树(Combobox Tree)并支持多选和复选功能,主要是通过自定义组件(Ext.define)来完成的。这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下...

Global site tag (gtag.js) - Google Analytics