Dojo 1.8 ComboBox

最新推荐文章于 2016-05-11 16:53:50 发布

haibinzhang

最新推荐文章于 2016-05-11 16:53:50 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Dojo 文章标签： dojo function stylesheet button list class

本文链接：https://blog.youkuaiyun.com/haibinzhang/article/details/7973308

Dojo 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Dojo库创建ComboBox，并演示如何添加、更新及删除选项。通过具体代码实例展示了编程方式创建ComboBox的方法，以及如何向ComboBox添加新的选项、清空所有选项和用新的选项替换旧选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要谈了ComboBox四个方面的内容，下面均用到了 dojo store（dojo store会逐步代替dojo data，这是dojo发展趋势）：

1. 编程方式创建 ComboBox

2. 向现有ComboBox中添加新的options

3. 两种方式清空 ComboBox 的所有options

4. 用新的options代替旧的 ComboBox options

代码如下：

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Dojo: ComboBox</title>

		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" media="screen">
	</head>
	<body class="claro">
		<h1>Dojo: ComboBox</h1>
		<p>Show How to Create, Empty and Update ComboBox Programmatically</p>
		
		<div id="comboBoxNode"></div>
		<br /> 
		<br />
		<div id="appendButtonNode"></div>
		<br />
		<div id="deleteButtonNode"></div>
		<br />
		<div id="updateButtonNode"></div>
		
		<!-- load dojo and provide config via data attribute -->
		<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
		<script>
			
			// Require all dependencies
			require([
					"dojo/store/Memory",
					"dijit/form/ComboBox",
					"dijit/form/Button",
					"dijit/registry",
					"dojo/_base/array",
					"dojo/domReady!"
					], function(Memory, ComboBox, Button, registry, baseArray) {
						// set up data
						var states = [
							{ abbr:'ec', name:'Ecuador',           capital:'Quito' },
							{ abbr:'eg', name:'Egypt',             capital:'Cairo' },
							{ abbr:'sv', name:'El Salvador',       capital:'San Salvador' },
							{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },
							{ abbr:'er', name:'Eritrea',           capital:'Asmara' },
							{ abbr:'ee', name:'Estonia',           capital:'Tallinn' },
							{ abbr:'et', name:'Ethiopia',          capital:'Addis Ababa' }
						];
						
						var stateStore = new Memory({data: states, idProperty: "name"});
					
						// create ComboBox with stateStore
						var comboBox = new ComboBox({
							id: 'comboBoxId',
							name: 'comboBox',
							// value: 'Ecuador',
							store: stateStore,
							searchAttr: 'name',
							required: true,
							style: 'width: 200px',
							placeHolder: 'Select a State',
							onChange: function() {
								var combobox = registry.byId('comboBoxId');
								console.log('ComboBox value: ' + combobox.get('value'));
								console.log('ComboBox id: ' + combobox.get('id'));
								
								// console.log('ComboBox->domNode.innerHTML: ' + combobox.domNode.innerHTML);
									
								if(combobox.item) {
									console.log('item abbr: ' + combobox.item.abbr);
									console.log('item name: ' + combobox.item.name);
									console.log('item capital: ' + combobox.item.capital);
								}
							}
						}, 'comboBoxNode');

						comboBox.startup();
						
						var appendButton = new Button({
							id: 'appendButtonId',
							label: 'Append new options to ComboBox',
							onClick: function() {
								console.log('To append new options to ComboBox');
								appendOptions();
							}
						}, 'appendButtonNode');
						
						appendButton.startup();
						
						var deleteButton = new Button({
							id: 'deleteButtonId',
							label: 'Delete all options',
							onClick: function() {
								console.log('To delete all ComboBox options');
								// deleteOptions_1();
								deleteOptions_2();
							}
						}, 'deleteButtonNode');
						
						deleteButton.startup();
						
						var updateButton = new Button({
							id: 'updateButtonId',
							label: 'Update all ComboBox options',
							onClick: function() {
								console.log('To update all ComboBox options');
								updateAllOptions();
							}
						}, 'updateButtonNode');
						
						updateButton.startup();
						
						var appendOptions = function() {
							var data = [
								{ abbr:'af', name:'Afghanistan',       capital:'Kabul' },
								{ abbr:'al', name:'Albania',           capital:'Tiran' },
								{ abbr:'dz', name:'Algeria',       	   capital:'Algiers' },
								{ abbr:'as', name:'American Samoa',    capital:'Pago Pago' },
								{ abbr:'ad', name:'Andorra',           capital:'Andorra' },
								{ abbr:'ao', name:'Angola',            capital:'Luanda' },
								{ abbr:'ai', name:'Anguilla',          capital:'The Valley' }
							];
							var combobox = registry.byId('comboBoxId');
							var store = combobox.get('store');
							
							baseArray.forEach(data, function(item) {
								if (typeof store.get(item.name) === 'undefined') {
									store.add(item);
								}
								else {
									console.log(item.name + ' has existed');
								}
							});
							
							combobox.set('required', true);
							combobox.set('placeHolder', 'Select a State');
							
							combobox.reset();
						};
						
						// two ways to delete all options of ComboBox
						var deleteOptions_1 = function() {
						
							var combobox = registry.byId('comboBoxId');
							combobox.set('required', false);
							combobox.set('placeHolder', '');
							
							// set new empty store
							var emptyStore = new Memory({data: [], idProperty: "name"});
							combobox.set('store', emptyStore);
							
							combobox.reset();
							registry.byId('appendButtonId').set('disabled', false);
						};
						
						var deleteOptions_2 = function() {
							var combobox = registry.byId('comboBoxId');
							
							combobox.set('required', false);
							combobox.set('placeHolder', '');
							
							var store = combobox.get('store');
							store.query({}, {
								sort:[{attribute: 'name', descending: false}],
							}).map(function(item) {
								return item.name
							}).forEach(function(name) {
								console.log('remove ' + name);
								store.remove(name);
							});
											
							combobox.reset();
							registry.byId('appendButtonId').set('disabled', false);
						};
					
						// update ComboBox with new options
						var updateAllOptions = function() {
						
							// prepare new options
							var color_list = [ 'red', 'yellow', 'blue', 'green', 'white', 'black', 'brown' ];
							
							var options = new Memory({data: [], idProperty: 'name'});
							baseArray.forEach(color_list, function(item, index) {
								options.put( { name: item, id: index } );
							});

							var combobox = registry.byId('comboBoxId');
							combobox.set('required', true);
							combobox.set('placeHolder', 'Select a Color');
							combobox.set('store', options);
							
							combobox.reset();
							
							registry.byId('appendButtonId').set('disabled', true);
						};
			});
			
		</script>
	</body>
</html>