实现后的结果大致是这样的
其具体实现过程呢如下:
首先需要引入几个js和css样式:
<link href="../../ext-res/ztree/css/demo.css" rel="stylesheet">
<link href="../../ext-res/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script type="text/javascript" src="../../ext-res/js/jquery.min.js"></script>
<script type="text/javascript" src="../../ext-res/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../ext-res/ztree/jquery.ztree.excheck.js"></script>
需要注意的是,jquery.min.js需要引在另外两个js文件前面.
然后就可以操作了,具体代码首先是前端页面
<div id="treeDemo" class="ztree"></div>
需要注意的是class="ztree"这个不能改,
然后就是jq与js函数了
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
view: {
showIcon:false, //这个是是否显示文件夹和文件的图标
dblClickExpand : false //这个是设置是否只能选择一个节点
//selectedMulti: true //允许同时选中多个节点。
},
data: {
simpleData: {
enable: true //这个是设置数据格式为简单json格式
}
},check:{
enable:true,
chkboxType:{"Y":"","N":""} //这个是设置选中子节点实话,是否需要选中父节点,以及选中父节点是是否需要选中子节点
},
callback: {
beforeCheck : function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkAllNodes(false);
return true;
},
onCheck : function(e, treeId, treeNode) {
console.log("当前被选择的节点:");
console.log(treeNode.id);
// alert(treeNode.id);
}
}
};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
treeNode:{
}
var zNodes = ${folderlist};
/*var zNodes = [
{id:10, pId:0, name: "父节点1"},
{id:11, pId:10, name: "子节点1"},
{id:12, pId:10, name: "子节点2"},
{id:13, pId:11, name: "子节点3"}
];*/ //这个是样式,也可以从后台返回json格式.
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
function savefolder(currentPageId) {
var zTree1 = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = zTree1.getCheckedNodes();
//alert(nodes);
if(nodes.length==0){
alert("请选择要保存的文件夹");
}else{
alert(currentPageId+"==");
alert(nodes[0].id);
//alert($("#deleteHaulId").val());
}
}
</SCRIPT>
这样前端的页面也就写完了,如果想从后台传送数据回来,需要将数据封装到json格式中
第一种是直接创建一个类,因为返回前端的格式是{id:10,pId:0,name:"父节点1"},这样的话需要类的字段与之一一对应,还有就是在json封装的时候,改一下.
public class PortalFolder {
//当前pageId
private String id;
//父类pageId
private String pId;
//名称
private String name;
//设置状态为true
private boolean open = true;
public boolean isOpen() {
return open;
}
public void setOpen(boolean open) {
this.open = open;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getpId() {
return pId;
}
public void setpId(String pId) {
this.pId = pId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@RequestMapping(value = "/currentFolderList.action")
public String currentFolderList(String currentpageId, ModelMap model) {
//获取所有的节点列表
List<PortalFolder> folders = portalService.getFolderList();
//封装成json格式,我引入的是import net.sf.json.JSONArray;
JSONArray jsonArray = JSONArray.fromObject(folders);
//将json转成字符串
String json = jsonArray.toString();
//如果查出来的类字段不对应,可以通过这个改
//json = json.replaceAll("menuId","id").replaceAll("parentId","pId").
//replaceAll("menuName","name").replaceAll("hasSubMenu","checked");
//System.out.println(json);
//设置json属性
model.addAttribute("portalList", portalList);
return "portal/PortalShowPageList";
}
这样就可以实现树形菜单了,希望对你有帮助。喜欢的朋友可以关注我微信的公众号:从小白到架构师。我会每天更新学习内容的。