jQuery zTree动态加载实例

最新推荐文章于 2024-10-10 22:04:37 发布

weixin_30493321

最新推荐文章于 2024-10-10 22:04:37 发布

阅读量120

点赞数

文章标签： json xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/konghou/p/3625796.html

版权

页面jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="${f:url('/static/css/zTreeStyle/zTreeStyle.css')}" type="text/css"/>
<link rel="stylesheet" href="${f:url('/static/css/demo.css')}" type="text/css"/>
<script type="text/javascript" src="${f:url('/static/js/jquery-1.4.4.min.js')}"></script>
<script type="text/javascript" src="${f:url('/static/js/jquery.ztree.core-3.1.js')}"></script>
<script type="text/javascript" src="${f:url('/static/js/jquery.ztree.excheck-3.1.js')}"></script>
<script type="text/javascript" >
var setting = {
    check: {
        enable: true,
        nocheckInherit: true
    },
    async: {
        enable: true,
        autoParam: ["id","name"]//异步加载时需要提交的参数，多个用逗号分隔
    },
    data: {
        simpleData: {
                        /**
            如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId
            并且让数据满足父子关系。*/
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0
        }
    },
    view:{
        showIcon: showIconForTree
    }
};
function showIconForTree(treeId, treeNode) {
    return !treeNode;
};
var zNodes;
$(function() {
    $.ajax({
        async : false,
        cache : false,
        type : 'POST',
        dataType : 'json',
        //contentType: "application/json",
        url: "${pageContext.request.contextPath}/group/edit/zTree",//获取json格式数据的路径
        success : function(data) {
            //alert(data);
            zNodes = data;//把后台封装好的简单Json格式赋给treeNodes
        }
    });
 });
$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
   
</script>
</head>
   
<body>
     <div class="content_wrap">
        <div class="zTreeDemoBackground left">
             <ul id="treeDemo" class="ztree"></ul>//放置树结构的容器
         </div>
    </div>  
</body>
</html>

后台action

@Execute(validator = false)
    public String zTree() {
        String jsonString;
        try {
            String groupId = (String)request.getSession().getAttribute("groupId");
            if (StringUtil.isNotEmpty(groupId)) {
                groupService.selectGroupInfo(groupDto,groupId);
            } else {
                groupDto.reset();
            }
            List<GroupDto> groupList = new ArrayList<GroupDto>();
            groupList = groupService.selectGroupInfo();
            groupDto.setGroupList(groupList);
            List<FloorInfoDto> floorInfoList = floorInfoService.selectFloorInfo();
            List<GroupDetailDto> groupDetailList = groupDetailService.selectGroupDetail();
            List<RoomInfoDto> roomInfoList = roomInfoService.selectRoomInfo();
   
            List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
   
            for(FloorInfoDto node: floorInfoList){//一级节点
                Map<String,Object> item = new HashMap<String,Object>();
                item.put("id", node.getFloorId());
                item.put("name", node.getFloorName());
                item.put("isParent", true);//设置是否为父节点
                List<Map<String,Object>> subitems = new ArrayList<Map<String,Object>>();
                for(RoomInfoDto node1: roomInfoList){//二级节点
                    Map<String,Object> subitem = new HashMap<String,Object>();
                    if(node.getFloorId()==node1.getFloorId()){
                        subitem.put("id", node1.getRoomNo());
                        subitem.put("name", node1.getRoomName());
                        subitem.put("isParent", false);
                        for(GroupDetailDto node2: groupDetailList){//这里是本例中用到的判断，主要得到那些节点在树加载出来后被选中
                            if(node2.getGroupId()==groupDto.getGroupId()){
                                if(node1.getRoomNo().equals(node2.getRoomNo())){
                                    subitem.put("checked", true);//树加载出来后节点被选中
                                    item.put("checked", true);//树加载出来后节点被选中
                                    item.put("open", true);//树加载出来父节点打开
                                }
                            }
                        }
                    }
                    if(subitem.size()!=0){//不做这个判断json对象会有空值，树加载不出来
                        subitem.put("chkDisabled",true);树加载出来后节点不能对其进行操作
                        subitems.add(subitem);
                    }
                }
                if(subitems.size()!=0){
                    item.put("children", subitems);//把子节点再到父节点上
                    item.put("chkDisabled",true);
                }else{
                    item.put("chkDisabled",true);
                }
                items.add(item);
            }
             JSONArray json = JSONArray.fromObject(items);
             jsonString = json.toString();
             response.setCharacterEncoding("UTF-8");
             response.getWriter().print(jsonString);
             //System.out.print(jsonString+"kkkkkkkkkkkkkkkkk");
        } catch (SystemException e) {
            throw e;
        }catch (Exception e) {
            throw new SystemException(JcomConstants.LOG_ID_E_0022, e);
        }
        return null;//这里要return null 因为前面已经response.getWriter().print(jsonString);
    }