layui的树形组件来实现针对无限级分类的添加功能

提问 已结 7 113
学者cxl
学者cxl 2019-11-8
悬赏:20飞吻
版本:layui 浏览器:
这个树形组件一般需求能满足,但是针对节点的添加修改操作相关的demo和参数确实比较少,有没有什么办法可以自定义这两个操作的事件呢?
就是比如说 我点击add操作的按钮,不是给直接在下面加一个“未命名”的分支。
而是弹出一个分支名称编辑的输入框给用户编辑并提交给服务端去执行插入操作,再由服务端返回执行结果给事件来根据提示展示添加成功还是失败后的树形图。这个目前插件可以实现吗?
回帖
  • mecono
    2019-11-8
    @学者cxl

    <!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();
    }

    setTimeout(function () {
    //找到子类下最后一个新增的未命名节点
    var find = elem.find('.layui-tree-pack.layui-tree-lineExtend.layui-tree-showLine')
    //这里的ID ,是下面的定义的ID
    .find('[data-id="123"]');
    find.find('.layui-tree-txt').text("你的自定义名称");
    find.find('[data-type="update"]').click();
    }, 100);
    //返回 key 值
    return 123;
    } 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');
    console.log(pClass);
    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>
    1 回复
  • mecono
    2019-11-8
    目前可以做到是:
    1.先添加子节点显示
    2.再请求服务器插入
    3.如果服务器返回插入失败,可以删除添加到子节点

    >>> https://fly.layui.com/jie/59656/

    1 回复
  • 学者cxl
    2019-11-8
    大佬们?现有框架可以实现吗?
    0 回复
  • 学者cxl
    2019-11-8
    @mecono 感谢大佬给出回复,这个demo打不开,处于审核阶段。
    0 回复
  • 学者cxl
    2019-11-8
    @mecono 感谢大佬!
    0 回复
  • 学者cxl
    2019-11-8
    @mecono 大佬,这个能满足我的需求,只是这段代码还有一个小BUG,如果选择add操作的本身就是最底部的分支往下加的话不会跳转到这个分支下面去新增的节点进行update操作。
    0 回复
  • mecono
    2019-11-8
    @学者cxl

    已解决:
    1. 节点都ID ,不能重复
    2.查找手动增时 删除`.layui-tree-showLine`
     //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')//删除 .layui-tree-showLine
    //这里的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') { //修改节点
    0 回复