最近完成了一個可以拖拽的異步按需加載樹，顧名思義，這個樹，至少支持以下三個功能。

1，節(jié)點可以拖拽（項目需要，已設置為只允許同級節(jié)點拖拽）。

2，異步加載（使用ajax加載數(shù)據(jù)，沒啥好說的）。

3，按需要加載（點擊展開按鈕時，加載所需數(shù)據(jù)，不點擊不加載，最小化的加載數(shù)據(jù)，最大化的支持大數(shù)據(jù)，哈哈）。

下面就這三個功能，分別貼出關鍵代碼。

一，節(jié)點可以拖拽需要添加的代碼。

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}

至此拖拽功能基本實現(xiàn)，詳細代碼請自行扒下。

二:異步加載（使用ajax加載數(shù)據(jù)，沒啥好說的），代碼略。

三：按需要加載（點擊展開按鈕時，加載所需數(shù)據(jù)，不點擊不加載）

1，在callback屬性中加載如下代碼，并新建方法beforeExpand，為什么是beforeExpand而不是onExpand呢，是因為在這個樹中，預加載比加載完成后顯示效果好。

callback: {beforeExpand: beforeExpand}

并且這里有個小技巧：若節(jié)點存在子節(jié)點，就讓其前面以文件夾圖標顯示，方法如下。

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(','), "]");
}

這里如果有子節(jié)點，不管多少，虛加載一個名字為本人名字的節(jié)點，當然這個子節(jié)點在父節(jié)點展示時，自然會被干掉，同時真正的節(jié)點加載進來，并同時判斷這一級節(jié)點是否有子節(jié)點，代碼如下：

function beforeExpand(treeId, treeNode) {if (treeNode.children) {for (i = 0; i < treeNode.children.length; i++) {zTree.removeNode(treeNode.children[i]);}}if (treeNode.children) {for (i = 0; i < treeNode.children.length; i++) {zTree.removeNode(treeNode.children[i]);}}$.post("/Ashx/FileType.ashx?action=GetList", { parentId: treeNode.id }, function (txt) {var childNodes = eval(txt);for (i = 0; i < childNodes.length; i++) {var newNode = { id: childNodes[i].id, name: childNodes[i].name, children: childNodes[i].children, childOuter: false };addTreeNode(treeNode, newNode);}}, "text");return (treeNode.expand !== false);}

這里判斷清除children用了兩次，不得已，因為只清除一次，有子節(jié)點的節(jié)點不會被清除，所以需要清除兩次，若是有人有更好的辦法，一次就清除，不吝賜教。

（找到問題的原因了，清除子節(jié)點的代碼應該改為：

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

這段代碼有意思，呵呵。2月16號備注。

）

至此，一個可以拖拽的異步按需加載樹就基本完成，當然這個樹，還不只這點功能，比如右鍵增加、刪除節(jié)點，比如修改節(jié)點等等，都一一實現(xiàn)，更多效果，請查看demo網址：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

總結

以上是生活随笔為你收集整理的一个可以拖拽的异步按需加载树的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。