zTree读取公司部门与子部门信息数据加载出问题
2017-09-22 16:41
302 查看
本人首次尝试这个插件，可是我去，我前端知识太薄弱了。搞了一天愣是没弄出来，什么415错，400错都有。
415错
我先了一个这样的函数，我的post请求地址沿用下面的请求写法，地址前面有个前缀。出了个415错。
解决后，解决404错，无论我在后台点断点，运行程序，一点反应都没有，都绝望了，我突然想到我的Mybaties是返回的一个部门名字，而插件需要的是整个表的字段，修改mybaties
注意：查询到的数据字段要与前端需要的JSON数据的KEY一致，所以需要为数据库表的字段取与前端一致的别名。港开始我连Department实体都忘记了写。返回一个List<Department>,请求调试了可以发送到前段，就调前端
以上是我调式成功的，看到那个复杂的数组了吗，要做的就是把数据弄着里面。
注意
1）接收后台JSON数据要data.data
2)post请求地址为“项目名/control映射/函数映射
3）注意数组变量的去向全局变量声明写在最上面。
4）control注解：post发送请求乱码参数，返回字符串要加@ResponseBody
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ztree一级一级加载，解决数据过大加载缓慢问题
- spring 返回 JSON乱码问题的解决 及个人 动态加载ztree树结构的json数据代码
- 单点登录cas常见问题(六) - cas中心配置的service的信息数据更新了，能否自动重新加载？
- ztree一级一级加载，解决数据过大加载缓慢问题
- zTree 异步加载数据传参问题
- python读取文本文件URL列表遇到的问题和加载中数据获取问题
- Android通讯录加载大数据的优化问题
- C# 读取数据表没有主键的问题
- 使用docker inspect获取数据卷信息遇到的一点问题
- python读取数据库数据，读取出的中文乱码问题
- 不能从mq读取数据问题
- 从CSV文件中读取数据，使用逗号','分割问题
- 在Asp.net 2.0 中禁用页面缓存解决页面刷新（重新加载数据）的问题！
- Android解决同时存在多个FragmentStatePagerAdapter时数据不加载的问题
- 组件加载的过程中，数据与视图无法同时呈现的问题
- JSP中从mysql数据库中读取含有html标签的数据问题
- 大数据24小时：印度国民数据库曝严重漏洞危及11.3亿公民信息，无人驾驶公司Pony.ai获1.12亿融资
- 关于C语言读取多行数据的问题
- 问题记录：viewpager取消数据预加载
- 使用easyUI的treegrid的时候，出现后台返回数据为空时，treegrid加载了前面请求到的数据到页面上的问题