关于layui Tree控制只能单选的需求,附带解决展开节点时三角号无法正确切换的问题。
话不多说 直接上demo!
注意:代码中的 _.xx方法 使用的lodash.js 的函数
.transform-r90:after {
transform: rotate(90deg);
}
var status = true;
tree.render({
elem: '#test1'
, showCheckbox: true
, showLine: false //连接线
, id: 'zhxxTree'
, data: data1
, click: function (obj) { //点击回调
console.log(obj);
var _isI = $(obj.elem).find('i')[0];
if (obj.state === 'open') {
$(_isI).addClass('transform-r90');
} else {
$(_isI).removeClass('transform-r90');
}
}
, oncheck: function (obj) { //复选框回调
//确保勾选的是唯一的
// var zhxxTreeArr = tree.getChecked('zhxxTree');
// for (var i = 0; i < zhxxTreeArr.length; i++) {
// status = i >= 1 ? false : true;
// if (status) {
// for (var j = 0; j < zhxxTreeArr[i].children.length; j++) {
// status = j >= 1 ? false : true;
// }
// }
// }
//当status为真即只勾选了一个的时候
// if (status) {
// var val = obj.data; //得到当前点击的节点数据
// database_name = val.database_name;
// console.log(val.database_name);
// } else {
// layui.layer.msg('只可选择一种', {'time': 1000});
// }
var data = obj.data; //得到当前点击的节点数据
var state = obj.checked;
var name = data.database_name; //勾选单个节点
var childrenData = data.children; //勾选父节点
if (state) {
if (!childrenData) {
//防止多次添加图层
for (var i = 0; i < databaseNameArr.length; i++) {
if (databaseNameArr[i] === name) {
return false;
}
}
databaseNameArr.push(name);
} else {
for (var j = 0; j < childrenData.length; j++) {
var childrenName = childrenData[j].database_name;
//防止多次添加图层
for (var i = 0; i < databaseNameArr.length; i++) {
if (databaseNameArr[i] === childrenName) {
return false;
}
}
databaseNameArr.push(childrenName);
}
}
} else {
if (!childrenData) {
//删除符合要求的值,并返回为真值的所有元素
_.remove(databaseNameArr, function (n) {
return n === name;
})
} else {
for (var j = 0; j < childrenData.length; j++) {
var childrenName = childrenData[j].database_name;
//删除符合要求的值,并返回为真值的所有元素
_.remove(databaseNameArr, function (n) {
return n === childrenName;
})
}
}
}
// console.log(databaseNameArr);
// console.log(obj.data); //得到当前点击的节点数据
// console.log(obj.checked); //得到当前节点的展开状态:open、close、normal
// console.log(obj.elem); //得到当前节点元素
}
});