jquery zTree 入门，从后台获取数据

 

一、java action 代码：

public void displayTree() {
        String id = ServletActionContext.getRequest().getParameter("id");
        log.info("################" + id);
         log.info("display department tree");
         if(treeId == null || "".equals(treeId.trim())) {
             treeId = "0";
         }
         log.info("Node节点id是：" + treeId);
         List<SmDepartment> deptList = null;
         try {
             deptList = departmentService.getDeptByPid(treeId);
         } catch(Exception e) {
             e.printStackTrace();
         }
         JSONArray json = new JSONArray();
          if(deptList != null) {
              for(SmDepartment dept : deptList) {
                  String line = String.format("{id:\"%s\", pId:\"%s\", name:\"%s\", isParent:%s}", dept.getDepartmentId(), dept.getParent(),dept.getName(),true);
                  log.info(line);
                  json.put(line);
              }
             print2web(json.toString());
          } else {
              log.info("没有部门信息");
              print2web("no");
          }
    }
    
    private boolean print2web(String content) {
        //HttpServletRequest response = (HttpServletRequest) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
        PrintWriter out = null;
        try {
            out = ServletActionContext.getResponse().getWriter();
            ServletActionContext.getResponse().setContentType("application/json");
            ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
            out.write(content);
            out.flush();
            out.close();
            return true;
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            out.flush();
            out.close();
        }
        return false;
    }

二、需要的包：

<link rel="stylesheet" type="text/css" href="<s:url value='/css/zTreeStyle/zTreeStyle.css'/>" />
<script type="text/javascript" charset="utf-8" src="<s:url value='/script/jquery-1.4.4.min.js'/>"></script>
<script type="text/javascript" charset="utf-8" src="<s:url value='/script/jquery.ztree.core-3.5.js'/>"></script>
<script type="text/javascript" charset="utf-8" src="<s:url value='/script/jquery.ztree.excheck-3.5.js'/>"></script>

<style type="text/css">
ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
</style>

三、前台js代码

<SCRIPT type="text/javascript">
var setting = {
    view: {         
            selectedMulti: false
    },
    async: {
            enable: true,
            type: "post",
            url: getUrl,
            contentType:"application/json",
            dataFilter : filter
    },
    check: {
        enable: true,
        chkStyle: "radio",
        radioType: "all"
    },
    view: {
        dblClickExpand: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick: onClick,
        onCheck: onCheck
    }
};

function getUrl(treeId, treeNode) {
    var param = "";
    if(treeNode) {
        param = "?treeId=" + treeNode.id
    }
    return "displayTree" + param;
}
function filter(treeId, parentNode, childNodes) {
    var str = "[" + childNodes + "]";
    var obj = eval(str);
    return obj;    
}

    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }

    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"), 
        nodes = zTree.getCheckedNodes(true),
        //treeNode name
        v = "";
        for ( var i = 0, l = nodes.length; i < l; i++) {
            v += nodes[i].name + ",";
        }
        if (v.length > 0) {
            v = v.substring(0, v.length - 1);
        }
        var cityObj = $("#citySel");
        cityObj.attr("value", v);
        //treeNode id
        var objId = "";
        for ( var i = 0, l = nodes.length; i < l; i++) {
            objId += nodes[i].id + ",";
        }
        if(objId.length > 0) {
            objId = objId.substring(0, objId.length-1);
        }
        var cityObjId = $("#citySelId");
        cityObjId.attr("value", objId);
        hideMenu();
    }

    function showMenu() {
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();

        $.fn.zTree.init($("#treeDemo"), setting);

        $("#menuContent").css({
            left : cityOffset.left + 90 + "px",
            top : cityOffset.top + cityObj.outerHeight() + "px"
        }).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "citySel"
                || event.target.id == "menuContent" || $(event.target).parents(
                "#menuContent").length > 0)) {
            hideMenu();
        }
    }
</SCRIPT>

四、html代码：

<tr class="tr5">
                        <td class="td1"><span style="color:#ff0000">*</span>发送部门：</td>
                        <td>
                            <div class=""><!-- content_wrap  -->
                            <div class=""><!-- zTreeDemoBackground left  -->
                                <ul class=""><!-- list  -->
                                    <input id="citySel" type="text" readonly value="" style="width:120px;" onclick="showMenu();" >
                                    <br><input id="citySelId" type="text" value=""/>
                                </ul>
                            </div>
                        </div>
                        <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
                            <ul id="treeDemo" class="ztree" style="margin-top:0; width:150px; height: 300px;"></ul>
                        </div>
                        </td>

五、注意：一次加载完后台数据

$(function() {
     var treeNodes;
     $.ajax({  
     async : false,  
     cache:false,  
     type: 'POST',  
     contentType:"application/json",
     url: "displayTree",//请求的action路径  
     error: function () {//请求失败处理函数  
     alert('请求失败');  
     },  
     success:function(data){ //请求成功后处理函数。    
     data = "[" + data + "]";
     treeNodes = eval(data);
     }  
     }); 
     $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
     });