Tree组件: 点击父节点添加子节点自定义名称、自动展开并开启子节点名称编辑

分享 未结 0 172
mecono
mecono 2019-11-8
悬赏:20飞吻


拷贝代码在Demo中运行。。。
https://www.layui.com/demo/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->

<style>
body {
width: 100%;
min-height: 100%;
background-color: #ffffff;
}

.layui-bg-black {
background-color: #ffffff !important;
}

.layui-body {
background-color: #f6f6f6 !important;
}

.layui-tree-entry {
padding: 10px 15px 10px 15px !important;
background-color: #EFEFF5;
border-bottom: 1px solid #fff !important;
}

.layui-tree-entry:hover {
background-color: #D8D8F0 !important;
}

.layui-tree-pack {
padding-left: 0;
background-color: #EFEFF5 !important;
}

.layui-tree-txt {

font-size: 14px !important;
}

.tree-icon-open:after {
transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
/* Internet Explorer */
-moz-transform: rotate(90deg) !important;
/* Firefox */
-webkit-transform: rotate(90deg) !important;
/* Safari 和 Chrome */
-o-transform: rotate(90deg) !important;
/* Opera */
}

.layui-tree-iconArrow:after {
border-color: transparent transparent transparent #43456F;

}

/*tree 增 删 改 按钮颜色 */
.layui-bg-black, .layui-bg-blue, .layui-bg-cyan, .layui-bg-green, .layui-bg-orange, .layui-bg-red {
color: #43456F !important;
}
</style>
</head>
<body>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<div id="index_div_tree" class="demo-tree"></div>
</div>
</div>


<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

<script>
layui.use(['tree', 'util'], function () {
var tree = layui.tree
tree.render({
elem: '#index_div_tree'
, data: [{
title: '优秀'
, children: [{
title: '80 ~ 90'
}, {
title: '90 ~ 100'
}]
}, {
title: '良好'
, children: [{
title: '70 ~ 80'
}, {
title: '60 ~ 70'
}]
}, {
title: '要努力奥'
, children: [{
title: '0 ~ 60'
}]
}]
, edit: ['add', 'update', 'del']
, showLine: false//是否开启连接线
, accordion: true//项目单选
, operate: function (obj) {
var type = obj.type; //得到操作类型:add、edit、del
var data = obj.data; //得到当前节点的数据
var elem = obj.elem; //得到当前节点元素


//Ajax 操作
var id = data.id; //得到节点索引
if (type === 'add') { //增加节点
var className = elem.attr('class');
if (className.indexOf('layui-tree-spread') >= 0) {
//已展开
} else {
//未展开 模拟点击展开
elem.find('.layui-tree-main:first').find('.layui-tree-txt').click();
}

//这个ID不要重复
var number = Math.ceil(Math.random() * 100);

setTimeout(function () {
//找到子类下最后一个新增的未命名节点
var find = elem.find('.layui-tree-pack.layui-tree-lineExtend')
//这里的ID ,是下面的定义的ID
.find('[data-id=' + number + ']');
find.find('.layui-tree-txt').text("你的自定义名称");
find.find('[data-type="update"]').click();
}, 100);
//返回 key 值
return number;
} else if (type === 'update') { //修改节点

var html = elem.find('.layui-tree-txt').html();//得到修改后的内容
layui.layer.open({
title: '这里就是ajax入库'
, content: html
});

} else if (type === 'del') { //删除节点
}


}
, click: function (obj) {
var ELEM_ENTRY = '.layui-tree-entry';
var ICON_ARROW = '.layui-tree-iconArrow';
var pClass = obj.elem.parent().attr('class');

var CHILD_CLASS = 'layui-tree-pack layui-tree-lineExtend';
var CHILD_CLASS_END = 'layui-tree-pack layui-tree-lineExtend layui-tree-showLine';
if (pClass == CHILD_CLASS || pClass == CHILD_CLASS_END) {
//点击的子节点
obj.elem.parent().parent().find(ELEM_ENTRY).css('background-color', '#EFEFF5');
obj.elem.find(ELEM_ENTRY).eq(0).css('background-color', '#D8D8F0');
} else {
//父节点
//背景颜色
obj.elem.siblings().find(ELEM_ENTRY).css('background-color', '#EFEFF5');
obj.elem.children().find(ELEM_ENTRY).css('background-color', '#EFEFF5');
obj.elem.find(ELEM_ENTRY).eq(0).css('background-color', '#D8D8F0');

if (obj.state == 'open') {
//开启
obj.elem.siblings().find(ICON_ARROW).removeClass('tree-icon-open');
obj.elem.find(ICON_ARROW).eq(0).addClass('tree-icon-open');

} else {
//关闭
obj.elem.find(ICON_ARROW).eq(0).removeClass('tree-icon-open');

}

}

}


});
});
</script>

</body>
</html>
回帖
  • 消灭零回复