`
lemo
  • 浏览: 89207 次
  • 性别: 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制作的下拉框,数据多级显示,通过配置实现多选或单选,数据可以是固定数据或ajax动态加载

    zTree实现多选下拉框

    使用zTree实现的可以多选的下拉框控件Demo

    树形下拉多选框

    这是一个bootstrap风格的ztree下拉框组件 包含js和css文件 下拉框显示成单纯的树结构还是包含checkbox的多选树形结构是可选的

    支持树结构的下拉框

    此控件将TreeView作为ComboBox的下拉框显示,并且支持多选。

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

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

    extjs多选下拉框

    NULL 博文链接:https://zuyali.iteye.com/blog/1205478

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

    layui+ztree下拉树,支持单选和多选,简单封装方便实用

    基于Element的组件改造的树形选择器(树形下拉框)

    主要介绍了基于Element的组件改造的树形选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用。 对于没有层级的数据,我们可以使用...如上,当鼠标悬浮在树节点上时,出现竖着的三个小

    Vs.Net可多选Combobox,支持树形结构,模糊查询,全选 全部源代码

    绑定数据源DataTable,支持多选、支持树形显示,支持模糊查询功能,支持全选功能 环境:Vs2008 包含全部源代码,即实例演示。 仅提供学习,如用在商务请与本人联系

    combox 控件

    QUI树形下拉框对于宽度的处理方式是:默认会有一个宽度,当树结构过宽则内容层会增大宽度用于自适应里面的内容。 还可以为下拉框和内容层强制指定一个宽度。效果如下: 特点7:树形下拉框可编辑 为...

    Vue下拉框回显并默认选中随机问题

    今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 ...第一、加载的顺序,应该先加载下拉框要选择的数据,然后在通过编辑查询数据后回显。

    jQuery Easyui 下拉树组件combotree

    项目中做角色授权时,需要做一个下拉框带树结构的 并且可以多选的组件,就想到了easyui的combotree,有关这个组件的用法废话不多说,直接上代码 $('#bianhao').combotree({ url : urlg2 + '/tbdefaultroll/...

    通过BootStrap-select插件 js jQuery控制select属性变化

    bootstrap-select我想大家都不陌生是一个前端下拉框的插件非常好用,在select的标签中设置属性可以做很多功能控制,下面通过本文给大家详细介绍下

    dorado+springboot+mybatis行政区划包(不含map缓存)

    前端使用dorado实现表现层,后端使用的springboot+mybatis,数据库使用mysql或者...这个包实现了行政区划的基本增删查改页面、多选下拉框树,单选下拉框树的显示页面。和后端一部分service层提供的逻辑实现接口提供。

    jQuery LigerUI V1.1.0

    菜单条和是在菜单的基础上显示的一个类似Window菜单的一个插件,工具条是一些按钮的集合,可以自定义图片。 树 [增加]提供右击方法实现的接口 [优化]点击项就折叠/反折叠,而不是点击 + 才折叠 下拉框 ...

    基于 Vue3、Vite、Ant-Design-Vue大数据开发案例

    表单新增各种便捷属性和表单组件,下拉框和树选择支持标签名回显 表单组件,改进折叠表单 Action 的算法,智能化布局 表格组件,Action 更多,支持横向显示操作,更方便 表格组件,子表编辑改进,表格列排序和重置...

    多功能在线考试系统改进版源码(毕业设计c#)

    前不久我下载了一个,有简答题,但奇怪的是后台没有那个评阅试卷,直接在前台自动评卷的,这就有问题了,因为如果是填空题的话,就可以比较用户输入的几个字是否和数据库中的答案相同,但简答题的回答一般都有几十个...

    ExtJS4中文教程2 开发笔记 chm

    在Extjs4应用中使用Ext.Loader ======================================= 11条jquery常用技巧和方法整理列表 8个超棒的学习jQuery的网站 JQuery 1.5 getJSON 的使用 JQuery AJAX提交中文乱码的解决方案 Jquery css...

Global site tag (gtag.js) - Google Analytics