SSM整合ProjectDay02-菜单管理：菜单模块-添加-操作【zTree插件使用】

一、Controller-加载菜单编辑页面SysMenuController

//添加菜单编辑页面
    @RequestMapping("doMenuEditUI")
    public String doMenuEditUI(){
       return "sys/menu_edit";//为什么是string类型？因为是绑定页面，传递一个url
    }

二、页面
1.menu_list

$(function(){
		doGetObjects();
	//	按钮事件注册--删除按钮
		$(".input-group-btn")
				.on("click",".btn-delete",doDeleteObject)  //删除
				.on("click",".btn-add",doLoadEditUI)    //添加菜单
		
	});

	//菜单添加操作
	function doLoadEditUI() {
	    var title;
	    if($(this).hasClass("btn-add")){
	    	title="添加菜单信息";
		}

	//    2.加载异步编辑页面
		var url="menu/doMenuEditUI";
		$("#mainContentId").load(url,function () {
			            $(".box-title").html(title);

		}); //假如mainContentId上有内容，则移除，变为新内容

	}

由 menu_edit.html中的添加按钮，得知名称，使用方法 $(".box-title").html(title);

结果：

2.menu_edit

var zTree; 
  //初始化zTree时会用到
  var setting = {
  	data : {
  		simpleData : {
  			enable : true,
  			idKey : "id",  //节点数据中保存唯一标识的属性名称
  			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
  			rootPId : null  //根节点id
  		}//json 格式javascript对象
  	}
  }//json 格式的javascript对象
  
 $(document).ready(function(){
	 $(".form-horizontal")
	 .on("click",".load-sys-menu",doLoadZtreeNodes);
	 
	 $(".box-footer")
	 .on("click",".btn-cancel",doCancel)
	 .on("click",".btn-save",doSaveOrUpdate);
	 
	 
	 $("#menuLayer")
     .on("click",".btn-cancel",doHideTree)
     .on("click",".btn-confirm",doSetSelectNode)
     
     //获取#mainContentId上绑定的数据
     var rowData=$("#mainContentId").data("rowData");
	 if(rowData)doInitEditFormData(rowData);
 });
  
  function doInitEditFormData(data){
		/*   $("input[type='radio']").each(function(){
			  if($(this).val()==data.type){
				  $(this).prop("checked",true);
			  }
		  }) */
		  $(".typeRadio input[value='"+data.type+"']").prop("checked",true);
		  $("#nameId").val(data.name);
		  $("#sortId").val(data.sort);
		  $("#urlId").val(data.url);
		  $("#permissionId").val(data.permission);
		  $("#parentId").val(data.parentName);
		  $("#parentId").data("parentId",data.parentId);
  }

  function doCancel(){
	  var url="menu/doMenuListUI.do";
	  $("#mainContentId").load(url,function(){
		  $("#mainContentId").removeData();
		  $("#parentId").removeData("parentId"); 
	  });
  }
  
  function doSaveOrUpdate(){//insert or update
	  //1.获取表单数据
	  var data=doGetEditFormData();
	  var rowData=$("#mainContentId").data("rowData");
	  if(rowData)data.id=rowData.id;
	  //2.异步提交表单数据
	  var insertUrl="menu/doSaveObject.do";
	  var updateUrl="menu/doUpdateObject.do";
	  var url=rowData?updateUrl:insertUrl;
	  $.post(url,data,function(result){
		  if(result.state==1){
			  alert(result.message);
			  doCancel();
		  }else{
			  alert(result.message);
		  }
	  })
  }
  function doGetEditFormData(){
	  var params={
	    type:$("form input[name='typeId']:checked").val(),
		name:$("#nameId").val(),
		url:$("#urlId").val(),
		sort:$("#sortId").val(),
		permission:$("#permissionId").val(),
		parentId:$("#parentId").data("parentId")
	  }
	  return params;
  }
  function doSetSelectNode(){
	  //1.获取选中的节点对象
	  var nodes=zTree.getSelectedNodes();
	  if(nodes.length==0){
		  alert("请先选中");
		  return;
	  }
	  var node=nodes[0];
	  console.log(node);
	  //2.将对象中内容,填充到表单
	  $("#parentId").data("parentId",node.id);
	  $("#parentId").val(node.name);
	  //3.隐藏树对象
	  doHideTree();
  }

function doHideTree(){
	 $("#menuLayer").css("display","none");
}
function doLoadZtreeNodes(){
	  //显示div
	  $("#menuLayer").css("display","block");
	  var url="menu/doFindZtreeMenuNodes.do";
	  //异步加载数据,并初始化数据
	  $.getJSON(url,function(result){
		  if(result.state==1){
			  //使用init函数需要先引入ztree对应的js文件
			  zTree=$.fn.zTree.init(
					  $("#menuTree"),
					  setting,
					  result.data);
		  }else{
			  alert(result.message);
		  }
	  })
  }

三、Node类。 封装信息。 菜单的id 菜单的name 菜单的parentId

package com.jt.common.vo;

import java.io.Serializable;

/**
 * @author : zhenzhen
 * @date : 2019/3/17 0:45
 */

public class Node implements Serializable {

    private static final long serialVersionUID = -6577397050669133046L;

    private Integer id;
    private String name;
    private Integer parentId;
    
    @Override
    public String toString() {
        return "Node{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", parentId=" + parentId +
                '}';
    }
    
    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getParentId() {
        return parentId;
    }

    public void setParentId(Integer parentId) {
        this.parentId = parentId;
    }
}

四、DAO-sysMenuDao

//    查询ztree呈现数据时需要的菜单信息 用List封装
    List<Node> findZtreeMenuNodes();

五、mapper.xml-SysMenuMapper.xml

    <!--查询菜单节点信息-->
    <select id="findZtreeMenuNodes" resultType="com.jt.common.vo.Node">
          select id,name,parentId
          from sys_menus
    </select>

六、service-SysMenuService

//    //    查询ztree呈现数据时需要的菜单信息 用List封装
//    List<Node> findZtreeMenuNodes();
      List<Node> findZtreeMenuNodes();

Impl：

//    查树中子节点
    @Override
    public List<Node> findZtreeMenuNodes() {
        return sysMenuDao.findZtreeMenuNodes();
    }

七、Controller-SysMenuController

//    查询菜单子节点树结构显示
    @RequestMapping("doFindZtreeMenuNodes")
    @ResponseBody
    public JsonResult doFindZtreeMenuNodes(){
        return new JsonResult(sysMenuService.findZtreeMenuNodes());
    }

取到 的信息在页面上呈现

一、menu_edit显示树结构




拿到对象固定写法

 $(function () {
      $(".form-horizontal").on("click",".load-sys-menu",doLoadZtreeNodes);
  });

     
     function doLoadZtreeNodes() {
          //显示div
          $("#menuLayer").css("display","block");
          //     加载异步
          var url="menu/doFindZtreeMenuNodes";
          $.getJSON(url,function(result){
             if(result.state==1){
                zTree=$.fn.zTree.init(
                    $("#menuTree"),
                    setting,
                    result.data);
             }else{
                 alert(result.message);
             }
         })
          
     }

二、取消menu_edit显示的树结构【关闭】

  $(function () {
      $(".form-horizontal").on("click",".load-sys-menu",doLoadZtreeNodes);  //显示菜单树
      $("#menuLayer").on("click",".btn-cancel",doHideTree);   //给树取消显示函数
  });

     //给树取消显示函数
     function doHideTree() {
         $("#menuLayer").css("display","none");//树结构不显示
     }

三、修改选择的菜单：

$(function () {
      $(".form-horizontal").on("click",".load-sys-menu",doLoadZtreeNodes);  //显示菜单树
      $("#menuLayer").on("click",".btn-cancel",doHideTree)   //给树取消显示函数
          .on("click",".btn-confirm",doSetSelectNode)//   设置选中节点

  });

     //   设置选中节点
     function doSetSelectNode() {
     //   获取选中节点
         var nodes=zTree.getSelectedNodes();
         if(nodes.length==0){  //没有选中数据
             console.log("没选中啊");
             alert("请先选中");
             return;
         }
         var node=nodes[0];
         console.log("node:"+node);// 控制台打印nodes数据
     //    将选中内容 写入数据库
         $("#parentId").data("parentId",node.id);  //?  绑定id
         $("#parentId").val(node.name);         //?   呈现名字
     //    树隐藏对象
         doHideTree();
}

四、上传内容至数据库，要创建实体类。由POJO接收。
1.新建SysMenu类

public class SysMenu implements Serializable {

    private static final long serialVersionUID = -8113796482755464549L;
    private Integer id;
    private String name;
    private String url;
    private Integer type;
    private Integer sort;
    private String note;
    private Integer parentId;
    private String permission;
    private Date createdTime;
    private Date modifiedTime;
    private String createdUser;
    private String modifiedUser;

    public static long getSerialVersionUID() {
        return serialVersionUID;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public Integer getType() {
        return type;
    }

    public void setType(Integer type) {
        this.type = type;
    }

    public Integer getSort() {
        return sort;
    }

    public void setSort(Integer sort) {
        this.sort = sort;
    }

    public String getNote() {
        return note;
    }

    public void setNote(String note) {
        this.note = note;
    }

    public Integer getParentId() {
        return parentId;
    }

    public void setParentId(Integer parentId) {
        this.parentId = parentId;
    }

    public String getPermission() {
        return permission;
    }

    public void setPermission(String permission) {
        this.permission = permission;
    }

    public Date getCreatedTime() {
        return createdTime;
    }

    public void setCreatedTime(Date createdTime) {
        this.createdTime = createdTime;
    }

    public Date getModifiedTime() {
        return modifiedTime;
    }

    public void setModifiedTime(Date modifiedTime) {
        this.modifiedTime = modifiedTime;
    }

    public String getCreatedUser() {
        return createdUser;
    }

    public void setCreatedUser(String createdUser) {
        this.createdUser = createdUser;
    }

    public String getModifiedUser() {
        return modifiedUser;
    }

    public void setModifiedUser(String modifiedUser) {
        this.modifiedUser = modifiedUser;
    }
}

二、Dao

//    菜单添加内容写入数据库 -按条写入
    int insertObject(SysMenu entity);

三、Mapper.xml

 <!--菜单操作中添加的信息-->
    <insert id="insertObject" parameterType="com.jt.sys.SysMenu">
        insert into sys_menus
        (name,url,type,sort,note,parentId,permission,createdTime,modifiedTime,createdUser,modifiedUser)
        values
        (#{name},#{url},#{type},#{sort},#{note},#{parentId},#{permission},now(),now(),#{createdUser},#{modifiedUser})
    </insert>

四、service

//    添加菜单存入数据库
    int saveObject(SysMenu entity);

Impl：

//    保存菜单添加的数据存入数据库【增加】
    @Override
    public int saveObject(SysMenu entity) {
//        验证信息合法性
        if(entity==null){
            throw new IllegalArgumentException("保存的对象为空");
        }
//                  ①不允许重复
        if(StringUtils.isEmpty(entity.getPermission())) {
            throw new IllegalArgumentException("权限标识不能为空");
        }
        //             扩展     ②基于用户输入的Permission查询是否重复【很多】
        if(StringUtils.isEmpty(entity.getName())){
            throw new IllegalArgumentException("菜单名不能为空");
        }
//        保存数据
        int rows = sysMenuDao.insertObject(entity);    //按行数返回
//        返回结果
        return rows;
    }

五、Controller

//    添加菜单信息入库
    @RequestMapping("doSaveObjects")
    @ResponseBody
    public JsonResult doSaveObjects(SysMenu entity){
        sysMenuService.saveObject(entity);
        return new JsonResult("Save Ok!");
    }

六、页面响应。点击save按钮【绑定事件】，异步提交【url 】