【Js__ztree】ztree使用
此次有两坑
静态文件放行<mvc:default-servlet-handler/>对应zTreeStyle的img文件夹
json乱码 @RequestMapping(value = "/getZtreeData", produces = "application/json; charset=utf-8")
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ztree</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${ctx}/script/zTree_v3/css/zTreeStyle/zTreeStyle.css">
</head>
<body>
<h1 onclick="m1();">最简单的树 -- 标准 JSON 数据</h1>
<!-- treeDemo: 和初始化的id要对应 class=zTree 代表使用zTree的主题样式 -->
<div id="tree" class="ztree"></div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="${ctx}/script/zTree_v3/js/jquery.ztree.core.js"></script>
<script src="${ctx}/script/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script>
$(document).ready(function () {
m1();
treeInit();
});
function treeInit() {
var setting = {
check: {
enable: true,
chkStyle: "checkbox"//显示 checkbox 选择框，默认checkbox可选择值radio
},
callback: {
onCheck: zTreeOnCheck
},
async: {
enable: true, type: "post", dataType: "json",//要开启async功能必须设置为true,其他地方同理
url: "${ctx}/ztree/getZtreeData"
},
data: {
simpleData: {
enable: true,
idKey: "id",//节点id名
pIdKey: "pid",//父节点id名
rootPId: 0//默认根节点为0
}
}
};
var zTreeNodes = [];
var city = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
/*
$.ajax({
type: "post", dataType: "json", async: true, cache: true,
url: "${ctx}/ztree/getZtreeData2",
data: {"id": ""},
success: function (data) {
if (data.code == 1) {
//console.log("code", data);
var zTreeNodes = data.data;
console.log("code", data.data);
var city = $.fn.zTree.init($("#tree"), setting, data.data);
} else {
console.log(data);
}
}
});
*/
}
function zTreeOnCheck(event, treeId, treeNode) {
console.log(event);
console.log(treeId);
console.log(treeNode);
console.log(treeNode.name);//弹出城市名字
console.log(treeNode.id);//弹出城市名字
}
function m1() {
$.ajax({
type: "post", dataType: "json", async: true, cache: true,
url: "${ctx}/ztree/m1",
data: {"id": ""},
success: function (data) {
if (data.code == 1) {
console.log("data.code == 1", data);
} else {
console.log(data);
}
}
});
}
</script>
</body>
</html>
@Controller
@RequestMapping("/ztree")
public class ZTreeController {
@RequestMapping("/index")
public String index() {
return "ztree/index";
}
@RequestMapping(value = "/getZtreeData", produces = "application/json; charset=utf-8")
@ResponseBody
public String getZtreeData(HttpServletRequest request) {
String data = "[\n" +
" {\"name\":\"北京\",\"open\":true,\"id\":1,\"pid\":0},\n" +
" {\"name\":\"东城区\",\"id\":11,\"pid\":1},\n" +
" {\"name\":\"朝阳区\",\"id\":12,\"pid\":1},\n" +
" {\"name\":\"重庆\",\"open\":true,\"id\":2,\"pid\":0},\n" +
" {\"name\":\"巴南区\",\"open\":true,\"id\":21,\"pid\":2},\n" +
" {\"name\":\"南泉\",\"id\":211,\"pid\":21},\n" +
" {\"name\":\"界石\",\"id\":212,\"pid\":21},\n" +
" {\"name\":\"渝中区\",\"id\":22,\"pid\":2}\n" +
"]";
return data;
}
}
