左侧树

liuyg

2021-06-05 04af7d3eb75ce3f3f6be3ce84c46af57bae8ab7b

 widgets/LeftNavigationBar/Widget.js

@@ -29,12 +29,61 @@
         layers: {},
         startup: function () {
            // 暴露在外的接口
            this.begin(this.data);
            $('#left-navigation-bar-main-search').click(() => {
            // this.begin(this.data);
            var that = this;
            this.getData();

            $('.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' });
            $('#left-navigation-bar-main-search').click(() => {//搜索事件
               var val = $('#left-navigation-bar-main-input').val();
               if (val) {
                  console.log(val);

                  var clearOur = () => {
                     let dom = $(`[data-id]`);
                     // console.log(dom);
                     dom.removeClass('layui-tree-spread');
                     let domDiv = dom.find('.layui-tree-pack');
                     domDiv.css({ 'display': 'none' })
                  }
                     , a
                     , useit = (d) => {
                        for (var k in d) {
                           if (d[k].who == 'father') {
                              that.father = d[k].id;
                           }
                           if (d[k].title.indexOf(val) != -1) {//选中id
                              a = '' + d[k].id;
                              // var b = a.split('');
                              // for (var i in b) {
                              let id = that.father;//选中项的所有父级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' })
                              // }
                              console.log(a, that.father)
                           }
                           if (d[k].children) {
                              useit(d[k].children);
                           }
                        }
                     };
                  clearOur();
                  useit(that.data);
               } else {

               }
@@ -63,23 +112,71 @@
         resize: function () {

         },
         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'});
         getData: function () {
            var url = 'http://171.34.76.171:8880/zhsd-wetResource/GeoData/queryGeoDataTree'
               , that = this;

            axios.get(url, {
               headers: {
                  "token": 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjI4Nzc0MTIsImV4cCI6MTYyNTQ2OTQxMn0.f2GhYYINfYgSbyKTqqGluyU3rdy_TT8mf15iLILS1l2EUSye_h9O6CSUVWpLYMrdrjzqDWwrbROxfhy-8ly0uA'
               }
            }).then((res) => {
               if (res.data.code == '200') {
                  that.changeData(res.data.data);//重写数据
               }
            })
         },
         changeData: function (val) {//重写数据
            var data = [],
               i = 1,
               inits = (d, childData) => {
                  var b = childData || [];
                  for (var k in d) {

                     let a = {
                        title: d[k].name,
                        // id: d[k].id,
                        // field: String(d[k].id),
                        id: i,
                        field: String(i)
                     }
                     b.push(a);
                     i++;
                     if (d[k].children.length != 0) {
                        b[k].children = [];
                        b[k].who = 'father';
                        inits(d[k].children, b[k].children)
                     }
                  }

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

            // 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;
            this.begin(this.data);
         },
         begin: function (data) {
            var that = this;

            layui.use(function () {
               var tree = layui.tree
                  , layer = layui.layer;
                  , layer = layui.layer
                  , util = layui.util
                  , $ = layui.$;
               tree.render({
                  elem: '#test1' //默认是点击节点可进行收缩
                  , data: data
@@ -88,12 +185,17 @@
                  , click: function (obj) {
                     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');

                     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 +204,30 @@
                     // 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,
         //                },
         //             ]
         //          },

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