From e8d0f39dfe89486c29aa266beacaaea5a2eab091 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 04 Jun 2021 17:56:38 +0800
Subject: [PATCH] 导航
---
widgets/LeftNavigationBar/Widget.js | 398 ++++++++++++++------------------------------------------
1 files changed, 100 insertions(+), 298 deletions(-)
diff --git a/widgets/LeftNavigationBar/Widget.js b/widgets/LeftNavigationBar/Widget.js
index 54d173a..59f22f3 100644
--- a/widgets/LeftNavigationBar/Widget.js
+++ b/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'
}, {
--
Gitblit v1.9.3