<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>Document</title>
|
<link rel="stylesheet" href="./../JS/layui/css/layui.css">
|
<link rel="stylesheet" href="./../CSS/bootstrap.min.css">
|
<link rel="stylesheet" href="./../CSS/checkbox.css">
|
<link rel="stylesheet" href="./../CSS/jquery.mCustomScrollbar.css">
|
<link rel="stylesheet" href="./../CSS/zzsc.css">
|
|
</script>
|
<style>
|
html,
|
body {
|
height: 100%;
|
width: 100%;
|
margin: 0;
|
overflow: hidden;
|
padding: 0;
|
background: rgba(0, 0, 0, 1);
|
}
|
|
#leftMenu {
|
height: 100%;
|
width: 100%;
|
}
|
|
#left_header {
|
height: 46px;
|
width: 100%;
|
background: rgba(44, 44, 44, 0.2);
|
}
|
|
#left_header div {
|
width: 100%;
|
text-align: center;
|
line-height: 46px;
|
font-weight: bolder;
|
color: white;
|
float: left;
|
}
|
|
#heade_one {
|
background: url(./../Image/left/拷贝4.png)
|
}
|
|
#left_box {
|
width: 100%;
|
height: 702px;
|
overflow-y: auto;
|
position: absolute;
|
display: none;
|
}
|
|
#queryserve {
|
/* height: 40px; */
|
width: 100%;
|
margin-top: 10px;
|
margin-left: 10px;
|
display: flex;
|
}
|
|
#queryserve>input[type=text] {
|
display: inline-block;
|
height: 28px;
|
width: 150px;
|
border: none;
|
background: transparent;
|
outline: transparent;
|
font-family: 'Times New Roman', Times, serif;
|
font-size: 18px;
|
color: white;
|
border-bottom: 1px solid white;
|
}
|
|
#queryserve>input[type=text]::-webkit-input-placeholder {
|
font-weight: 400;
|
}
|
|
#queryserve>a {
|
display: block;
|
cursor: pointer;
|
float: right;
|
width: 24px;
|
height: 24px;
|
margin-right: 10px;
|
margin-top: 3px;
|
background: url(./../Image/left/search.png) no-repeat;
|
}
|
|
.querTool {
|
border: 1px solid white;
|
padding: 0px 5px 5px 5px;
|
margin: 5px;
|
margin-top: 0px;
|
}
|
|
.querImage {
|
width: 16px;
|
height: 16px;
|
}
|
|
#queryserve>a:hover {
|
cursor: pointer;
|
}
|
|
.ZTree_class {
|
height: 600px;
|
overflow-y: auto;
|
}
|
|
.layui-tree-entry {
|
height: 30px;
|
}
|
|
.layui-tree-txt {
|
color: white;
|
}
|
|
.layui-colla-title {
|
color: #fff;
|
background-color: rgba(1, 5, 31, 1);
|
font-family: "Microsoft Ya Hei";
|
font-weight: bold;
|
font-size: 18px;
|
}
|
/* .layui-icon-add-1,
|
.layui-icon-edit,
|
.layui-icon-delete {
|
background: rgba(255, 255, 255, 0.3);
|
}
|
*/
|
|
.layui-colla-content {
|
color: #fff;
|
}
|
|
.layui-badge-rim,
|
.layui-colla-content,
|
.layui-colla-item,
|
.layui-collapse,
|
.layui-elem-field,
|
.layui-form-pane .layui-form-item[pane],
|
.layui-form-pane .layui-form-label,
|
.layui-input,
|
.layui-layedit,
|
.layui-layedit-tool,
|
.layui-quote-nm,
|
.layui-select,
|
.layui-tab-bar,
|
.layui-tab-card,
|
.layui-tab-title,
|
.layui-tab-title .layui-this:after,
|
.layui-textarea {
|
border-color: rgba(255, 255, 255, 0.1);
|
}
|
|
.layui-tree {
|
color: white;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="leftMenu">
|
<div id="left_header">
|
<div id="heade_one" onclick="showheadone()">
|
工程树
|
</div>
|
<!-- <div id="heade_two" onclick="showheadtwo() ">
|
地质数据管理
|
</div> -->
|
</div>
|
|
<div id="left_box">
|
<div id="queryserve">
|
<input type="text" name="" id="data_Key" placeholder="检索">
|
<a onclick="dataQueryStart()"></a>
|
<!-- <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid sure" onclick="removeitem()">
|
删除
|
</button>
|
<button type="button" class="layui-btn layui-btn-normal layui-btn-fluid sure" onclick="addnewitem()">
|
新增
|
</button>
|
<button type="button" class="layui-btn layui-btn-normal layui-btn-fluid sure" onclick="renameitem()">
|
重命名
|
</button> -->
|
|
<div id="querToolone" class="querTool">
|
<img src="../Image/left/图层 11 拷贝 2.png" class="querImage">
|
</div>
|
<div id="querTooltwo" class="querTool">
|
<img src="../Image/left/重命名 (1).png" class="querImage">
|
</div>
|
<div id="querToolthree" class="querTool">
|
<img src="../Image/left/删除.png" class="querImage">
|
</div>
|
</div>
|
<div id="treeDe" class="demo-tree demo-tree-box ZTree_class"></div>
|
<!-- <object id=" SGWorld " classid="CLSID:3A4F919C-65A8-11D5-85C1-0001023952C1 "></object> -->
|
</div>
|
<div id="ProjectTreePanel">
|
|
<object id="TerraExplorerInformationWindow" classid="CLSID:3a4f9193-65a8-11d5-85c1-0001023952c1" style="width: 100%; height: 600px;"></object>
|
|
</div>
|
</div>
|
<script src="../JS/jquery-1.10.2.min.js"></script>
|
<script src="../JS/layui/layui.js "></script>
|
<script src="../JS/jquery-ui-1.10.4.min.js "></script>
|
<script src="../JS/jquery.mousewheel.min.js "></script>
|
<script src="../JS/jquery.mCustomScrollbar.js "></script>
|
|
<script>
|
function showheadone() {
|
document.getElementById("heade_one").style.backgroundImage = "url(./../Image/left/拷贝4.png) ";
|
document.getElementById("heade_two").style.background = "none ";
|
$("#ProjectTreePanel").show();
|
$("#left_box").hide();
|
}
|
|
function showheadtwo() {
|
document.getElementById("heade_two").style.backgroundImage = "url(./../Image/left/拷贝4.png) ";
|
var MYDIv = document.getElementById("heade_one").style.background = "none";
|
$("#ProjectTreePanel").hide();
|
$("#left_box").show();
|
}
|
$(window).load(function() {
|
$("#left_box").mCustomScrollbar();
|
});
|
var data1 = [{
|
title: '江西',
|
id: 1,
|
children: [{
|
title: '南昌',
|
id: 1000,
|
children: [{
|
title: '青山湖区',
|
id: 10001
|
}, {
|
title: '高新区',
|
id: 10002
|
}]
|
}, {
|
title: '九江',
|
id: 1001
|
}, {
|
title: '赣州',
|
id: 1002
|
}]
|
}, {
|
title: '广西',
|
id: 2,
|
children: [{
|
title: '南宁',
|
id: 2000
|
}, {
|
title: '桂林',
|
id: 2001
|
}]
|
}, {
|
title: '陕西',
|
id: 3,
|
children: [{
|
title: '西安',
|
id: 3000
|
}, {
|
title: '延安',
|
id: 3001
|
}]
|
}];
|
layui.use(['tree', 'util'], function() {
|
var tree = layui.tree,
|
layer = layui.layer,
|
util = layui.util
|
//开启节点操作图标
|
tree.render({
|
elem: '#treeDe',
|
data: data1,
|
edit: ['add', 'update', 'del'] //操作节点的图标
|
,
|
click: function(obj) {
|
// alert(obj)
|
// layer.msg(JSON.stringify(obj.data));
|
},
|
operate: function(obj) {
|
var type = obj.type; //得到操作类型：add、edit、del
|
var data = obj.data; //得到当前节点的数据
|
var elem = obj.elem; //得到当前节点元素
|
console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
|
}
|
});
|
})
|
</script>
|
</body>
|
|
</html>
|
