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

 

转载于:https://www.cnblogs.com/dralee/p/6839790.html