前端技术及“动吧”项目实战了解

确定
取消

通过上面的标签内元素信息可以得知上图中的“X”和“取消”按钮对应的名称都是“btn-cancel”，那么我们可以在类选择器上注册该事件即可，具体代码如下：
$(function(){
$(".btn-cancel").click(doCancel);
})
//点击zTree中的cancel按钮或右上角的close叉号时，执行此函数
function doCancel(){

$("#menuLayer").css("display","none");

}

btn-confirm ---代表“确定”

$(function(){
$(".btn-cancel").click(doCancel);
$(".btn-confirm").click(doConfirm);
})
//点击zTree中的确定按钮时执行此函数
function doConfirm(){
//1.获取菜单树中选中的菜单对象
let nodes=zTree.getSelectedNodes();//查官方treejs.cn
//console.log(nodes);//输出的目的是检测的菜单在服务端响应的结果是什么
//2.获取选中zTree节点的id和name，并将其值填充到表单上
//2.1借助jQuery中data函数将节点id值存储到某个对象上,其语法为：
//data(key[,value])，假如只指定key表示取值，两个都指定表示存值。
$("#parentId").data("parentId",nodes[0].id);
//2.2借助jQuery中val函数将name值填充到表单中,val函数的具体语法：
//val([value]),当没有value时表示获取值，当有value时表示赋值。
$("#parentId").val(nodes[0].name);
//3.隐藏zTree对象
doCancel();
}

思维逻辑：
1.注册“save”事件；2.获取表单数据；3.拿到表单数据以后异步提交至服务器端；4.服务器拿到数据后提交到数据库以后可能会反馈给客户端一个响应结果；5.客户端基于响应的结果按需局部刷新页面信息。

Cancel
Save

根据上面的代码信息得知“save”按钮---btn-save
$(function(){
$(".btn-cancel").click(doCancel);
$(".btn-confirm").click(doConfirm);
$(".box-footer").on("click",".btn-save",doSaveOrUpdate);
})
//提交表单数据
function doSaveOrUpdate(){
//1.获取表单数据
let type=$("form inputchecked").val();
let name=$("#nameId").val();
let parentId=$("#parentId").data("parentId");
let Url=$("#url").val();
let permission=$("#permissionId").val();
let sort=$("#sortId").val();
//2.校验表单数据
可以利用正则表达式进行校验
//3.异步提交表单数据并基于响应结果刷新页面。
let saveUrl="/menu/doSaveObject";
let params={

name:name,
type:type,
Url:Url,
permission:permission,
sort:sort

}
console.log(params);
$.post(Url,params,function(result){
if(result.state==1){

alert(result.message);
//刷新页面
$("#mainContentId").load("/menu/menu_list");

}else{

alert(result.message);
    }
})

}