From c37e7bbec4d1361b7e78e021114087ccea54b0eb Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 04 Jun 2021 14:48:11 +0800
Subject: [PATCH] 左侧导航栏推拉效果
---
widgets/LeftNavigationBar/Widget.js | 328 ++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 300 insertions(+), 28 deletions(-)
diff --git a/widgets/LeftNavigationBar/Widget.js b/widgets/LeftNavigationBar/Widget.js
index 87a0bf3..54d173a 100644
--- a/widgets/LeftNavigationBar/Widget.js
+++ b/widgets/LeftNavigationBar/Widget.js
@@ -30,13 +30,13 @@
startup: function () {
// 暴露在外的接口
this.begin(this.data);
- $('#left-navigation-bar-main-search').click(()=>{
+ $('#left-navigation-bar-main-search').click(() => {
var val = $('#left-navigation-bar-main-input').val();
- if(val){
+ if (val) {
console.log(val);
- }else{
-
+ } else {
+
}
})
},
@@ -68,49 +68,321 @@
$('.left-navigation-bar-but').click(() => {
that.changeImg = !that.changeImg;
if (that.changeImg) {
- $('.l-n-b-b-img').attr("src", "../../images/addL/xzuo.png");
+ $('.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");
+ $('.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
- , util = layui.util;
+ , layer = layui.layer;
tree.render({
elem: '#test1' //默认是点击节点可进行收缩
, data: data
+ , id: 'demoId1'
, showCheckbox: true //是否显示复选框
, click: function (obj) {
var data = obj.data; //获取当前点击的节点数据
- layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(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');
+
}
, showLine: false //是否开启连接线
+ , oncheck: function (obj) {
+ console.log(obj.data.id, '--', obj.checked); //得到当前点击的节点数据
+ // console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
+ // 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, 16]); //勾选指定节点
- // }
- // , 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
--
Gitblit v1.9.3