You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
188 lines
7.2 KiB
HTML
188 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
|
|
|
</head>
|
|
|
|
<body style="text-align:center;">
|
|
<div id="orgTree" class="OkrTree" style="display: inline-block; zoom:1">
|
|
</div>
|
|
</body>
|
|
<style>
|
|
.OkrTree .tagBox div.tagRight>.line {
|
|
width: 182px !important;
|
|
margin-top: -12px !important;
|
|
}
|
|
</style>
|
|
</html>
|
|
|
|
<script src="./okrTree.js"></script>
|
|
<script>
|
|
var json = [
|
|
|
|
{
|
|
"id": "topOne",
|
|
"name": "康晴",
|
|
"position": "存在以下多个顶点！",
|
|
"photos": "/img/t1.png",
|
|
"pid": "",
|
|
"children": [
|
|
{
|
|
"id": "zwx01",
|
|
"name": "邹文霞",
|
|
"position": "高级副总裁",
|
|
"photos": "/OrgChart/D02043.JPG",
|
|
"pid": "topOne",
|
|
"type": "tag",
|
|
"children": [
|
|
{
|
|
"id": "zb",
|
|
"name": "周斌",
|
|
"position": "(兼)AM",
|
|
"photos": "/OrgChart/D0002.JPG",
|
|
"pid": "zwx01",
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "topId",
|
|
"name": "徐金尧",
|
|
"position": "存在以下多个顶点！",
|
|
"photos": "/img/t1.png",
|
|
"pid": "topOne",
|
|
"children": [{
|
|
"id": "00008",
|
|
"name": "张清龙",
|
|
"position": "MR",
|
|
"photos": "/Images/PER/bg_02.gif",
|
|
"pid": "topId",
|
|
"children": [
|
|
{
|
|
"id": "wym",
|
|
"name": "王益明",
|
|
"position": "(兼)AM",
|
|
"photos": "/OrgChart/D0002.JPG",
|
|
"pid": "00008",
|
|
"children": [
|
|
{
|
|
"id": "xh",
|
|
"name": "肖辉",
|
|
"position": "(兼)AM",
|
|
"photos": "/OrgChart/D0002.JPG",
|
|
"pid": "wym"
|
|
},{
|
|
"id": "cj",
|
|
"name": "陈静",
|
|
"position": "(兼)AM",
|
|
"photos": "/OrgChart/D0002.JPG",
|
|
"pid": "wym"
|
|
}
|
|
]
|
|
},{
|
|
"id": "whs",
|
|
"type":"tag",
|
|
"name": "吴海松",
|
|
"position": "(兼)AM",
|
|
"photos": "/OrgChart/D0002.JPG",
|
|
"pid": "00008",
|
|
"children": []
|
|
}
|
|
]
|
|
}, {
|
|
"id": "00009",
|
|
"name": "lex",
|
|
"position": "APM",
|
|
"photos": "/Images/PER/bg_02.gif",
|
|
"pid": "topId",
|
|
"children": []
|
|
}, {
|
|
"id": "1110222",
|
|
"name": "员工姓名",
|
|
"position": "MR",
|
|
"photos": "/Images/PER/bg_02.gif",
|
|
"pid": "topId",
|
|
"children": []
|
|
}, {
|
|
"id": "D0001",
|
|
"name": "Lex",
|
|
"position": "高级副总裁",
|
|
"photos": "/OrgChart/D0001.JPG",
|
|
"pid": "topId",
|
|
"children": [{
|
|
"id": "D0002",
|
|
"name": "atest",
|
|
"position": "(兼)AM",
|
|
"photos": "/OrgChart/D0002.JPG",
|
|
"pid": "D0001",
|
|
"children": []
|
|
},{
|
|
"id": "D0003",
|
|
"name": "btest",
|
|
"position": "(兼)AM",
|
|
"photos": "/OrgChart/D0002.JPG",
|
|
"pid": "D0001",
|
|
"children": []
|
|
}]
|
|
}, {
|
|
"id": "D0730",
|
|
"name": "LEX",
|
|
"position": "AM",
|
|
"photos": "/Images/PER/bg_02.gif",
|
|
"pid": "topId",
|
|
"children": []
|
|
}, {
|
|
"id": "D0732",
|
|
"name": "test",
|
|
"position": "AM",
|
|
"photos": "/Images/PER/bg_02.gif",
|
|
"pid": "topId",
|
|
"children": []
|
|
}, {
|
|
"id": "101BJ559",
|
|
"name": "肖锋",
|
|
"position": "(兼)AM",
|
|
"photos": "/Images/PER/bg_02.gif",
|
|
"pid": "topId",
|
|
"children": []
|
|
}]
|
|
}
|
|
]
|
|
}
|
|
|
|
]
|
|
var s = $("#orgTree").OkrTree({
|
|
data: json, // 数据源
|
|
isdrop: false, //是否支持拖拽
|
|
tagTemplate: function(data, path) {
|
|
console.log("tag",data);
|
|
if(data.id == 'zwx01') {
|
|
return ["<div style='width:120px;background:#eee;border-radius:2px;margin-left: 80px'>",
|
|
"<img draggable='false' width='100%' height='110' src='img/t.png' />",
|
|
data.name, "</div><div class='expandIcon' title='折叠'>-</div>",
|
|
"<div class='row'><div class='item' data-z='' data-path='0-1-3-0'><div class='lineTop'><div class='line-left'></div><div class='line-right top'></div></div><div class='content'><div class='template' draggable='false'><div style='width:120px;background:#eee;border-radius:2px;overflow:hidden'><img draggable='false' width='100%'' height='110' src='img/t.png'>atest</div></div></div></div><div class='item' data-z='' data-path='0-1-3-1'><div class='lineTop'><div class='line-left top'></div><div class='line-right ''></div></div><div class='content'><div class='template' draggable='false'><div style='width:120px;background:#eee;border-radius:2px;overflow:hidden'><img draggable='false' width='100%'' height='110' src='img/t.png'>btest</div></div></div></div></div>"
|
|
].join("");
|
|
}else {
|
|
return ["<div style='width:120px;background:#eee;border-radius:2px'>",
|
|
"<img draggable='false' width='100%' height='110' src='img/t.png' />",
|
|
data.name, "</div>",
|
|
].join("");
|
|
}
|
|
|
|
},
|
|
itemTemplate: function(data, path) {
|
|
console.log("item",data);
|
|
return ["<div style='width:120px;background:#eee;border-radius:2px;overflow:hidden'>",
|
|
"<img draggable='false' width='100%' height='110' src='img/t.png' />",
|
|
data.name , "</div>"
|
|
].join("");
|
|
}
|
|
})
|
|
|
|
|
|
</script> |