@{
Layout = null;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
ul li {
list-style: none;
border: solid white 0.5px;
margin: 5px 0px;
padding: 4px 2px;
}
span.glyphicon-trash {
color: rgb(212, 106, 64);
}
span.glyphicon-plus {
color: #8ac007;
}
span.glyphicon-pencil {
color: #428bca;
}
.opeartion {
display: inline;
visibility: hidden;
padding-left: 20px;
}
.opeartion > .glyphicon {
padding: 3px 6px;
}
span.iconDoubleClick {
margin-right: 10px;
}
#treeview span.glyphicon-folder-close {
color: #337ab7;
}
#treeview span.glyphicon-file {
color: #5bc0de;
}
.titleSpan {
font-size: 14px;
}
#treeview {
border: solid #5cb85c 2px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>你好，树！</h1>
<div class="container">
<div class="row">
<div id="treeview" class="col-md-6 treecol">
@*<ul>
<li>
<div>
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
<span>1</span>
<div class="opeartion">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</div>
</div>
<ul>
<li><span class="glyphicon glyphicon-file" aria-hidden="true"></span><span>11</span></li>
<li><span class="glyphicon glyphicon-file" aria-hidden="true"></span><span>12</span></li>
<li><span class="glyphicon glyphicon-file" aria-hidden="true"></span><span>13</span></li>
</ul>
</li>
<li>
<span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span>
<span>2</span>
</li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>*@
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
<script>
//初始化代码
function initTree(data) {
var html = '';
if (!data) {
return null;
}
html += '<ul>';
for (var i = 0, ilen = data.length; i < ilen; i++) {
var item = data[i];
var divid = '';
var titleIconClass = '';
var title = '';
//初始化变量
divid = 'id_' + item.ID;
if (!item.Children) {
titleIconClass = 'glyphicon glyphicon-file iconDoubleClick';
}
else {
titleIconClass = 'glyphicon glyphicon-folder-close iconDoubleClick';
}
title = item.Name;
html += '<li>';
html += '<div id="' + divid + '" class="signid" >'
html += '<span class="' + titleIconClass + '" aria-hidden="true"></span>';
html += '<span class="titleSpan">' + title + '</span>';
html += '<div class="opeartion"><span class="glyphicon glyphicon-trash operationDelete" aria-hidden="true"></span><span class="glyphicon glyphicon-plus operationAdd" aria-hidden="true"></span><span class="glyphicon glyphicon-pencil operationEdit" aria-hidden="true"></span></div>';
html += '</div>';
if (item.Children) {
html += initTree(item.Children);
}
html += '</li>';
}
html += '</ul>';
return html;
};
$(document).ready(function () {
var jsonData = [];
//显示 操作菜单
var timeout = '';
var showOparetionTool = function () {
$('#treeview ul li>div').mouseenter(function () {
$(this).addClass("mouseover");
timeout = setTimeout(function (obj) {
//alert('2秒');
$('#treeview div.mouseover>div.opeartion').css('visibility', 'visible');
var a = '';
}, 1000);
});
$('#treeview ul li>div').mouseleave(function () {
$('#treeview div.mouseover>div.opeartion').css('visibility', 'hidden');
$('#treeview div.mouseover').removeClass("mouseover");
clearTimeout(timeout)
})
}
var operationToolBorder = function () {
$('#treeview .opeartion>.glyphicon').mouseenter(function () {
$(this).css('border', 'solid red 0.2px')
});
$('#treeview .opeartion>.glyphicon').mouseleave(function () {
$(this).css('border', 'solid white 0.2px')
});
}
var iconDoubleClick = function (obj) {
var ul = {};
if (!obj) {
ul = $('#treeview span.iconDoubleClick');
}
else {
ul = obj;
}
ul.dblclick(function () {
var ul = $(this).parent().next();
if (ul.hasClass('isHidden')) {
ul.css("display", "block");
ul.removeClass('isHidden')
}
else {
ul.css("display", "none");
ul.addClass('isHidden');
}
});
};
var operationBtnEdit = function (obj) {
var btn = {};
if (!obj) {
btn = $('#treeview ul li div.opeartion span.operationEdit');
}
else {
btn = obj;
}
btn.click(function () {
alert('单击编辑按钮！');
var obj = $(this).parent().prev('span');
var name = prompt("请输入新节点名称", obj.text());
if (obj.text() == name) {
return;
}
var id = $(this).parents('.signid:first').attr('id').replace('id_', '')
if (name) {
$.ajax({
type: "GET",
url: "/Tree/UpdateName",
data: { id: id, newName: name },
dataType: "json",
async: true,
success: function (data) {
if (data && data.success) {
obj.text(name);
alert("修改数据成功！");
}
else {
alert("修改数据失败！");
}
},
error: function () {
alert("修改数据错误！");
}
});
obj.text(name);
}
else {
alert("新名称不合法!");
}
});
};
var operationBtnDelete = function (obj) {
var btn = {};
if (!obj) {
btn = $('#treeview ul li div.opeartion span.operationDelete');
}
else {
btn = obj;
}
btn.click(function () {
//alert('单击删除按钮！');
if (!confirm("是否删除？")) {
return;
}
var id = $(this).parents('.signid:first').attr('id').replace('id_', '')
//先后台去请求
var self = $(this);
$.ajax({
type: "GET",
url: "/Tree/DeleteNode",
data: { id: id },
dataType: "json",
async: true,
success: function (data) {
if (data && data.success) {
var closestUl = self.parents('ul:first');//父亲ul
var closestLi = self.parents('li:first');//当前li
var insertliList = self.parents('div.signid').next('ul').html();//待插入li
closestLi.after(insertliList);
closestLi.remove();
alert("删除成功！");
}
else {
alert("删除失败！");
}
},
error: function (data) {
if (!data || !data.success) {
alert("删除错误！");
}
}
});
//$.ajax({
// type: "GET",
// url: "/Tree/DeleteNode",
// data: { id: id},
// dataType: "json",
// async: false,
// success: function (data) {
// if (data && data.success) {
// obj.text(name);
// }
// alert("删除数据成功！");
// },
// error: function () {
// //alert("修改数据失败！111");
// }
//});
});
};
var operationBtnAdd = function (obj) {
var btn = {};
if (!obj) {
btn = $('#treeview ul li div.opeartion span.operationAdd');
}
else {
btn = obj;
}
btn.click(function () {
//alert('单击添加按钮！');
var name = prompt("创建新节点名称", "");
var id = $(this).parents('.signid:first').attr('id').replace('id_', '');
//先后台去请求
var request = false;
var self = $(this);
$.ajax({
type: "GET",
url: "/Tree/AddNode",
data: { id: id, newName: name },
dataType: "json",
async: true,
success: function (data) {
if (!data || !data.success) {
alert("添加失败！");
return;
}
var li = self.parents('li:first');
var childul = self.parents('div.signid').next('ul');//在这个ul内部插入新节点
var insertPosition = {};
var divid = data.data.id;
var titleIconClass = '';
var title = '';
//初始化变量
title = name;
titleIconClass = 'glyphicon glyphicon-file iconDoubleClick';
if (childul.length == 0) {
li.append('<ul></ul>');
//改变li的标签
var liDoubleClickSpna = self.parents('div.signid:first').find('span.iconDoubleClick:first');
liDoubleClickSpna.removeClass('glyphicon-file');
liDoubleClickSpna.addClass('glyphicon-folder-close');
insertPosition = li.find('ul:first');
}
else {
insertPosition = childul;
}
var html = '';
html += '<li>';
html += '<div id="' + divid + '" class="signid" >'
html += '<span class="' + titleIconClass + '" aria-hidden="true"></span>';
html += '<span class="titleSpan">' + title + '</span>';
html += '<div class="opeartion"><span class="glyphicon glyphicon-trash operationDelete" aria-hidden="true"></span><span class="glyphicon glyphicon-plus operationAdd" aria-hidden="true"></span><span class="glyphicon glyphicon-pencil operationEdit" aria-hidden="true"></span></div>';
html += '</div>';
html += '</li>';
insertPosition.append(html);
showOparetionTool();
operationToolBorder();
iconDoubleClick(insertPosition.children(':last').find('div.signid>span.iconDoubleClick'));
operationBtnEdit(insertPosition.children(':last').find('div.signid>div.opeartion>span.operationEdit'));
operationBtnDelete(insertPosition.children(':last').find('div.signid>div.opeartion>span.operationDelete'));
operationBtnAdd(insertPosition.children(':last').find('div.signid>div.opeartion>span.operationAdd'));
request = true;
alert("添加成功！");
},
error: function (data) {
if (!data || !data.success) {
}
//alert("修改数据失败！111");
}
});
});
};
$.ajax({
type: "GET",
url: "/Tree/GetTree",
data: {},
dataType: "json",
success: function (data) {
if (data) {
jsonData = data;
var html = initTree(data);
$('#treeview').html(html);
showOparetionTool();
operationToolBorder();
iconDoubleClick();
operationBtnEdit();
operationBtnDelete();
operationBtnAdd();
}
alert("加载成功！");
},
error: function (data) {
if (data && data.success) {
alert("获取数据失败！");
}
}
});
})
</script>
</body>
</html>