zTree读取公司部门与子部门信息数据加载出问题

本文记录了作者在使用zTree插件过程中遇到的问题及解决方法,包括415和404错误处理、MyBatis配置调整及前后端数据交互细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本人首次尝试这个插件,可是我去,我前端知识太薄弱了。搞了一天愣是没弄出来,什么415错,400错都有。

415错

 function getTree(){

//		    var id=2;
        $.post("/hrm/users/assignjob",function (data) {
            console.info(data);
            if (data!=null) {
                alert(1);
                zNode=data.data;
                $.fn.zTree.init($("#treeDemo"), setting, zNode);
                alert("加载成功!");
            }
            else{
                alert(2);
            }
        })

    }

我先了一个这样的函数,我的post请求地址沿用下面的请求写法,地址前面有个前缀。出了个415错。

$.ajax({})这种发送AJAX请求的方式写法如下
url : 'http://8080/hrm/users/toManage',
解决后,解决404错,无论我在后台点断点,运行程序,一点反应都没有,都绝望了,我突然想到我的Mybaties是返回的一个部门名字,而插件需要的是整个表的字段,修改mybaties

  <select id="selectHeadquarters"  resultType="com.jointem.hrm.entity.Department">
         select id,department_name name ,parent_did pId from department
    </select>

注意:查询到的数据字段要与前端需要的JSON数据的KEY一致,所以需要为数据库表的字段取与前端一致的别名。港开始我连Department实体都忘记了写。返回一个List<Department>,请求调试了可以发送到前段,就调前端


<%--
  Created by IntelliJ IDEA.
  User: zhanglu
  Date: 2017/9/19
  Time: 17:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - checkbox select menu</TITLE>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/demo.css" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery.ztree.excheck.js"></script>
    <!--	<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->

    <style type="text/css">
    </style>
</HEAD>

<BODY>


<ul class="list">
    <li class="title">  Test: <input id="citySel" type="text" readonly value="" style="width:120px;" onclick="showMenu();" />
         <a id="menuBtn" href="#" onclick="showMenu(); return false;">select</a></li>
</ul>




<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
</div>
<script type="text/javascript">

    <!--
    var zNode;
    var setting = {
        check: {
            enable: true,
            chkboxType: {"Y":"", "N":""}
        },
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick,
            onCheck: onCheck
        }
    };

    function getTree(){

//		    var id=2;
        $.post("/hrm/users/assignjob",function (data) {
            console.info(data);
                zNode=data.data;
            $.fn.zTree.init($("#treeDemo"), setting, zNode);

        })

    }
    //        var zNodes =[
    //            {id:1, pId:0, name:"北京"},
    //            {id:2, pId:0, name:"天津"},
    //            {id:3, pId:0, name:"上海"},
    //            {id:6, pId:0, name:"重庆"},
    //            {id:4, pId:0, name:"河北省", open:true, nocheck:true},
    //            {id:41, pId:4, name:"石家庄"},
    //            {id:42, pId:4, name:"保定"},
    //            {id:43, pId:4, name:"邯郸"},
    //            {id:44, pId:4, name:"承德"},
    //            {id:5, pId:0, name:"广东省", open:true, nocheck:true},
    //            {id:51, pId:5, name:"广州"},
    //            {id:52, pId:5, name:"深圳"},
    //            {id:53, pId:5, name:"东莞"},
    //            {id:54, pId:5, name:"佛山"},
    //            {id:6, pId:0, name:"福建省", open:true, nocheck:true},
    //            {id:61, pId:6, name:"福州"},
    //            {id:62, pId:6, name:"厦门"},
    //            {id:63, pId:6, name:"泉州"},
    //            {id:64, pId:6, name:"三明"},
    //            {id:7, pId:0, name:"福建省", open:true, nocheck:true},
    //            {id:71, pId:7, name:"福州"},
    //            {id:75, pId:71, name:"厦门"},
    //            {id:76, pId:71, name:"厦门"},
    //            {id:72, pId:7, name:"厦门"},
    //            {id:73, pId:7, name:"泉州"},
    //            {id:74, pId:7, name:"三明"}
    //        ];

    function beforeClick(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),
            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);
        
    }

    function showMenu() {
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#menuContent").css({left:cityOffset.left + "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();
        }
    }

    $(document).ready(function(){
        getTree();


    });
    //-->
</script>
</BODY>
</HTML>

以上是我调式成功的,看到那个复杂的数组了吗,要做的就是把数据弄着里面。

注意


1)接收后台JSON数据要data.data

2)post请求地址为“项目名/control映射/函数映射

3)注意数组变量的去向全局变量声明写在最上面。

4)control注解:post发送请求乱码参数,返回字符串要加@ResponseBody

@RequestMapping(value= "/assignjob",method = RequestMethod.POST, produces = "application/json;charset=utf-8")
@ResponseBody

课程简介:历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值