位置:首页 » 文章/教程分享 » Ztree 默认展开二级菜单

我们初始化完树型菜单的数据后,有时候需要默认展开菜单给用户直观的感受。在初始加载树形控件的时候调用zTree的expandNode (node, expandFlag, sonSign, focus, callbackFlag)方法就可以实现这样的效果。


node:树形节点
expandFlag:是否展开节点
sonSign:是否展开其子孙节点
focus:展开或折叠节点后是否设置焦点
callbackFlag:这行该方法是否触发回调函数

var zNodes = "";
 
        var setting = {
            check: {
                enable: true
            },
            data: {//数据加载
                keep: {
                    parent: true,
                    leaf: true
                },
                simpleData: {
                    enable: true,
                    idKey: "Id",
                    pIdKey: "Pid",
                },
                key: {
                    name: "Name"
                }
            }
        };
 
function Inint() {//初始化加载节点
            $.ajax({
                global: true,
                async: false,
                cache: false,
                dataType: "json",
                url: '../Ajax/test.ashx',
                type: "post",
                //data: { "roleId": GetQueryString("roleId") },
                success: function (data) {
                    zNodes = data;
                }
            });
        };
 
$(function () {
            Inint(); //加载数据
            $.fn.zTree.init($("#zTree"), setting, zNodes);
 
            var treeObj = $.fn.zTree.getZTreeObj("zTree");
            var nodes = treeObj.getNodes();
            for (var i = 0; i < nodes.length; i++) { //设置节点展开
                treeObj.expandNode(nodes[i], true, false, true);
            }
        });
相应的html代码如下:
<div class="control" style="overflow: auto; height:270px;">
            <ul id="zTree">
            </ul>
</div>