ztree动态加载数据库后台数据的例子

同步的加载数据是这样的：

<script type="text/javascript">
  function showIconForTree(treeId, treeNode) {
            return !treeNode.isParent;
        };
        function zTreeOnClick(event, treeId, treeNode) {
            alert(treeNode.cId);
        }
        var setting = {
            callback: {
                onClick: zTreeOnClick
            },
            view: {
                showIcon: showIconForTree
            },
            data: {
                key: {
                    children: "children",
                    name: "cName",
                    title: "",
                    url: "url"
                },
                simpleData: {
                    enable: true
                }
            }
        };
        $(document).ready(function () {
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "Index.aspx/FindAll",
                data: "{}",
                dataType: "json",
                success: function (result) {
                    var zNodes = result.d; //接受webservice里面传过来的list
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                }
            });
        });
    </script>
 异步加载的代码如下：

1、html代码：

引用js：

<link rel="stylesheet"    href="<c:url value='/scripts/zTree-3.5/css/zTreeStyle/zTreeStyle.css'/>" type="text/css">
  <link rel="stylesheet" href="scripts/zTree-3.5/css/zTreeStyle/zTreeStyle.css" type="text/css">
 <script type="text/JavaScript"  src="<c:url value='/scripts/zTree-3.5/js/jQuery.ztree.core-3.5.js'/>"  ></script>
 <script type="text/javascript" src="scripts/zTree-3.5/js/jquery.ztree.all-3.5.js"></script>

<input type = "hidden" name = "yjDm" id = "yjDm"  value="${bzBsm.yjDm}" /> 
    <form:input id = "yj"  path="yj"  cssClass ="required"   readonly ="true" style="width:310px;"/> 
       <a id="menuBtn" href="#" onClick="showMenu(); return false;">选择</a>
 
<div id="menuContent"   style="display:none; position: absolute; width: 310px;">
  <ul id="treeDemo" class="ztree" style="margin-top:0; width:310px;height:150px;"></ul>
 </div>
2、js代码：

<style>
 /**ztree **/
#menuContent ul.ztree {
    border: 1px solid #617775;
    background: #f0f6e4;
    width: 170px;
    height: 160px;
    overflow-y: scroll;
    overflow-x: auto;
}
#menuContent select {
    width: 154px;
    border: 1px solid #82AEE5;
    margin-bottom: 10px;
}
</style>
    <script type="text/javascript">
         <!--
        var setting = {
      
        check: {
                    enable: true,
                    chkboxType: {  "Y" : "", "N" : "" }
                },
            view: {
                  // checkable: true,
                  dblClickExpand: false
            },
             async: { //动态加载
                enable: true,
                url:"/xh/dmbzyjwhb/treeload/dmyj", //加载ztree &nbsp;&nbsp;
                     autoParam:["id","pId","name"],
                dataFilter: filter
            }, 
             
            data: {   //必须添加
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick,//(点击之前)用于捕获 勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选
             //  onClick: onClick
               onCheck: onCheck
            }
        }; 
        // &nbsp;var zNodes = .... //静态
         function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i=0, l=childNodes.length; i<l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            return childNodes;
        }
        function beforeClick(treeId, treeNode) {
            var check = (treeNode && !treeNode.isParent);//是节点，并且不是父级
            if (!check) alert("只能选择语境");
            return check;
        }
        function onClick(e, treeId, treeNode) {    //
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
           nodes = zTree.getSelectedNodes(),//获取 zTree 当前被选中的节点数据集合（按Ctrl多选择）
            v = "";
            va= "" ;
              nodes.sort(function compare(a,b){return a.id-b.id;});//按照id从小到大进行排序
            for (var i=0, l=nodes.length; i<l; i++) {
               if(i==0){
                 v += nodes[i].name  ;
                 va += nodes[i].id ;
               }else{
                v += ","+nodes[i].name  ;
               va += ","+nodes[i].id ;
               }
            }
        //  if (v.length > 0 ) 
        //  v = v.substring(0, v.length-1);
            var cityObj = $("#yjDm");
            cityObj.attr("value", va);//设置文本框的val 值
           $('#yj').attr("value",v) ; // 设置文本框的text值
        }
         function onCheck(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = zTree.getCheckedNodes(true),
            v = "";
            va= "" ;
            for (var i=0, l=nodes.length; i<l; i++) {
                //v += nodes[i].name + ",";
                 if(i==0){
                     v += nodes[i].name  ;
                     va += nodes[i].id ;
                   }else{
                    v += ","+nodes[i].name  ;
                   va += ","+nodes[i].id ;
                   }
            }
        //   if (v.length > 0 ) v = v.substring(0, v.length-1);
            var cityObj = $("#yjDm");
            cityObj.attr("value", va);
           $('#yj').attr("value",v) ;
        }
    
        function showMenu() {
            var cityObj = $("#yj");//输入框
            var cityOffset = $("#yj").offset();//获取匹配元素在当前视口的相对偏移
            //cityOffset.left 元素在当前视口的相对偏移
            //slideDown 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
            $("#menuContent").css({left:165 + "px", top:  125+ "px"}).slideDown("fast");
            
            $("body").bind("mousedown", onBodyDown);//给body绑定鼠标按下事件
        }
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
        //event 代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
        //event.target 直接接受事件的目标DOM元素
        function onBodyDown(event) {
            //如果接受事件的目标DOM元素的id 不是menuBtn（选择） 或 不是menuContent（菜单内容） 或  menuContent对象中元素的个数不大于0
            //点击不是选择按钮，不是菜单内容的时候就隐藏下拉目录
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                hideMenu();
            }
        }
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting); // 静态,zNodes
        });
        //-->
    </SCRIPT>

3、后台提供数据的代码。自行组织符合ztree要求的字符串即可。

List<Map> menuList =  dmBzYjwhbManager.yjZtree("2","2");    
super.ajaxOut(JSONArray.fromObject(menuList).toString(), response);