一个可以拖拽的异步按需加载树

傷城~ 2022-01-10 07:21 280阅读 0赞

最近完成了一个可以拖拽的异步按需加载树，顾名思义，这个树，至少支持以下三个功能。

1，节点可以拖拽（项目需要，已设置为只允许同级节点拖拽）。

2，异步加载（使用ajax加载数据，没啥好说的）。

3，按需要加载（点击展开按钮时，加载所需数据，不点击不加载，最小化的加载数据，最大化的支持大数据，哈哈）。

下面就这三个功能，分别贴出关键代码。

一，节点可以拖拽需要添加的代码。

1，先对树型控件的setting变量增加如下属性，并添加dropPrev，dropInner，dropNext方法，具体方法内容，请点击后面demo中网址右键。

edit: {
                    enable: true,
                    showRemoveBtn: false,
                    showRenameBtn: false,
                    drag: {
                        autoExpandTrigger: true,
                        prev: dropPrev,
                        inner: dropInner,
                        next: dropNext
                    }
                }

2，在callback属性中加载如下代码，并分别新建两个方法beforeDrag和beforeDrop

callback: {
                    beforeDrag: beforeDrag,
                    beforeDrop: beforeDrop
                }

至此拖拽功能基本实现，详细代码请自行扒下。

二:异步加载（使用ajax加载数据，没啥好说的），代码略。

三：按需要加载（点击展开按钮时，加载所需数据，不点击不加载）

1，在callback属性中加载如下代码，并新建方法beforeExpand，为什么是beforeExpand而不是onExpand呢，是因为在这个树中，预加载比加载完成后显示效果好。

callback: {
                    beforeExpand: beforeExpand
                }

并且这里有个小技巧：若节点存在子节点，就让其前面以文件夹图标显示，方法如下。

public string GetList()  
\{  
string parentId = RequestExtension.GetForm<String>("parentId", "");  
if (String.IsNullOrEmpty(parentId))  
\{  
parentId = new Guid().ToString();  
\}

StringBuilder treeSb = new StringBuilder("\[");

var list = fileTypeRepository.GetFileTypeByParentId(new Guid(parentId));

foreach (var item in list)  
\{  
treeSb.Append(string.Concat("\{'id':'", item.ID, "'"));  
treeSb.Append(string.Concat(",'name':'", item.TypeName.Trim(), "'"));

var childList = fileTypeRepository.GetFileTypeByParentId(item.ID);  
if (childList.Count > 0)  
\{  
treeSb.Append(",'isParent':true");  
\}  
else  
\{  
treeSb.Append(",'isParent':false");  
\}

treeSb.Append("\},");  
\}  
return String.Concat(treeSb.ToString().TrimEnd(','), "\]");  
\}

这里如果有子节点，不管多少，虚加载一个名字为本人名字的节点，当然这个子节点在父节点展示时，自然会被干掉，同时真正的节点加载进来，并同时判断这一级节点是否有子节点，代码如下：

这里判断清除children用了两次，不得已，因为只清除一次，有子节点的节点不会被清除，所以需要清除两次，若是有人有更好的办法，一次就清除，不吝赐教。

（找到问题的原因了，清除子节点的代码应该改为：

var childCount = treeNode.children.length;
                    for (i = 0; i < childCount; i++) {            
                        zTree.removeNode(treeNode.children[0]);            
                    }

这段代码有意思，呵呵。2月16号备注。

）

至此，一个可以拖拽的异步按需加载树就基本完成，当然这个树，还不只这点功能，比如右键增加、删除节点，比如修改节点等等，都一一实现，更多效果，请查看demo网址：[http://www.qicheba.net/FileManage/TypeManage][http_www.qicheba.net_FileManage_TypeManage]

如果觉得有用，请猛击推荐，谢谢。

备注：这个Demo使用了一款功能强大的树型控件，名字叫：zTree，官网地址：http://www.ztree.me/v3/demo.php\#\_101

转载于:https://www.cnblogs.com/ushou/archive/2013/01/31/2888249.html

[http_www.qicheba.net_FileManage_TypeManage]: http://www.qicheba.net/FileManage/TypeManage