Ztree树形动态加载数据

一、引入ztree样式和js

<link rel="stylesheet" href="${pageContext.request.contextPath}/abacus/_res_/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/abacus/_res_/js/lib/jquery.ztree.core.min.js"></script>

二、添加树形样式

<div id="menuContent" class="menuContent" style="display:none; position: absolute; z-index:9999">
   <ul id="treeDemo"  class="ztree" style="margin-top:0; width:160px;height:520px; overflow-x: scroll; overflow-y: scroll; border: 1px solid #617775;background: #fff;"></ul>
</div>

这是我的表单，

<td style="width:130px;" align="middle">所属税务机关：</td>
<td style="width:200px;">
   <input type="text" id="nsrswjgmc"  class="nsrswjgmc"  style="width:200px;" readonly="readonly"/>
   <input type="text" id="nsrswjgDm"  class="nsrswjgDm"  style="display:none;"/>
</td>

三、js部分

$(function(){
    //给税务机关赋值
    var nsrswjgmc_default = $("#bjswjgmc").val();
    var nsrswjgDm_default = $("#swjgDm").val();
    $("#nsrswjgmc").val(nsrswjgmc_default);
    $("#nsrswjgDm").val(nsrswjgDm_default);
    //树状查询并展示
    var setting = {
        view : {
            dblClickExpand : false
        },
        data : {
            simpleData : {
                enable : true,
                idKey: "id", //设置启用简单数据格式时id对应的属性名称
                pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结
            }
        },
        callback : {

            onClick : function(event, treeId, treeNode, clickFlag) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree
                    .getSelectedNodes(), id_ = "", v = "";
                nodes.sort(function compare(a, b) {
                    return a.id - b.id;
                });
                for (var i = 0, l = nodes.length; i < l; i++) {
                    v += nodes[i].name + ",";
                    id_ = nodes[i].id
      /*alert(nodes[i].PId);*/
                }
                if (v.length > 0)
                    v = v.substring(0, v.length - 1);
                $("#nsrswjgmc").val(v);
                $("#nsrswjgDm").val(id_);

                hideMenu();
                //$.fn.zTree.init($("#treeDemo"), setting, []);
            }
        }
    };

    $("#nsrswjgmc").click(function(){

        var eleOffset = $(this).offset();
        var width=$(this).width();
        $("#menuContent").css({
            left : eleOffset.left + "px",
            top : eleOffset.top + $(this).outerHeight() + "px",
            width : width+"px"
        }).show();
        $("#treeDemo").css({
            width : width+"px"
        });
        var _url = "${pageContext.request.contextPath}/sssxCxtj/getSwjgByTop.do?swjgDm=${swjgDm}";
        $.getJSON(_url, function(data) {
            if (data !== "" || data !== undefined) {
                console.log(data);
                $.fn.zTree.init($("#treeDemo"), setting, data);//展开下拉树控件
            } else {
                console.log("返回数据为空，不能初始化tree;");
            }
        });
        $("body").bind("mousedown", onBodyDown);
    });

    function hideMenu() {
        $("#menuContent").hide();
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuContent" || $(event.target).parents(
                "#menuContent").length > 0)) {
            hideMenu();
        }
    }

});

四、java后台部分代码

1、实体必须包括以下字段：

private String id;//税务机关代码

private String name;//税务机关名称

private String pId;//上级税务机关代码

2、从数据库中获取list数据

List<Swjg> swjgList = iSwjgSvc.getSwjgByCode(likswjg);
String treeNodesJson = JSONArray.fromObject(swjgList).toString();//将list列表转换成json格式 返回
String newTreeNodesJson = treeNodesJson.replaceAll("PId","pId");
PrintWriter out = null;
try {
    out = response.getWriter();
} catch (IOException e) {
    e.printStackTrace();
}
//利用Json插件将Array转换成Json格式
out.print(newTreeNodesJson);
//释放资源
out.close();

五、效果如下

Ztree树形动态加载数据

六、总结

请注意，后台获取list转json时，json的格式中必须包含以下三个字段：id，name，pId（注意大小写）

否则树形加载失败。