zTree樹插件動態加載

需求：

　　由於項目中家譜圖數據量超大，而一般加載方式是通過，頁面加載時 zTree.init方法進行數據加載，將所有數據一次性加載到頁面中。而在項目中家譜級別又非常廣而深，成千上萬級，因此一次加載，完全加載不出來。於是需要進行優化為動態加載（增量加載）的方式，以便數據加載，提高體驗度。

解決思路：

　　這應該好辦，只要找到父節點單擊事件，然后進行數據加載，結點附加即可。時間緊，任務重，完全沒給研究的時間。只能硬着上，隨便搜索一個“zTree動態加載”，出是出來了，標題也對，可里面的代碼根本沒找到添加結點一說……一邊是需求催，一邊是沒找到類似。無語……對啊，不是有官網，於是把所有api函數瀏覽一遍，終於發現一個叫addNodes的函數。喜！

控件代碼

<div class="UserTree">
    <ul id="treeDemo" class="ztree"></ul>
</div>

腳本代碼（實現結點展開、單擊事件時進行動態加載）：

<script>
    var zNodes;
    var zTree;
    $(function () {
        $.ajax({
            cache: true,
            type: "get",
            url: "/User/NextLeve",
            async: false,
            success: function (data) {
                zNodes = data;
            },
            error: function (data) {
                alert("error");
            }
        });
        zTree = ZTreeCustom.init($("#treeDemo"), setting, zNodes);
        zTree.expandAll(false);
        zTree.expandNode(zTree.getNodes()[0], true, false, true);

    })

    var setting = {
        view: {
            nameIsHTML: true
        },
        data: {
            simpleData: {
                enable: true
            },
            keep: {
                parent: true
            }
        },
        open: false,
        callback: {
            onClick: nodeClick,
            onExpand: function (event, treeId, treeNode) {
                addSubNode(treeNode);
            }
        }
    };
    function showIconForTree(treeId, treeNode) {
        return !treeNode.isParent;
    };

    function searchM() {
        var username = $("#txtName").val()

    }

    function nodeClick(event, treeId, treeNode, clickFlag) {
        addSubNode(treeNode);
    }

    function addSubNode(treeNode) {
        if (!treeNode.isParent) return;
        var s = treeNode.children;
        if (s != undefined)
            return;
        $.ajax({
            cache: true,
            type: "get",
            url: "/User/NextLeve",
            data: { userId: treeNode.id },
            async: true,
            success: function (data) {
                zTree.addNodes(treeNode, data);
            },
            error: function (data) {
                alert("error");
            }
        });

    }
</script>

其中后端請求：

　　其中數據來源為請求路徑“/User/NextLeve?userId=xxx”，為返回如下結構的列表的json數據（即List<UserNode>類型的.ToJson()數據），其中userId可為空，為空時默認取當前登錄用戶：

public class UserNode
{
    public long id { get; set; }
    public long pId { get; set; }
    public string name { get; set; }
    public bool open { get; set; }
    public bool isParent { get; set; }

    public string icon { get; set; }
}

效果，則實現為單擊父結點/展開父結點時動態加載子結點。

數據查詢思路：

先查詢出一級結點內容，及其對應二級結點數：

-- 家譜圖數據源
SELECT u.Id,u.UserName INTO #tempParent  FROM User_User AS u WHERE  u.ParentId=80 -- 父用戶id
SELECT u.Id,u.UserName,t.ChildCount FROM #tempParent u LEFT JOIN (SELECT p.Id,COUNT(1) ChildCount FROM T_User u
INNER JOIN #tempParent p ON p.Id=u.ParentId
GROUP BY p.Id
) T ON t.Id = u.Id