左侧树

liuyg

2021-06-05 04af7d3eb75ce3f3f6be3ce84c46af57bae8ab7b

左侧树

 widgets/LeftNavigationBar/Widget.html

@@ -5,7 +5,7 @@
    <div class="left-navigation-bar-main">
        <!-- <ul id="treeDemo" class="ztree"></ul> -->
        <div class="l-n-b-m-search">
            <input id="left-navigation-bar-main-input" type="search" value="河流" placeholder="请输入图层名称" />
            <input id="left-navigation-bar-main-input" type="search" value="北深渊2" placeholder="请输入图层名称" />
            <!-- <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载</button> -->
            <img id="left-navigation-bar-main-search" src="../../images/addL/sousuo.png" alt="">
        </div>

 widgets/LeftNavigationBar/Widget.js

@@ -59,12 +59,10 @@
                            domDiv.css({ 'display': 'none' })
                        }
                            , a
                            , useit = (d,i) => {
                                var i = i || [];
                            , useit = (d) => {
                                for (var k in d) {
                                    if (d[k].who == 'father') {
                                        that.father = d[k].id
                                        // console.log(that.father, i)
                                        that.father = d[k].id;
                                    }
                                    if (d[k].title.indexOf(val) != -1) {//选中id
                                        a = '' + d[k].id;
@@ -77,11 +75,10 @@
                                        let domDiv = dom.find('.layui-tree-pack').eq(0);
                                        domDiv.css({ 'display': 'block' })
                                        // }
                                        // console.log(a, that.father)
                                        console.log(a, that.father)
                                    }
                                    if (d[k].children) {
                                        i.push(that.father)
                                        useit(d[k].children,i);
                                        useit(d[k].children);
                                    }
                                }
                            };
@@ -154,17 +151,19 @@

                    };
                inits(val, data);
                console.log(data)
                // console.log(data)

                var ccinit = (a) => {
                    for (let k in a) {
                        if (a[k].children) {
                            a[k].who = 'father';
                            // console.log(a[k].id)
                            ccinit(a[k].children)
                        }
                    }
                };
                // var i = 0,
                //     ccinit = (a) => {
                //         i++;
                //         for (let k in a) {
                //             if (a[k].children) {
                //                 a[k].who = i;
                //                 // console.log(a[k].id)
                //                 ccinit(a[k].children)
                //             }
                //         }
                //     };
                // ccinit(this.data);
                // console.log(this.data)
                this.data = data;
@@ -186,12 +185,12 @@
                        , click: function (obj) {
                            var data = obj.data;  //获取当前点击的节点数据
                            // layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                            // console.log(obj);
                            console.log(obj);
                            // 树点击三角形样式修改
                            var ot = $('.layui-tree-iconArrow');
                            ot.removeClass("left-navigation-bar-main-down");
                            var jt = $(`[data-id='${data.id}']`).find('.layui-tree-iconArrow').eq(0);
                            jt.addClass('left-navigation-bar-main-down');
                            // var ot = $('.layui-tree-iconArrow');
                            // ot.removeClass("left-navigation-bar-main-down");
                            // var jt = $(`[data-id='${data.id}']`).find('.layui-tree-iconArrow').eq(0);
                            // jt.addClass('left-navigation-bar-main-down');
                            // 树点击样式修改
                            // var ot = $('.layui-tree-entry');
                            // ot.removeClass("left-navigation-bar-main-current");

 widgets/LeftNavigationBar/css/style.css

@@ -150,4 +150,11 @@

.left-navigation-bar-main-current {
  background-color: #2ab9ec
}

.layui-form-checked[lay-skin=primary] i{
  background-color: #36A0FD !important;
}
.layui-tree-spread .layui-tree-iconArrow:after{
  border-color: #c0c4cc transparent  transparent transparent  !important;
}