首页 技术 正文
技术 2022年11月21日
0 收藏 868 点赞 4,690 浏览 7673 个字

找了很多网上关于Ztree的例子和代码才搞定。

首先,关于Ztree的代码不介绍了,网上下载之后,引用下列四个文件就能使用了。

可编辑树Ztree的使用(包括对后台数据库的增删改查)

可编辑树Ztree的使用(包括对后台数据库的增删改查)

1.关于配置选项。主要通过回调函数来实现向后台发送数据,实现增删改查。

  var setting = {
view: {
addHoverDom: addHoverDom,//显示操作图标
removeHoverDom: removeHoverDom,//移除图标
selectedMulti: false
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
onRename: zTreeOnRename,//修改
onRemove: zTreeOnRemove,//删除
onClick: zTreeOnClickRight, },
edit: {
enable: true,
showRemoveBtn: true,
showRenameBtn: true,
removeTitle: "删除",
renameTitle: "修改"
}
};
 $(document).ready(function () {
$.ajax({
url: "GetZtreeJson",
data: { ProjectId: "@ViewBag.ProjectId" },
type: "post",
dataType: "json",
success: function (data) {
$.fn.zTree.init($("#test"), setting, data);//实现加载树的方法
}
})
$("#btnReturn").click(function () {
window.parent.frameReturnByClose();
});
//$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}); var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("test");
//增加节点的方法
$.ajax({
url: "AddNode",
data: { ParentId: treeNode.id },
type: "post",
success: function (data) {
if (data.message == "success") {
//此方法是js在前段增加节点方法,一定要通过后台返回的id来增加,不然新增的节点会出现节点id为null的问题
zTree.addNodes(treeNode, { id: data.id, ParentId: treeNode.id, name: "new node" + (newCount++) });
}
else {
$.messageBox5s('@Resource.Tip', "新增节点失败!联系管理员!");
}
}
}) return false;
});
};
//删除节点
function zTreeOnRemove(event, treeId, treeNode) {
{
$.ajax({
url: "DeleteNode",
type: "post",
data: { NodeId: treeNode.id },
success: function (data) {
if (data == "success") { }
else {
$.messageBox5s('@Resource.Tip', "删除节点失败!联系管理员!");
}
}
})
}
} function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove(); };
//修改节点
function zTreeOnRename(event, treeId, treeNode) {
$.ajax({
url: "EditNode",
type: "post",
data: { NodeId: $.trim(treeNode.id), name: treeNode.name },
success: function (data) {
if (data != "success") {
$.messageBox5s('@Resource.Tip', "修改节点失败!联系管理员!");
}
}
})
};
// 树的单击事件
function zTreeOnClickRight(event, treeId, treeNode) {
var treeid = treeNode.id;
$("#hidId").val(treeid); $("#ifm").attr("src", "FileView?NodeId=" + treeid);
} function treeShow(data) {
zTreeObj = $.fn.zTree.init($("#test"), setting, data);
zTreeObj.expandAll(true);
}

2.后台处理的方法。。我项目中是使用C#代码写的,mvc框架

  [Description("项目资料-树形")]
[KeyCode(Name = "Tree")]
[IsModule]
[SupportFilter(ActionName = "Tree")]
public ActionResult TreeIndex(Guid ProjectId)
{ ViewBag.ProjectId = ProjectId;
var ProjectCode = IProjectContract.GetProjectInputById(ProjectId).ProjectCode;
string count = ProjectResourceContract.CountNumber(ProjectCode);
ViewBag.Count = count;
return View();
} public JsonResult GetZtreeJson(Guid ProjectId)
{
var list = ProjectResourceContract.GetNodeJsonByProject(ProjectId); return Json((from p in list
select new
{
id = p.Id,
pId = p.pid,
open = "true",
name = p.name
}).ToList());
}
public JsonResult AddNode(string ParentId)
{
int sort = ProjectResourceContract.GetLastNodeSortFormParent(ParentId);
//string nodeid = ProjectResourceContract.GetCurrentNewNodeId(ParentId);
if (sort == )
{
var node = ProjectResourceContract.GetNodeByNodeId(ParentId);
node.type = "";
ProjectResourceContract.EditNode(ParentId, node.type);
}
Guid nodeId = Guid.NewGuid();
var ProjectCode = ProjectResourceContract.GetNodeByNodeId(ParentId).ProjectCode;
var result = ProjectResourceContract.AddNode(new TB_Project_Nodes()
{
Id = nodeId,
name = "New Node" + sort,
type = "",
pid = ParentId,
sort = sort,
state = "true",
ProjectCode = ProjectCode,
});
if (result.Successed)
{
return Json(new { message = "success", id = nodeId });
}
else
{
return Json("error");
}
}
public JsonResult DeleteNode(string NodeId)
{
var result = ProjectResourceContract.DeleteNode(NodeId);
if (result.Successed)
{
return Json("success");
}
else
{
return Json("error");
}
}
public JsonResult EditNode(string NodeId, string name, string path = "", string ProjectCode = "")
{
OperationResult result;
if (!string.IsNullOrEmpty(path))
{
path = path.TrimEnd('+'); path = "UpDir/" + ProjectCode + "/施工资料/" + path;
result = ProjectResourceContract.EditNode(NodeId, name, path);
}
else
{
result = ProjectResourceContract.EditNode(NodeId, name, "");
}
if (result.Successed)
{
return Json("success");
}
else
{
return Json("error");
}
}

我项目中的情况是需要用ztree来实现创建目录,然后上传施工资料的方法。所以,projectid字段,大家不需要在意。是项目的id

3.给大家看一下我的数据库字段设计,附上关于增删改查操作数据库的代码。

可编辑树Ztree的使用(包括对后台数据库的增删改查)

可编辑树Ztree的使用(包括对后台数据库的增删改查)

这里顶级节点的pid为0,其次projectcode是我项目中使用到的,可以不用考虑。state本来是用于ztree中open配置信息用的。默认展开节点的配置。

type是我用于判断此节点是否包是文件节点用的。(包含子节点的为文件夹节点,没有子节点的就是文件节点)

4.serveices代码

  //获取树所有节点显示
public List<TB_Project_Nodes> GetNodeJsonByProject(Guid ProjectId)
{ var project = ProjectsRepository.GetByKey(ProjectId);
string TopNode = project.ProjectCode;
List<TB_Project_Nodes> ALLLIST = NodesRepository.Entities.Where(t => t.ProjectCode == TopNode).ToList();
//var top = NodesRepository.Entities.FirstOrDefault(t => t.Id.ToString() == TopNode);
TB_Project_Nodes top = ALLLIST.FirstOrDefault(t => t.ProjectCode == TopNode&&t.pid=="");
if (top == null)//第一次创建
{
TB_Project_Nodes pn = new TB_Project_Nodes() { ProjectCode = TopNode, Id = Guid.NewGuid(), type = "", pid = "", sort = , name = project.ProjectName, state = "true" };
NodesRepository.Insert(pn);
return new List<TB_Project_Nodes>() { pn };
}
else//存在顶级节点
{ //List<TB_Project_Nodes> nodes = NodesRepository.Entities.Where(t => t.pid == TopNode).OrderBy(t => t.sort).ToList();//顶级节点下面的一级节点
List<TB_Project_Nodes> nodes = ALLLIST.Where(t => t.pid == top.Id.ToString()).OrderBy(t => t.sort).ToList();//顶级节点下面的一级节点 if (nodes.Count <= )//没有子节点
{
return new List<TB_Project_Nodes>() { top };
}
else//存在子节点,遍历所有的子节点
{ List<TB_Project_Nodes> LIST = new List<TB_Project_Nodes>();
LIST.Add(top);
LIST.AddRange(nodes); //添加一级节点 LIST = Test(nodes, LIST, ALLLIST); return LIST;
} } }
//递归函数---把所有二级节点以及以下所有节点获取
public List<TB_Project_Nodes> Test(List<TB_Project_Nodes> list, List<TB_Project_Nodes> LIST, List<TB_Project_Nodes> ALLLIST)
{
List<TB_Project_Nodes> NEWLIST = new List<TB_Project_Nodes>();
foreach (var item2 in list)
{
var secondNodes = ALLLIST.Where(t => t.pid == item2.Id.ToString()).OrderBy(t => t.sort).ToList();
if (secondNodes.Count > )
{ NEWLIST.AddRange(secondNodes);
}
}
LIST.AddRange(NEWLIST);
//已经添加完本级节点
//添加下一级节点
if (NEWLIST.Count > )
{
Test(NEWLIST, LIST, ALLLIST);
}
return LIST;
}
//增加节点信息
public OperationResult AddNode(TB_Project_Nodes node)
{ int result = NodesRepository.Insert(node);
if (result == )
{
return new OperationResult(OperationResultType.Error, "error");
}
else
{
return new OperationResult(OperationResultType.Success, "success");
} }
/// <summary>
/// 修改节点类型
/// </summary>
/// <param name="NodeId"></param>
/// <param name="type"></param>
/// <returns></returns>
public OperationResult EditNode(string NodeId, string type)
{
var node = NodesRepository.Entities.FirstOrDefault(t => t.Id.ToString() == NodeId);
node.type = type;
int result = NodesRepository.Update(node);
if (result == )
{
return new OperationResult(OperationResultType.Error, "error");
}
else
{
return new OperationResult(OperationResultType.Success, "success");
}
} /// <summary>
/// 获取父级节点下面最大的一个排序+1
/// </summary>
/// <param name="ParentId"></param>
/// <returns></returns> public int GetLastNodeSortFormParent(string ParentId)
{
var list = NodesRepository.Entities.Where(t => t.pid == ParentId).OrderByDescending(t => t.sort).ToList();
if (list.Count <= )
{
return ;
}
else
{
return list[].sort + ;
}
} /// <summary>
/// 删除此节点时候,要把下面所有子节点删除
/// </summary>
/// <param name="NodeId"></param>
/// <returns></returns>
public OperationResult DeleteNode(string NodeId)
{
List<TB_Project_Nodes> ALLLIST = NodesRepository.Entities.ToList();
// var node = NodesRepository.Entities.FirstOrDefault(t => t.Id.ToString() == NodeId);
var node = ALLLIST.FirstOrDefault(T => T.Id.ToString() == NodeId);
//获取下面的所有子节点
List<TB_Project_Nodes> LIST = new List<TB_Project_Nodes>();
LIST.Add(node);
var list = ALLLIST.Where(t => t.pid == NodeId).ToList();
if (list.Count > )
{
LIST.AddRange(list);
LIST = Test(list, LIST, ALLLIST);
}
for (int i = LIST.Count - ; i >= ; i--)
{
try
{
int result = NodesRepository.Delete(LIST[i].Id);
}
catch (Exception ex)
{
return new OperationResult(OperationResultType.Error, "error");
throw ex;
} } return new OperationResult(OperationResultType.Success, "success"); }
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,022
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,513
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,359
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,142
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,773
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,851