前端之家收集整理的这篇文章主要介绍了
easyui tree带checkbox实现单选的简单实例,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<p style="text-align: left"><span style="background-color: #ccffcc">
实例如下:
<div class="jb51code">
<pre class="brush:xhtml;">
<ul id="regionTree">
Box: true,data: [{
"id": 1,"text": "My Documents","children": [{
"id": 11,"text": "Photos","state": "closed","children": [{
"id": 111,"text": "Friend"
},{
"id": 112,"text": "Wife"
},{
"id": 113,"text": "Company"
}]
},{
"id": 12,"text": "Program Files","children": [{
"id": 121,"text": "Intel"
},{
"id": 122,"text": "Java","attributes": {
"p1": "Custom Attribute1","p2": "Custom Attribute2"
}
},{
"id": 123,"text": "Microsoft Office"
},{
"id": 124,"text": "Games","checked": true
}]
},{
"id": 13,"text": "index.html"
},{
"id": 14,"text": "about.html"
},{
"id": 15,"text": "welcome.html"
}]
}],width: 160,height: 32,panelHeight: 400,onSelect: function (node) {
var cknodes = $('#regionTree').tree("getChecked");
for (var i = 0; i < cknodes.length; i++) {
if (cknodes[i].id != node.id) {
$('#regionTree').tree("uncheck",cknodes[i].target);
}
}
if (node.checked) {
$('#regionTree').tree('uncheck',node.target);
} else {
$('#regionTree').tree('check',node.target);
}
},onLoadSuccess: function (node,data) {
$(this).find('span.tree-check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>').unbind().click(function () {
$('#regionTree').tree('select',$(this).parent());
return false;
});
}
})</pre>