前端:
有待完善
<div class="x-body">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>开启节点操作图标</legend>
</fieldset>
<div id="test2" class="demo-tree demo-tree-box" style=" height: 300px; overflow: scroll;"></div>
</div>
<div id="add-node" class="x-body" style="display: none;">
<form class="layui-form" id="add-form" action="">
<input type="text" id="NodeID" name="id" style="display:none;" class="layui-input">
<div class="layui-form-item center">
<label class="layui-form-label" style="width: 100px">节点名字</label>
<div class="layui-input-block">
<input type="text" name="title" style="width: 240px" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="addnode">确定</button>
</div>
</div>
</form>
</div>
<div id="edit-node" class="x-body" style="display: none;">
<form class="layui-form" id="add-form" action="">
<input type="text" id="nodeId" name="id" style="display:none;" class="layui-input">
<div class="layui-form-item center">
<label class="layui-form-label" style="width: 100px">节点名字</label>
<div class="layui-input-block">
<input type="text" id="Title" name="title" style="width: 240px" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="editnode">确定</button>
</div>
</div>
</form>
</div>
js部分
<script>
layui.use(['tree', 'form'], function () {
var tree = layui.tree
, form = layui.form
, layer = layui.layer;
var index0pen;
$.ajax({
type: 'post',
url: '/Home/GetTree',
dataType: 'json',
success: function (data) {
//开启节点操作图标
tree.render({
elem: '#test2'
, data: data
, edit: ['add', 'update', 'del'] //操作节点的图标
, operate: function (obj) {
var type = obj.type; //得到操作类型:add、edit、del
var data = obj.data; //得到当前节点的数据
var elem = obj.elem; //得到当前节点元素
//Ajax 操作
var id = data.id; //得到节点索引
if (type === 'add') { //增加节点
$("#NodeID").val(id);
index0pen = layer.open({
type: 1,
title: "新增",
area: ['500px', '200px'],
content: $("#add-node"),
});
} else if (type === 'update') { //修改节点
//console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
$("#nodeId").val(id);
$("#Title").val(data.title);
index0pen = layer.open({
type: 1,
title: "编辑",
area: ['500px', '200px'],
content: $("#edit-node"),
});
} else if (type === 'del') { //删除节点
$.ajax({
url: '/Home/DelNode',
type: 'post',
dataType: 'json',
data: {
nodeid: id
},
success: function (r) {
if (r > 0) {
layer.msg('删除成功', { icon: 6 });
} else {
layer.msg('删除失败', { icon: 5 });
}
},
error: function (s) {
layer.msg('删除出错了');
}
});
};
}
});
},
error: function (s) {
layer.msg('出错了');
}
});
form.on('submit(addnode)', function (data) {
var nodeData = data.field;
$.ajax({
url: '/Home/AddNode',
type: 'post',
dataType: 'json',
data: {
nodetext: nodeData.title,
nodepid: nodeData.id
},
success: function (r) {
if (r > 0) {
layer.msg('添加成功', { icon: 6 });
layer.close(index0pen);
} else {
layer.msg('添加失败', { icon: 5 });
}
},
error: function (s) {
layer.msg('保存出错了');
}
});
return false;
});
form.on('submit(editnode)', function (data) {
var nodeData = data.field;
$.ajax({
url: '/Home/EditNode',
type: 'post',
dataType: 'json',
data: {
nodetext: nodeData.title,
nodeid: nodeData.id
},
success: function (r) {
if (r > 0) {
layer.msg('修改成功', { icon: 6 });
layer.close(index0pen);
} else {
layer.msg('修改失败', { icon: 5 });
}
},
error: function (s) {
layer.msg('修改出错了');
}
});
return false;
});
});
</script>
后端部分
public ActionResult GetTree()
{
using (MySqlContext db = new MySqlContext())
{
List<Tree> list = new List<Tree>();
List<Trees> trees = db.Trees.ToList();
foreach (var item in trees)
{
Tree m = new Tree();
if (item.Pid == 0)
{
m.NodeLevel = 1;
m.id = item.Id;
m.title = item.Title;
m.pid = item.Pid;
m.children = GetChildren(trees,item.Id,1);
list.Add(m);
}
}
return Content(JsonConvert.SerializeObject(list));
}
}
//递归加载tree
public List<Tree> GetChildren(List<Trees> trees,int id,int level)
{
List<Tree> list = new List<Tree>();
using (MySqlContext db = new MySqlContext())
{
if (level == 5)
{
var listTree = db.Trees.Where(r => r.Pid == id).ToList();
if (listTree != null)
{
foreach (var item in listTree)
{
Tree tree1 = new Tree();
tree1.id = item.Id;
tree1.title = item.Title;
tree1.pid = item.Pid;
tree1.NodeLevel = level;
list.Add(tree1);
}
}
return list;
}
else if (level < 5)
{
List<Trees> listTree = trees.FindAll(e => e.Pid == id);
if (listTree != null)
{
level++;
int index = level;
foreach (var items in listTree)
{
Tree tree2 = new Tree();
tree2.id = items.Id;
tree2.title = items.Title;
tree2.pid = items.Pid;
tree2.NodeLevel = index;
if (trees.FindAll(e => e.Pid == items.Id).Count > 0)
{
tree2.children = GetChildren(trees, items.Id, level);
}
if (level == 4)
{
tree2.children = GetChildren(trees, items.Id, 5);
}
list.Add(tree2);
}
}
}
return list;
}
}
[HttpPost]
public ActionResult AddNode(string nodetext, string nodepid)
{
int result = 0;
var pid = Convert.ToInt32(nodepid);
using (MySqlContext db = new MySqlContext())
{
Trees data = new Trees
{
Pid = pid,
Title = nodetext
};
db.Trees.Add(data);
result = db.SaveChanges();
}
return Content(result.ToString());
}
public ActionResult EditNode(string nodetext, string nodeid)
{
int result = 0;
var id = Convert.ToInt32(nodeid);
using (MySqlContext db = new MySqlContext())
{
var hasNode = db.Trees.Find(id);
if (hasNode != null)
{
hasNode.Title = nodetext;
result = db.SaveChanges();
}
}
return Content(result.ToString());
}
public ActionResult DelNode(string nodeid)
{
int result = 0;
var id = Convert.ToInt32(nodeid);
using (MySqlContext db = new MySqlContext())
{
var hasNode = db.Trees.Find(id);
if (hasNode != null)
{
db.Trees.Remove(hasNode);
result = db.SaveChanges();
}
}
return Content(result.ToString());
}
每天学习一点记录一点进步一点