dojo CheckBox问题解析

dojo版本：1.6

在使用dojo的dijit.form.CheckBox组件过程中发现了如下两个问题：

一、是无法方便地指定其label，虽然CheckBox组件有一个label属性，

但是设置了并不能达到想要的效果，label依然不显示，因为根本就没有为checkBox 添加<label>标签。如下：

<input type="checkBox" dojoType="dijit.form.CheckBox" checked="true" label="足球">

产生的checkBox却无标签

我的解决办法是扩展CheckBox组件，创建CheckBox组件后自动添加<label>标签，代码如下：

dojo.provide("my.widget.CheckBox");

dojo.require("dijit.form.CheckBox");
dojo.declare("my.widget.CheckBox",dijit.form.CheckBox,{
	
	startup : function() {
		this.inherited(arguments);
		// 使用jQuery
		//var html = '<label for="' +this.id+ '" style="display:inline;float: none;padding-right:0;">' +this.labelText+ '</label>';
		//$(this.domNode).after(html);
		
		// 直接使用JS
		var label = document.createElement("label");
		label.setAttribute("for",this.id);
		label.innerText = this.labelText;
		// 覆盖dojo默认label样式
		label.style.display = "inline";
		label.style.float = "none";
		label.style.paddingRight = "0";
		
		this.insertAfter(label,this.domNode);
	},insertAfter : function (newElement,targetElement) {
   		var parent = targetElement.parentNode;
   		if (parent.lastChild == targetElement ) {
        	// 如果最后的节点是目标元素，则直接添加。因为默认是最后
        	parent.appendChild(newElement );
   		} else {
        	//如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面
        	parent.insertBefore( newElement,targetElement.nextSibling );
   		}
	},labelText : ""
});

二、在做全选功能时，发现CheckBox事件循环传递，导致达不到预期效果，解决办法如下：

<script type="text/javascript">
	dojo.require("my.widget.CheckBox");
	
	dojo.addOnLoad(function(){
		var selectAllCheckBox = dijit.byId("selectAll");
		// 为全选CheckBox注册onClick事件，当然onChange也可以
		var handle = dojo.connect(selectAllCheckBox,"onClick",window,"selectAll");
		var widgets = dijit.findWidgets(document.getElementById("sportsDiv"));
		
		dojo.forEach(widgets,function(checkBox,index){
			dojo.connect(checkBox,"onChange",function(checked){
				console.log(checkBox.get("id") + ":" + checked);
				if(!checked) {
					dojo.disconnect(handle);
					// 设置checked属性时，会触发全选CheckBox的onClick事件，所以在此之前须先断开
					// 否则事件会循环触发
					selectAllCheckBox.set("checked",false);
				} else {
					var hasUnchecked = false;
					for(var i=0; i<widgets.length; i++) {
						console.log(widgets[i].get("checked"));
						if(!widgets[i].get("checked")) {
							hasUnchecked = true;
						}
					}
					if(!hasUnchecked) {
						// 设置checked属性时，会触发全选CheckBox的onClick事件，所以在此之前须先断开
						// 否则事件会循环触发
						dojo.disconnect(handle);
						selectAllCheckBox.set("checked",true);
					}
				}
			});
			// 最后，为全选CheckBox重新注册onClick事件监听
			handle = dojo.connect(selectAllCheckBox,"selectAll");
		});
		
	});
	
	function selectAll(event) {
		var selectAllCheckBox = dijit.byId("selectAll");
		var checked = selectAllCheckBox.get("checked");
		var widgets = dijit.findWidgets(document.getElementById("sportsDiv"));
		dojo.forEach(widgets,index){
			checkBox.set("checked",checked);
		});
	}
</script>
</head>
<body class="claro">
	<form action="" id="reg_form">
		<div class="grouping">
			<div>
				<input type="checkBox" dojoType="my.widget.CheckBox" name="select-all" id="selectAll" labelText="全选">
			</div>
			<div id="sportsDiv">
				<div>
					<input type="checkBox" dojoType="my.widget.CheckBox" name="sports" value="football" id="football" labelText="足球">
					<input type="checkBox" dojoType="my.widget.CheckBox" name="sports" value="basketball" id="basketball" labelText="篮球">
				</div>
			</div>
		</div>
	</form>
</body>

dojo CheckBox问题解析

猜你在找的Dojo相关文章