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

来源：互联网发布：软件的盈利模式编辑：程序博客网时间：2024/05/11 22:03

本人首次尝试这个插件，可是我去，我前端知识太薄弱了。搞了一天愣是没弄出来，什么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

阅读全文

0 0