组织机构树

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

box-sizing: border-box;

padding: 0;

margin: 0;

list-style: none;

}

.zsw-org {

display: table;

margin: 0 auto;

}

.zsw-org li {

display: table-cell;

text-align: center;

}

.zsw-cc {

padding: 0 10px;

text-align: center;

}

.zsw-cc>div {

display: inline-block;

border: 1px solid #990000;

height: 35px;

line-height: 35px;

padding: 0 10px;

border-radius: 3px;

white-space: nowrap;

cursor: default;

position: relative;

}

.zsw-cc>div:hover>.child-hide {

display: block !important;

}

.child-hide {

position: absolute;

bottom: -10px;

display: none;

height: 15px;

line-height: 15px;

100%;

left: 0;

text-align: center;

}

.zsw-vertical {

text-align: left;

}

.zsw-vertical div {

display: inline-block;

50%;

border-right: 1px solid #990000;

height: 15px;

}

.zsw-org-tree {

margin-top: -6px;

}

.zsw-org-tree>li .zsw-line>span {

height: 15px;

display: inline-block;

100%;

border-top: #990000 1px solid;

text-align: left;

}

.zsw-org-tree>li .zsw-line>span>span {

50%;

border-right: #990000 1px solid;

display: block;

height: 15px;

}

.zsw-org-tree>li:first-child {

text-align: right;

}

.zsw-org-tree>li:first-child>.zsw-content>.zsw-line>span {

50%;

border-left: #990000 1px solid;

}

.zsw-org-tree>li:first-child>.zsw-content>.zsw-line>span>span,

.zsw-org-tree>li:last-child>.zsw-content>.zsw-line>span>span {

border: none;

}

.zsw-org-tree>li:last-child {

text-align: left;

}

.zsw-org-tree>li:last-child>.zsw-content>.zsw-line>span {

50%;

border-right: #990000 1px solid;

}

.zsw-line-sign>span {

border-left: none !important;

border-top: none !important;

}

.zsw-org-tree-active{

background-color: cadetblue;

color: #fff;

}

</style>

</head>

<!-- <ul class="zsw-org">

<li>

</div>

</div>

<li>

<span>

</span>

</div>

</div>

</div>

<li>

<span>

</span>

</div>

</div>

</li>

<li>

<span>

</span>

</div>

</div>

</li>

<li>

<span>

</span>

</div>

</div>

</li>

</ul>

</li>

<li>

<span>

</span>

</div>

</div>

</li>

<li>

<span>

</span>

</div>

</div>

</div>

<li>

<span>

</span>

</div>

</div>

</li>

<li>

<span>

</span>

</div>

</div>

</li>

<li>

<span>

</span>

</div>

</div>

</li>

</ul>

</li>

</ul>

</li>

</ul> -->

</body>

</html>

function orgTree(opt) {

//默认参数

this._defOpt = {

//data: undefined,

el: "#orgTree",

//afterContent: undefined,

//afterContentEvent: undefined,

dicNameSet: {

"name": "name",

"child": "child"

//contentClick: undefined,

isFlex: false

};

let _opt = $.extend({}, this._defOpt, opt);

//处理html

function joinHtml() {

//第一个节点与后续节点有区别

if (_opt.data) {

//根目录

let _$html = $('<ul class="zsw-org"></ul>');

//第一个节点

let _$li = $('<li></li>')

//第一个节点内容

let _content = '';

_content += '<div class="zsw-content">';

_content += '<div class="zsw-cc">';

_content += '<div>' + _opt.data[_opt.dicNameSet.name] + '</div>';

_content += '</div>';

let _$content = $(_content);

addCustomNode(_$content, null, _opt.data);

_$li.append(_$content);

_$html.append(_$li)

$(_opt.el).html(_$html);

bindContentClick(_$li, _opt.data);

if (_opt.data[_opt.dicNameSet.child]) {

joinHtmlChild(_opt.data[_opt.dicNameSet.child], _$li);

}

function joinHtmlChild(obj, el) {

if (obj !== null && obj.length > 0) {

//竖线

let verHtml = '';

verHtml += '<div class="zsw-vertical">';

verHtml += '<div></div>';

verHtml += '</div>';

verHtml = $(verHtml);

el.append(verHtml);

//添加子级

let ul = $('<ul class="zsw-org-tree"></ul>');

el.append(ul);

$.each(obj, function (i, item) {

let li = $("<li></li>")

ul.append(li);

let content = '';

content += '<div class="zsw-content">';

if (obj.length > 1) {

content += '<div class="zsw-line">';

}

else {

content += '<div class="zsw-line zsw-line-sign">';

}

content += '<span>';

content += '<span></span>';

content += '</span>';

content += '</div>';

content += '<div class="zsw-cc">';

content += '<div>' + item[_opt.dicNameSet.name] + '</div>';

content += '</div>';

content = $(content);

addCustomNode(content, obj, item);

li.append(content);

bindContentClick(li, item);

if (item[_opt.dicNameSet.child]) {

joinHtmlChild(item[_opt.dicNameSet.child], li)

}

})

}

function addCustomNode(el, parentData, data) {

if (_opt.afterContent !== undefined && _opt.afterContent !== '') {

let afterConten = $(_opt.afterContent)

el.find(".zsw-cc div").append(afterConten);

if (typeof _opt.afterContentEvent === 'function') {

_opt.afterContentEvent(afterConten, el, parentData, data)

}

//绑定内容点击事件

function bindContentClick(el, data) {

$(el).on("click", ".zsw-cc div", function (e) {

if (_opt.isFlex) {

let ver = $(el).children(".zsw-vertical");

let org = $(el).children(".zsw-org-tree");

if (ver.css("display") === 'block') {

ver.hide();

org.hide();

$(this).append("<span class='child-hide'>V</span>")

}

else {

ver.show();

org.show();

$(this).children(".child-hide").remove()

}

$(".zsw-org-tree-active").removeClass('zsw-org-tree-active');

$(el).children(".zsw-content").find(".zsw-cc div").addClass('zsw-org-tree-active')

if (typeof _opt.contentClick === 'function') {

_opt.contentClick(e, data);

}

//阻止冒泡

return false;

})

}

function removeAaary(_arr, _obj) {

var length = _arr.length;

for (var i = 0; i < length; i++) {

if (_arr[i] == _obj) {

if (i == 0) {

_arr.shift(); //删除并返回数组的第一个元素

return _arr;

}

else if (i == length - 1) {

_arr.pop(); //删除并返回数组的最后一个元素

return _arr;

}

else {

_arr.splice(i, 1); //删除下标为i的元素

return _arr;

}

//初始化

joinHtml();

return {

//刷新结构

refresh: function () {

alert(111)

joinHtml();

//添加数据

addNode: function (el, pdata, data) {

//alert("未实现");

//addChildNode();

let ul = "";

if (pdata.child != null && pdata.child != undefined && pdata.child) {

pdata.child.push(data);

ul = $(el).siblings("ul")

}

else {

pdata.child = [];

pdata.child.push(data);

ul = $('<ul class="zsw-org-tree"></ul>')

let verHtml = '';

verHtml += '<div class="zsw-vertical">';

verHtml += '<div></div>';

verHtml += '</div>';

verHtml = $(verHtml);

el.parent().append(verHtml)

el.parent().append(ul)

}

let li = '';

li += '<li>';

li += '<div class="zsw-content">';

if (pdata.child.length > 1) {

li += '<div class="zsw-line">';

//修改样式，只允许修改直接下级

ul.children("li").children(".zsw-content").find(".zsw-line-sign").removeClass('zsw-line-sign');

}

else {

li += '<div class="zsw-line zsw-line-sign">';

}

//li += '<div class="zsw-line">';

li += '<span>';

li += '<span></span>';

li += '</span>';

li += '</div>';

li += '<div class="zsw-cc">';

li += '<div>' + data[_opt.dataSet.name] + '</div>';

li += '</div></div>';

li += '</li>';

li = $(li);

ul.append(li);

let _$content = li.find(".zsw-content")

addCustomNode(_$content, data);

bindContentClick(li, data);

//删除数据

delNode: function (el, pData, data) {

//alert("未实现")

//delete data;

if (pData == null) {

//顶级节点

_opt.data = null;

$(_opt.el).html("")

}

else {

removeAaary(pData, data);

if(pData.length > 0){

if(pData.length == 1){

let li = el.parent();

li.siblings().children(".zsw-content").find(".zsw-line").addClass("zsw-line-sign");

li.remove();

}

else{

let ul = el.parent().parent();

ul.siblings(".zsw-vertical").remove();

ul.remove();

}

console.log(_opt.data);

//更新数据

uptNode: function (el, contentNode, nData) {

//alert("未实现")

let nodeData = $.extend(contentNode, nData);

let content = el.find('.zsw-cc div');

content.html(nodeData[_opt.dicNameSet.name]);

//重置数据

resetData: function (data) {

_opt.data = data;

joinHtml();

}

};

}

//使用示例

var orgTree = new orgTree({

//数据

data: {

child: [

{

child: [

{

{

}

]

{

child: [

{

}

]

}

]

//容器

//el: "#orgTree",

//在名称后面增加的自定义内容

afterContent: "<span>∷</span>",

//自定义内容的函数，将自定义内容的jquery对象以及当前级别的数据抛出，方便自定义事件

afterContentEvent: function (custormNode, contentNode, childNodes, node) {

* custormNode:当前节点中自定义的节点jquery对象说不定什么时候就能用到

* contentNode:当前节点jquery对象增删改都需要

* node:当前节点数据，包含子节点曾删改都需要

* childNodes:当前节点的父节点的子节点集合删除数据需要，因为数据需要从此集合删除

$(custormNode).on("click", function () {

// console.log("custorm:")

// console.log(node);

// console.log(parentNodeData);

//新节点或者更新后的节点

// var nData = {

// name: "我是新的"

// }

//添加数据

//orgTree.addNode(contentNode, node, nData);

//修改数据

//orgTree.uptNode(contentNode, node, nData);

//删除数据

//orgTree.delNode(contentNode, childNodes, node);

//此处冒泡到内容节点时，注释 return false即可

return false;

})

//addChildNode()

//data中的key设置，以下是默认设置

// dataSet: {

// "name": "name",

// "child": "child"

// },

//是否可以隐藏

isFlex: true,

//节点点击方法

contentClick: function (e, data) {

* e:jquery event对象

* data:当前节点数据，包含子节点

console.log("node:")

console.log(data);

}

})

</script>

哎，我这个审美啊