easyui-tree 實現checkbox 單選
阿新 • • 發佈:2019-01-25
今天測試easyui-tree checkbox 的單選控制時發現,官方的tree屬性中沒有提供屬性控制checkbox單選,這一點與easyui-datagrid不同,在網上查了一下,發現都是用程式碼控制實現的,其最終實質是禁用checkbox的人為勾選,而採用tree的select事件來模擬,程式碼如下
$('#userTree').tree({
data: data,
checkbox: true,
onlyLeafCheck: true,
lines: true,
fit: true ,
onSelect: function (node) {
var checkedNode = $('#userTree').tree('getChecked');
if (checkedNode != null && checkedNode.length > 0) {
$.each(checkedNode, function (index, value) {
$('#userTree').tree('uncheck' , value.target);
})
}
if (node.checked) {
$('#userTree').tree('uncheck', node.target);
}
else {
$('#userTree').tree('check', node.target);
}
},
onLoadSuccess: function (node, data) {
//取消checkbox的預設行為
$(this).find('span.tree-checkbox').unbind().click(function () {
return false;
})
}
})
主要藉助onSelect和onLoadSuccess來控制,將checkbox轉為select
GOOD LUCK!!!