zTree实现异步加载数据(使用SPRING MVC4+mybatis3.8)

1.先看效果
图一 初始化状态

图二 点击根节点(凯顿儿童美语ERP信息系统)自动加载第一层子节点(登录、注册等子节点)

图三 点击登录子节点会自动加载第三层子节点

2.代码
创建一个html文件interfaceManager.html，引入相关js文件，css文件

<link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css"
    type="text/css">
<script src="../js/jquery-ui-1.11.4/jquery.js"></script>
<!-- 
<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script> -->
<script type="text/javascript"
    src="../js/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript"
    src="../js/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript"
    src="../js/ztree/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript" src="../js/interface/interfaceManager.js"></script>

然后在interfaceManager.html文件中定义一个div代码如下

<div id="menuTree"
            style="width: 200px; border: 1px solid #f6a828; float: left;">
            <ul id="tree" class="ztree" style="width: 260px; overflow: auto;"></ul>
        </div>

然后初始化zTree 代码在interfaceManager.js文件中 代码如下

$(document).ready(function() {
var setting = {
    async : {
        enable : true,//是否异步加载
        url : '../interface/getTreeNodes.do',//加载数据的url
        data : {
            simpleData : {
                enable : true,
                idKey : "id",
                pIdKey : "parentTid",
                rootPId : '0'
            }
        },
        autoParam : [ "id"],//异步发送请求时,表示自动传指定属性的参数值
        dataFilter : function(treeId, parentNode, childNodes) {//这里由于本人设置的节点属性跟zTree不一致所以进行了过滤
            if (!childNodes)
                return null;
            for (var i = 0, l = childNodes.length; i < l; i++) {
                childNodes[i].count = childNodes[i].childrenCount;
                if (childNodes[i].count && parseInt(childNodes[i].count) > 0) {
                    //当主节点  下面还有父节点时自动将isParent=true
                    //这样点击父节点zTree会自动再加载其子节点的数据
                    childNodes[i].isParent = true;
                }
                childNodes[i].type = header_type;
            }
            return childNodes;
        }
    },
    callback : {
        beforeClick : beforeClick
    }
};
});

function beforeClick(treeId, treeNode) {// 表示若没有子节点父节点不再加载
    if (!treeNode.parent) {
        return false;
    } else {
        return true;
    }
}

初始化zTree
$.fn.zTree.init($("#tree"), setting, [ {
            'id' : '0',
            "name" : '凯顿儿童美语ERP信息系统',
            'type' : 1,
            'isParent' : true
        } ]);

后台实现
先定义一个model类

/**
     * kd_develop_interface.id (id)
     * 
     * @ibatorgenerated 2016-01-11 13:48:05
     */
    private String id;

    /**
     * kd_develop_interface.parent_tId (父节点id)
     * 
     * @ibatorgenerated 2016-01-11 13:48:05
     */
    private String parentTid;

    /**
     * kd_develop_interface.name (节点名称/接口描述)
     * 
     * @ibatorgenerated 2016-01-11 13:48:05
     */
    private String name;

Controller类

@Controller
@RequestMapping("/interface")
public class InterfaceInfoController {
    @Autowired
    private InterfaceInfoService interfaceInfoService;

    @RequestMapping("/getTreeNodes")
    @ResponseBody
    public List<TreeNode> getTreeNodes(@RequestParam("id") String parentId) {
        try {
            return interfaceInfoService.getTreeNodes(parentId);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }



}

@Component
public class InterfaceInfoService {
    @Autowired
    private KdDevelopInterfaceDao kdDevelopInterfaceDao;

    public List<TreeNode> getTreeNodes(String parentId) {
        Map<String, Object> params = new HashMap<String, Object>();
        params.put("parentId", parentId);
        List<TreeNode> treeNodes = kdDevelopInterfaceDao.getTreeNodes(params);
        if (treeNodes != null) {
            TreeNode treeNode = null;
            for (int i = 0; i < treeNodes.size(); i++) {
                treeNode = treeNodes.get(i);
                if (null != treeNode.getChildrenCount() && treeNode.getChildrenCount() > 0) {
                    treeNode.setParent(true);
                }
            }
        }
        return treeNodes;
    }

}

sql

<select id="getTreeNodes" resultMap="TreeNodesMap" parameterType="map">
        SELECT di.id,di.`name`,di.parent_tId,children_Count from kd_develop_interface di   where di.parent_tId=#{父节点}  order by id asc
</select>

后期上传源码