zTree插件生成下拉复选树（可选择点击）
之前看了很多 但都不是很详细，这次贴上的代码，希望新手能少走弯路，与君共勉
参考文献：
http://www.php.cn/js-tutorial-352583.html
https://www.cnblogs.com/julinhuitianxia/p/6817927.html
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for menu
-- ----------------------------
DROP TABLE IF EXISTS `menu`;
CREATE TABLE `menu` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`pid` int(11) DEFAULT NULL,
`name` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of menu
-- ----------------------------
INSERT INTO `menu` VALUES ('1', '0', '人力资源管理');
INSERT INTO `menu` VALUES ('2', '1', '部门管理');
INSERT INTO `menu` VALUES ('3', '1', '员工管理');
INSERT INTO `menu` VALUES ('4', '1', '福利管理');
INSERT INTO `menu` VALUES ('5', '1', '考勤管理');
INSERT INTO `menu` VALUES ('6', '2', '部门列表');
INSERT INTO `menu` VALUES ('7', '2', '部门添加');
INSERT INTO `menu` VALUES ('8', '2', '部门审核');
INSERT INTO `menu` VALUES ('9', '3', '员工列表');
INSERT INTO `menu` VALUES ('10', '3', '员工添加');
INSERT INTO `menu` VALUES ('11', '3', '员工审核');
INSERT INTO `menu` VALUES ('12', '4', '福利列表');
INSERT INTO `menu` VALUES ('13', '4', '福利添加');
INSERT INTO `menu` VALUES ('14', '5', '今日打卡');
INSERT INTO `menu` VALUES ('15', '5', '打卡列表');
INSERT INTO `menu` VALUES ('16', '5', '请假列表');
INSERT INTO `menu` VALUES ('17', '5', '请假申请');
INSERT INTO `menu` VALUES ('18', '5', '请假审核');
<head>
<title>zTree点击文字勾选复选框</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../static/css/demo.css" type="text/css">
<link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
var datas;
$(document).ready(function(){
//初始化树
zTree = $.fn.zTree.init($("#treeSelect"), setting, datas);
});
//设置
var setting = {
check: {
enable: true,
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: function (e, treeId, treeNode, clickFlag) {
zTree.checkNode(treeNode, !treeNode.checked, true);
}
},
};
$.ajax({
url : "http://localhost:8080/User/selectTree",（你自己的url）
type : "post",
dataType : "json",
async: false,
success : function(data) {
// 定义拼接字符
datas = data;
console.log(datas)
},
error : function(msg) {
alert("ajax连接异常：" + msg);
}
});
</script>
</head>
<body>
<div style="vertical-align: middle; text-align: center;">
<div>
<ul id="treeSelect" class="ztree"></ul>
</div>
</div>
</body>
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
后台
import net.sf.json.JSONArray;（引入的net.sf.json）
/*
* 查询树信息
*/
@RequestMapping(value = "/selectTree")
@ResponseBody
public void selectTree(HttpServletResponse resp) throws IOException {
List<Trees> tree = userservice.selectTree();
JSONArray jsonArray = JSONArray.fromObject(tree);
/* 设置编码，防止出现乱码问题 */
resp.setContentType("text/text;charset=utf-8");
resp.setCharacterEncoding("utf-8");
// 得到输出流
PrintWriter respWritter = resp.getWriter();
/* 将JSON格式的对象toString()后发送 */
respWritter.append(jsonArray.toString());
}
完成后：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
后续：
选择相应的勾选 将节点信息给后台
<head>
<title>zTree点击文字勾选复选框</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../static/css/demo.css" type="text/css">
<link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.ztree.all.js"></script>
</head>
<body>
<div style="vertical-align: middle; text-align: center;">
<div>
<ul id="treeSelect" class="ztree"></ul>
</div>
<div>
<button id="a" type="button" class="btn btn-w-m btn-primary" onclick="fff();">提交</button>
</div>
</div>
</body>
<script type="text/javascript">
var datas;
$(document).ready(function(){
//初始化树
zTree = $.fn.zTree.init($("#treeSelect"), setting, datas);
});
//设置
//创建一个对象
function createObj(id,name,pId){
this.id = id;
this.name = name;
this.pId = pId;
}
createObj.prototype.sayId = function(){
alert(this.id);
}
createObj.prototype.sayName = function(){
alert(this.name);
}
createObj.prototype.saypId = function(){
alert(this.pId);
}
var setting = {
check: {
enable: true,
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: function (e, treeId, treeNode, clickFlag) {
zTree.checkNode(treeNode, !treeNode.checked, true);
}
},
};
$.ajax({
url : "http://localhost:8080/User/selectTree",
type : "post",
dataType : "json",
async: false,
success : function(data) {
// 定义拼接字符
datas = data;
console.log(datas)
},
error : function(msg) {
alert("ajax连接异常：" + msg);
}
});
//确定按钮触发事件
function fff() {
var treeObj=$.fn.zTree.getZTreeObj("treeSelect");
nodes=treeObj.getCheckedNodes(true);
var ss=new Array();//创建list集合
//var list= [];
v="";
for(var i=0;i<nodes.length;i++){
var person = new createObj(nodes[i].id,nodes[i].name,nodes[i].pId);
ss[i]=person;
//v+="name:"+ nodes[i].name + ",";
//alert(nodes[i].id); //获取选中节点的值
//v+="id:"+ nodes[i].id + ",";
//v+="PId:"+ nodes[i].pId + ",";
//console.log(nodes);
}
console.log(ss);
}
</script>
实现：
控制台打印：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
2019.3.28
继续往下写，将数据打包成json发送到后台并且控制台显示数据
使用的
<script type="text/javascript" src="../static/js/json2.js"></script>
参考文献
http://www.cnblogs.com/youring2/archive/2013/03/01/2938850.html
修改前台方法fff
function fff() {
var treeObj=$.fn.zTree.getZTreeObj("treeSelect");
nodes=treeObj.getCheckedNodes(true);
var ss=new Array();//创建list集合
//var list= [];
v="";
for(var i=0;i<nodes.length;i++){
var person = new createObj(nodes[i].id,nodes[i].name,nodes[i].pId);
ss[i]=person;
}
//打包成json格式数据
var appop = JSON.stringify(ss);
console.log(appop);
//这句话很重要，不加的话前台json格式不识别
var jsonStrings = encodeURIComponent(appop);
console.log(jsonStrings);
$.ajax({
url : "http://localhost:8080/User/insertPermissions?jsonStrings="+jsonStrings,
type : "post",
dataType : "json",
async: false,
contentType:'application/x-www-form-urlencoded;charset=UTF-8',
success : function(data) {
console.log(data);
},
error : function(msg) {
alert("ajax连接异常：" + msg);
}
});
}
后台：
/*
* 展示提交的树节点信息
*/
@RequestMapping(value = "/insertPermissions",method=RequestMethod.POST,produces="application/json;charset=UTF-8")
@ResponseBody
public Map<String, String> insertPermissions(@RequestParam(value="jsonStrings")String jsonStrings, HttpServletRequest request) throws IOException {
URLDecoder.decode(jsonStrings,"UTF-8");
System.out.println(jsonStrings);
Map<String, String> map = new HashMap<String, String>();
map.put("result","true");
return map;
}
效果：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
继续修改我的代码：
实现后台的json格式转换成普通的arrayList<实体类> 的集合，所有数据通过循环可以取出来
json格式的转换：参考文献
https://blog.****.net/liangmaoxuan/article/details/80642880
/*
* 展示提交的树节点信息
*/
@RequestMapping(value = "/insertPermissions",method=RequestMethod.POST,produces="application/json;charset=UTF-8")
@ResponseBody
public Map<String, String> insertPermissions(@RequestParam(value="jsonStrings")String jsonStrings, HttpServletRequest request) throws IOException {
URLDecoder.decode(jsonStrings,"UTF-8");
//System.out.println(jsonStrings);
//tress是相对应的实体类
List<Trees> trees =new ArrayList<Trees>();
JSONArray jsonArray = JSONArray.fromObject(jsonStrings);
for (int i = 0; i < jsonArray.size(); i++ )
{
JSONObject jsonObject = jsonArray.getJSONObject(i);
Trees trees2 = (Trees)JSONObject.toBean(jsonObject,Trees.class);
trees.add(trees2);
}
System.out.println(trees);
for (Trees tr : trees) {
System.out.println(tr.getName());
}
Map<String, String> map = new HashMap<String, String>();
map.put("result","true");
return map;
}
效果图：后台取出了所有选中的节点名：