基于springboot和ajax的简单项目 013 ztree插件使用，这是关于修改和新增的

先写写的是menu_list.html文件上的内容。
01.在自动加载函数上写点击事件

$(".input-group-btn")
	.on("click",".btn-delete",doDeleteObject)
    .on("click",".btn-add,.btn-update",doLoadEditUI);

02.登录函数：

function doLoadEditUI(){
	var title;
	//基于点击对象的class属性值,修改标题
	if($(this).hasClass("btn-add")){
		title="添加菜单";
	}else{
		title="修改菜单";
		var item=doGetCheckedItem();
		if(!item){
			alert("请先选择");
			return;
		}
		$("#mainContentId")
		.data("rowData",item);
	}
	//异步加载编辑页面
	var url="menu/menu_edit";
	$("#mainContentId").load(url,function(){
		$(".box-title").html(title);
	})
}

如果是修改按钮：

function doGetCheckedItem(){
	return $("tbody input[type='radio']:checked")
	.parents("tr").data("rowData");
}

这里写的是menu_edit.html文件上的内容。
01
导入相关的资源：

 <script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
  <script type="text/javascript" src="bower_components/layer/layer.js">
  </script>

自动加载函数：

  $(function(){
	  $(".form-horizontal")//事件不能注册到$("#mainContentId")对象上
	  .on("click",".load-sys-menu",doLoadZtreeNodes);
	  
	  $("#menuLayer")
      .on("click",".btn-confirm",doSetSelectNode)
      .on("click",".btn-cancel",doHideTree);
	  
	  $(".box-footer")
	  .on("click",".btn-cancel",doCancel)
	  .on("click",".btn-save",doSaveOrUpdate)
	  
	  var data=$("#mainContentId").data("rowData");
	  if(data)doInitEditFormData(data);

  })

02.声明一个变量用于ztree插件中
first：显示数据在插件中：

var zTree; //zTree是第三方扩展的一个Jquery插件


  //初始化zTree时会用到
  var setting = {
  	data : {
  		simpleData : {
  			enable : true,//表示使用简单数据模式
  			idKey : "id",  //节点数据中保存唯一标识的属性名称
  			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
  			rootPId : null  //根节点id
  		}//json 格式javascript对象
  	}
  }//json 格式的javascript对象

02.在自动加载函数：

$(function(){
	  $(".form-horizontal")//事件不能注册到$("#mainContentId")对象上
	  .on("click",".load-sys-menu",doLoadZtreeNodes);
}	  

function doLoadZtreeNodes(){
	  var url="menu/doFindZtreeMenuNodes";
	  //异步加载数据,并初始化数据
	  $.getJSON(url,function(result){
		  if(result.state==1){
			  //使用init函数需要先引入ztree对应的js文件
			  zTree=$.fn.zTree.init(
					  $("#menuTree"),
					  setting,
					  result.data);//id,name,parentId，这里的result.data就是方法声明中的参数znode
			   //doRemoveNodeFromZtree();//修改时,可考虑此方案
			   //显示zTree对应的div
			   $("#menuLayer").css("display","block");
		  }else{
			  alert(result.message);
		  }
	  })
  }

$.fn是在jQuery原型上面添加方法或者属性，相当于 jQuery.prototype。例如 $.fn.show=function(){xxxx} ,那么就可以直接使用 $.show（）调用这个方法

css样式属性值：

04.在ztree中获取选中的节点，and judge 是否选中的逻辑正确：
在自动加载的函数中：

 
	  $("#menuLayer")
      .on("click",".btn-confirm",doSetSelectNode)
      .on("click",".btn-cancel",doHideTree);
	  

function doSetSelectNode(){
	  //1.获取选中的节点对象
	  var nodes=zTree.getSelectedNodes();
	  if(nodes.length==1){	  
       var selectedNode=nodes[0];
       console.log("selectNode",selectedNode);
       var rowData=$("#mainContentId").data("rowData");//如果是新增，rowdata是空（在上面有提及），如果是修改，就是选中的选项去提交的修改
       if(rowData){//修改时做如下处理
      //判定当前选中的上级菜单节点是否为当前要修改节点的子节点.
    	  var flag=isChild(rowData.id,selectedNode);
    	  if(flag){
    		  alert("不能选择当前节点以及对应子节点");
    		  return;
    	  }
       }
	  //2.将对象中内容,填充到表单
	   $("#parentId").data("parentId",selectedNode.id);
	   $("#parentId").val(selectedNode.name);
      }
	  //3.隐藏树对象
	  doHideTree();
  }

其中getselectNode是ztree的函数：

 //判定当前选中节点是否是当前节点的子节点
  function isChild(currentNodeId,selectNode){
	 if(selectNode.id==currentNodeId)return true;
	 var node=selectNode.getParentNode();
	 if(!node)return false;//如果node是空，表示selectNode是根节点
	 return isChild(currentNodeId,node);
  }

 //zTree取消按钮事件处理函数
  function doHideTree(){
		 $("#menuLayer").css("display","none");
  }

03.提交结果，修改或者新增。
在自动加载：

  $(".box-footer")
	  .on("click",".btn-cancel",doCancel)
	  .on("click",".btn-save",doSaveOrUpdate)

function doSaveOrUpdate(){
	  //1.获取表单数据
	   var params=doGetEditFormData();
	   var rowData=
	   $("#mainContentId").data("rowData");
	  //2.异步提交表单数据(post)
	   var insertUrl="menu/doSaveObject";
	   var updateUrl="menu/doUpdateObject";
	   var url=rowData?updateUrl:insertUrl;
	   if(rowData)params.id=rowData.id;//这里是update的操作，把id获取到post提交的参数列表中。如果是新增，id是自增的，不需要添加到参数列表中
	   $.post(url,params,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;
  }

  //编辑页面cancel事件处理
  function doCancel(){
	  //1.定义url
	  var url="menu/menu_list";
	  //2.异步加载列表页面
	  $("#mainContentId").load(url);
  }