导航

liuyg

2021-06-04 e8d0f39dfe89486c29aa266beacaaea5a2eab091

导航

 widgets/LeftNavigationBar/Widget.html

@@ -5,9 +5,15 @@
    <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" placeholder="请输入图层名称" />
            <input id="left-navigation-bar-main-input" type="search" value="北深渊1" 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>
        <!-- <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
        </div> -->
        <div id="test1" class="demo-tree demo-tree-box"></div>
    </div>
</div>

 widgets/LeftNavigationBar/Widget.js

@@ -30,11 +30,75 @@
            startup: function () {
                // 暴露在外的接口
                this.begin(this.data);
                $('#left-navigation-bar-main-search').click(() => {

                $('.left-navigation-bar-but').click(() => {
                    this.changeImg = !this.changeImg;
                    if (this.changeImg) {
                        $('.l-n-b-b-img').attr("src", "../../images/addL/xzuo.png");//打开
                        $('.jimu-widget-LeftNavigationBar').css({ 'left': '0px' });
                        $('.jimu-widget-instructions').css({ 'left': '260px' });
                    } else {
                        $('.l-n-b-b-img').attr("src", "../../images/addL/xyou.png");//关闭
                        $('.jimu-widget-LeftNavigationBar').css({ 'left': '-250px' });
                        $('.jimu-widget-instructions').css({ 'left': '10px' });
                    }
                })


                $('.jimu-widget-instructions').css({ 'left': '260px' });

                var dictionaries = []//转数据
                    , inits = (d, useData) => {
                        var b = useData || [];
                        for (var k in d) {
                            let val = {
                                title: d[k].title,
                                id: d[k].id
                            }
                            b.push(val);
                            if (d[k].children) {
                                b[k].child = [];
                                inits(d[k].children, b[k].child)
                            }
                        }
                    };
                inits(this.data, dictionaries);


                $('#left-navigation-bar-main-search').click(() => {//搜索事件
                    var val = $('#left-navigation-bar-main-input').val();
                    if (val) {
                        console.log(val);
                        var ids = ''
                            , clearOur = () => {
                                let dom = $(`[data-id]`);
                                // console.log(dom);
                                dom.removeClass('layui-tree-spread');
                                let domDiv = dom.find('.layui-tree-pack');
                                domDiv.css({ 'display': 'none' })
                            }
                            , useit = (d) => {
                                var d = d;

                                for (var k in d) {
                                    if (d[k].title.indexOf(val) != -1) {//选中id
                                        let a = '' + d[k].id,
                                            b = a.split('');
                                        for (var i in b) {
                                            let id = a.slice(0, i);//选中项的所有父级id
                                            // console.log(id)
                                            let dom = $(`[data-id='${id}']`);
                                            dom.addClass('layui-tree-spread');
                                            let domDiv = dom.find('.layui-tree-pack').eq(0);
                                            domDiv.css({ 'display': 'block' })
                                        }
                                    }
                                    if (d[k].child) {
                                        useit(d[k].child);
                                    }
                                }
                            };
                        clearOur();
                        useit(dictionaries);
                    } else {

                    }
@@ -65,21 +129,12 @@
            },
            begin: function (data) {
                var that = this;
                $('.left-navigation-bar-but').click(() => {
                    that.changeImg = !that.changeImg;
                    if (that.changeImg) {
                        $('.l-n-b-b-img').attr("src", "../../images/addL/xzuo.png");//打开
                        console.log($('.jimu-widget-LeftNavigationBar'))
                        $('.jimu-widget-LeftNavigationBar').css({'left': '0px'});
                    } else {
                        $('.l-n-b-b-img').attr("src", "../../images/addL/xyou.png");//关闭
                        $('.jimu-widget-LeftNavigationBar').css({'left': '-250px'});
                    }
                })

                layui.use(function () {
                    var tree = layui.tree
                        , layer = layui.layer;
                        , layer = layui.layer
                        , util = layui.util
                        , $ = layui.$;
                    tree.render({
                        elem: '#test1' //默认是点击节点可进行收缩
                        , data: data
@@ -89,11 +144,16 @@
                            var data = obj.data;  //获取当前点击的节点数据
                            // layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                            // 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-entry');
                            // ot.removeClass("left-navigation-bar-main-current");
                            // var jh = $(`[data-id='${data.id}']`).find('.layui-tree-entry').eq(0);
                            // jh.addClass('left-navigation-bar-main-current');
                        }
                        , showLine: false  //是否开启连接线
                        , oncheck: function (obj) {
@@ -102,287 +162,29 @@
                            // console.log(obj.elem); //得到当前节点元素
                        }
                    });
                })

                    //按钮事件
                    util.event('lay-demo', {
                        getChecked: function (othis) {
                            var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

                            layer.alert(JSON.stringify(checkedData), { shade: 0 });
                            console.log(checkedData);
                        }
                        , setChecked: function () {
                            tree.setChecked('demoId1', [12, 114]); //勾选指定节点
                        }
                        , reload: function () {
                            //重载实例
                            tree.reload('demoId1', {

                            });

                        }
                    });
                })
            },
            changeImg: true,
            // concheckData: [
            //     {
            //         id: 1,
            //         choseIt: true,
            //         child: [
            //             {
            //                 id: 11,
            //                 choseIt: true,
            //                 child: [
            //                     {
            //                         id: 111,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 112,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 113,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 114,
            //                         choseIt: true,
            //                     },
            //                 ]
            //             },{
            //                 id: 12,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 121,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 122,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 123,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 124,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 13,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 131,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 132,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 133,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 134,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 14,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 141,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 142,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 143,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 144,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },

            //         ]
            //     },{
            //         id: 2,
            //         choseIt: true,
            //         child: [
            //             {
            //                 id: 21,
            //                 choseIt: true,
            //                 child: [
            //                     {
            //                         id: 211,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 212,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 213,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 214,
            //                         choseIt: true,
            //                     },
            //                 ]
            //             },{
            //                 id: 22,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 221,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 222,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 223,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 224,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 23,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 231,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 232,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 233,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 234,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 24,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 241,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 242,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 243,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 244,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },

            //         ]
            //     },
            //     {
            //         id: 3,
            //         choseIt: true,
            //         child: [
            //             {
            //                 id: 31,
            //                 choseIt: true,
            //                 child: [
            //                     {
            //                         id: 311,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 312,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 313,
            //                         choseIt: true,
            //                     },
            //                     {
            //                         id: 314,
            //                         choseIt: true,
            //                     },
            //                 ]
            //             },{
            //                 id: 32,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 321,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 322,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 323,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 324,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 33,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 331,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 332,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 333,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 334,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },{
            //                 id: 34,
            //                 choseIt: false,
            //                 child: [
            //                     {
            //                         id: 341,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 342,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 343,
            //                         choseIt: false,
            //                     },
            //                     {
            //                         id: 344,
            //                         choseIt: false,
            //                     },
            //                 ]
            //             },

            //         ]
            //     },
            // ],
            data: [{
                title: '采集站点'
                , id: 1
@@ -519,7 +321,7 @@
                    , id: 22
                    , field: '2-2'
                    , children: [{
                        title: '北深渊'
                        title: '北深渊4'
                        , id: 221
                        , field: '2-2-1'
                    }, {
@@ -561,7 +363,7 @@
                    , id: 24
                    , field: '2-4'
                    , children: [{
                        title: '北深渊'
                        title: '北深渊5'
                        , id: 241
                        , field: '2-4-1'
                    }, {
@@ -589,7 +391,7 @@
                    , id: 31
                    , field: '3-1'
                    , children: [{
                        title: '北深渊'
                        title: '北深渊2'
                        , id: 311
                        , field: '3-1-1'
                    }, {
@@ -610,7 +412,7 @@
                    , id: 32
                    , field: '3-2'
                    , children: [{
                        title: '北深渊'
                        title: '北深渊3'
                        , id: 321
                        , field: '3-2-1'
                    }, {
@@ -652,7 +454,7 @@
                    , id: 34
                    , field: '3-4'
                    , children: [{
                        title: '北深渊'
                        title: '北深渊1'
                        , id: 341
                        , field: '3-4-1'
                    }, {

 widgets/LeftNavigationBar/css/style.css

@@ -147,3 +147,7 @@
  transform: rotate(90deg);
  transition: .5s;
}

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

 widgets/instructions/css/style.css

@@ -6,7 +6,7 @@
  width: 200px !important;
  right: auto !important;
  bottom: auto !important;
  left: 240px!important;
  left: 260px;
  top: 40px !important;
  /* 240px */
  background: rgba(255, 255, 255, 1);
@@ -21,6 +21,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
}

.jimu-widget-instructions img {