console
window.onload = () => {
var tree = document.getElementById('tree');
var log = tree;
}
var expanad = (that) => {
var children = that.nextElementSibling;
if (children) {
var display = children.style.display;
if (display=='none') {
children.style.display = 'block';
if (that.parentElement.classList) that.parentElement.classList.add('expanad');
}else {
children.style.display = 'none';
if (that.parentElement.classList) that.parentElement.classList.remove('expanad');
}
}else{
var ol = document.createElement('ol');
var li = document.createElement('li');
var a = document.createElement('a');
a.innerText = '+新建分支';
a.setAttribute('onclick', 'add(this)');
li.classList.add('add');
li.appendChild(a);
ol.appendChild(li);
that.parentElement.appendChild(ol);
that.parentElement.classList.add('expanad');
elem = that;
}
}
var add = (that) => {
var newtitle = prompt('新建分支名称','').trim();
if (newtitle) {
var li = document.createElement('li');
var a = document.createElement('a');
a.innerText = newtitle;
a.classList.add('fenzhi');
a.setAttribute('onclick', 'expanad(this)');
var a1 = document.createElement('a');
a1.innerText = 'X';
a1.classList.add('del');
a1.setAttribute('onclick', 'del(this)');
var a2 = document.createElement('a');
a2.innerText = 'R';
a2.classList.add('rename');
a2.setAttribute('onclick', 'rename(this)');
li.appendChild(a2);
li.appendChild(a1);
li.appendChild(a);
that.parentElement.parentNode.insertBefore(li, that.parentElement);
}
}
var del = (that) => {
var del = confirm('确认要删除?')
if (del) that.parentElement.remove();
}
var rename = (that) => {
var that2 = that.parentElement.children[that.parentElement.children.length-1];
if (that2.localName != 'a') that2 = that.parentElement.children[that.parentElement.children.length-2];
var newname = prompt('重命名', that2.innerText).trim();
if (newname) that2.innerText = newname;
}
var analyze = () => {
var tree = document.getElementById('tree');
var text = '';
var analyzeTree = (parent,rank) => {
for(var i=0; i<parent.children.length; i++){
var child = parent.children[i];
if (child.localName != 'li') continue;
for(var j=0; j<child.children.length; j++){
var child2 = child.children[j];
switch (child2.localName){
case 'ol': analyzeTree(child2,rank+1); continue;
case 'a': {
if (child2.classList.contains('fenzhi')) {
if (text != '') text += '\n';
for(var k=0; k<rank; k++) text += '\t';
text += rank + '.' + child2.innerHTML;
}
}
break;
}
}
}
};
analyzeTree(tree,1);
var form = document.getElementById('form1');
form.querySelector('textarea[name=result]').value = text;
}
var elem;
<ol id="tree">
<!-- <li><a class="del" onclick="del(this)">X</a><a class="rename" onclick="rename(this)">R</a><a onclick="expanad(this)" >分支</a></li>
<li><a onclick="expanad(this)">分支</a></li>
<li class="expanad">
<a onclick="expanad(this)">分支</a>
<ol>
<li><a onclick="expanad(this)">分支</a></li>
<li><a onclick="expanad(this)">分支</a></li>
<li class="expanad">
<a onclick="expanad(this)">分支</a>
<ol>
<li><a onclick="expanad(this)">分支</a></li>
<li><a onclick="expanad(this)">分支</a></li>
<li>
</li>
</ol>
</li>
</ol>
</li> -->
<li class="add"><a onclick="add(this)">+新建分支</a></li>
</ol>
<hr/>
<div>
<form class="m-form" id="form1">
<div>
<input type="button" value="解析流程结构" onclick="analyze()" />
</div>
<div>
<textarea name="result"></textarea>
</div>
</form>
</div>
ol {
}
li {
border-top: 1px solid gray;
}
li.expanad {
border-left: 1px solid gray;
}
li>a {
padding: 1px 4px;
cursor: pointer;
}
li>a:hover {
color: blue;
}
li.add a {
color: gray;
font-size: 0.9rem;
}
li a.del {
color: red;
}
li a.rename {
color: orange;
}
li a.del,li a.rename {
float: right;
padding: 1px 3px;
border: 1px solid gray;
}
.m-form textarea {
width: 99%;
height: 200px;
}