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

最新推荐文章于 2019-10-16 15:53:10 发布

zhangludcsdn

最新推荐文章于 2019-10-16 15:53:10 发布

阅读量769

点赞数

本文链接：https://blog.csdn.net/zhangludcsdn/article/details/78064506

版权

本人首次尝试这个插件，可是我去，我前端知识太薄弱了。搞了一天愣是没弄出来，什么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;" οnclick="showMenu();" />
         <a id="menuBtn" href="#" οnclick="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

zhangludcsdn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zTree读取公司部门与子部门信息数据加载出问题

本人首次尝试这个插件，可是我去，我前端知识太薄弱了。搞了一天愣是没弄出来，什么415错，400错都有。415错 function getTree(){// var id=2; $.post("/hrm/users/assignjob",function (data) { console.info(data);
复制链接

扫一扫