您的位置：首页 > 其它

dojo CheckBox问题解析

2016-05-07 14:57 218 查看

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, "onClick", window, "selectAll");
});

});

function selectAll(event) {
var selectAllCheckBox = dijit.byId("selectAll");
var checked = selectAllCheckBox.get("checked");
var widgets = dijit.findWidgets(document.getElementById("sportsDiv"));
dojo.forEach(widgets, function(checkbox, 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 dijit CheckBox label 全选

相关文章推荐

新的分享

章节导航