【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”
@zTree 你好,想跟你请教个问题:请问一下大神,zTree在删除父节点时,需要判断是否有子节点,如果有就提示不能删除,如果没有,就可以删除了?我用的beforeRemove。。。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>用户管理系统</title>
<link href="<%=path%>/bootstrap_ace/ace/css/bootstrap.css" rel="stylesheet" />
<link href="<%=path%>/bootstrap_ace/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<link href="<%=path%>/plugins/select2/select2.min.css" rel="stylesheet" />
<link href="<%=path%>/js/jAlert/alert.css" rel="stylesheet" />
<link rel="stylesheet" href="<%=path%>/bootstrap_ace/ace/css/datepicker.css" />
<link rel="stylesheet" href="<%=path%>/bootstrap_ace/ace/css/bootstrap-timepicker.css" />
<link rel="stylesheet" href="<%=path%>/bootstrap_ace/ace/css/daterangepicker.css" />
<link rel="stylesheet" href="<%=path%>/bootstrap_ace/ace/css/chosen.css" />
<%-- <link rel="stylesheet" href="<%=path%>/css/zTreeStyle/metro.css"> --%>
<link rel="stylesheet" href="<%=path%>/css/css/demo.css">
<link rel="stylesheet" href="<%=path%>/css/css/zTreeStyle/zTreeStyle.css">
<script src="<%=path%>/js/ace/jquery.js"></script>
<%-- <script src="<%=path%>/js/ace/bootstrap.js"></script> --%>
<script src="<%=path%>/js/ace/jquery.ztree.all-3.5.js"></script>
<script src="<%=path%>/js/ace/jquery.ztree.core-3.5.js"></script>
<script src="<%=path%>/js/ace/jquery.ztree.excheck-3.5.js"></script>
<script src="<%=path%>/js/ace/jquery.ztree.exedit-3.5.js"></script>
<script src="<%=path%>/bootstrap_ace/ace/js/bootstrap-multiselect.js"></script>
<script src="<%=path%>/bootstrap_ace/bootstrap-table/bootstrap-table.js"></script>
<script src="<%=path%>/bootstrap_ace/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<script src="<%=path%>/bootstrap_ace/bootstrap-table/bootstrap-table-zh-CN.js"></script>
<script src="<%=path%>/plugins/select2/select2.js"></script>
<script src="<%=path%>/js/jAlert/alert.js"></script>
<script src="<%=path%>/js/jAlert/myAlert.js"></script>
<script src="<%=path%>/js/myCommon.js?v=<%=com.htfg.vpms.common.SysConfig.sysVersion%>"></script>
<script src="<%=path%>/Scripts/AllocationManager/Allocation.js?v=<%=com.htfg.vpms.common.SysConfig.sysVersion%>"></script>
<%-- <script src="<%=path%>/bootstrap_ace/ace/js/date-time/bootstrap-datepicker.js"></script>
<script src="<%=path%>/bootstrap_ace/ace/js/date-time/bootstrap-timepicker.js"></script> --%>
<script src="<%=path%>/bootstrap_ace/ace/js/date-time/moment.js"></script>
<script src="<%=path%>/bootstrap_ace/ace/js/date-time/daterangepicker.js"></script>
<%-- <script src="<%=path%>/bootstrap_ace/ace/js/ace-elements.js"></script> --%>
<!-- <script src="<%=path%>/bootstrap_ace/ace/js/date-time/locales/bootstrap-datetimepicker.zh-CN.js"></script>-->
<%-- <script src="<%=path%>/bootstrap_ace/ace/js/chosen.jquery.js"></script> --%>
<style type="text/css">
/* .form-control {
height: 30px;
} */
body {
font-size: 12px;
overflow-x : hidden;
overflow-y : visible;
}
.ztree li span.button.add {
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
*vertical-align: middle
}
.modal{
overflow: auto !important;
width:auto;
}
.scroll {
height: 260px;
width: 100%;
border: 1px solid #cecece;
overflow-y: scroll;
text-align: center;
background-color: #F0F0F0;
}
.modal-dialog {
width: 750px;
margin-top: 30px;
}
.audiotest{
cursor: pointer;
}
.audiotest:hover {
background:#ccc;
text-decoration: none;
}
.msg {
background-color: #6fb3e0;
/* font-size: 15px; */
font-weight: bolder;
color: white;
}
.msg a {
color: white;
}
.radio, .checkbox {
position: relative;
display: block;
margin-left:5px;
margin-top: 0;
margin-bottom: 0;
}
.myselect{
display: inline-block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;
}
.select2-container-multi .select2-choices {
min-height: 34px;
max-height: 34px;
overflow-y:auto;
}
.select2-container .select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 34px;
max-height:34px;
overflow-y:auto;
user-select: none;
-webkit-user-select: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0 5px;
width: 100%;
line-height: 20px;
}
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 34px;
user-select: none;
-webkit-user-select: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 34px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
border:solid #66afe9 1px;
outline:0;
}
</style>
</head>
<body style="margin: auto;height:100%;">
<script>
var zTree;
var newCount=0;
var demoIframe;
var treeNodes;
//增加时绑定删除
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
$("#removeBtn_"+treeNode.tId).unbind().remove();
$("#editBtn_"+treeNode.tId).unbind().remove();
};
//配置
var setting = {
check: {//复选框
enable: false
},
view: {
expandSpeed : "slow",
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
key:{
children: "children",
},
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
},
keep:{
leaf:true,
parent:true
}
},
edit: {
enable: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: showRenameBtn,
//showRemoveBtn: true,
//removeTitle: "删除节点",
//showRenameBtn: true,
//renameTitle: "编辑节点名称",
editNameSelectAll:true//修改时,节点内容全部选中
},
callback: {
//beforeExpand:beforeExpand,
//onAsyncSuccess:onAsyncSuccess,
//onAsyncError:onAsyncError,
// beforeDrag:beforeDrag,
beforeRemove : beforeRemove,
//beforeEditName:beforeEditName,
beforeRename : beforeRename,
/* onClick:function zTreeOnClick(event, treeId, treeNode){
alert(treeNode.tId + ", " + treeNode.name+", "+treeId);
var ids=[];
ids=getChildren(ids,treeNode); */
//onCheck:onCheck
/* beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
demoIframe.attr("src",treeNode.file + ".html");
return true;
}
} */
}
}
//}
//是否显示编辑按钮
function showRenameBtn(treeId, treeNode) {
//获取节点所配置的noEditBtn属性值
if (treeNode.noEditBtn != undefined && treeNode.noEditBtn) {
return false;
} else
return true;
}
//是否显示删除按钮
function showRemoveBtn(treeId, treeNode) {
//获取节点所配置的noEditBtn属性值
if (treeNode.noRemoveBtn != undefined && treeNode.noRemoveBtn) {
return false;
} else
return true;
}
//初始化目录树
$(document).ready(function(){
$.ajax({
async : false,
cache:false,
type: 'POST',
url: "<%=path%>/CaseLibrary/caseLibraryQuery.do",
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后处理函数。
/* var zTree = $.fn.zTree.getZTreeObj("tree");
var srcNode = zTree.getSelectedNodes();
var isNode = srcNode[0];
if(isNode.children.length()>0){
alert(1);
} */
treeNodes = data.rows;
$.each(treeNodes,function(index,node){
if(node.level==1){
node.noRemoveBtn=true;
node.noEditBtn=true;
node.open=true;
node.isParent=true;
//return false;
}
if(node.level==2){
node.open=true;
node.isParent=true;
}
});
var t = $("#tree");
t = $.fn.zTree.init(t, setting, treeNodes);
demoIframe = $("#testIframe");
demoIframe.bind("load", loadReady);
var zTree = $.fn.zTree.getZTreeObj("tree");
}
});
});
//节点展开
/* function beforeExpand(treeNode){
if(!treeNodes.isAjaxing){
startTime=new Date();
treeNode.times=1;
ajaxGetNodes(treeNode,"refresh");
return true;
}else{
alert("zTree正在下载数据中,请稍后展开节点。。。");
return false;
}
} */
/* if(treeNode.isParent){
var childNodes = zTree.removeChildNodes(treeNode);
var paramsArray = new Array();
for(var i = 0; i < childNodes.length; i++){
paramsArray.push(childNodes[i].id);
}
alert("删除父节点的id为:"+treeNode.id+"\r\n他的孩子节点有:"+paramsArray.join(","));
return;
}
alert("你点击要删除的节点的名称为:"+treeNode.name+"\r\n"+"节点id为:"+treeNode.id); */
/**
* 删除选中的子节点
*/
/* function removeChildNodes()
{
var treeObj = $.fn.zTree.getZTreeObj("tree");
//选中节点
var nodes = treeObj.getSelectedNodes();
for (var i=0, l=nodes.length; i < l; i++)
{
//删除选中的子节点
treeObj.removeChildNodes(nodes[i]);
}
} */
/* function treenodeClick(event, treeId, treeNode, clickFlag) {
//此处treeNode 为当前节点
var str ='' ;
str = getAllChildrenNodes(treeNode,str);
alert(str); //所有叶子节点ID
}
function getAllChildrenNodes(treeNode,result){
if (treeNode.isParent) {
var childrenNodes = treeNode.children;
if (childrenNodes) {
for (var i = 0; i < childrenNodes.length; i++) {
result += ',' + childrenNodes[i].id;
result = getChildNodes(childrenNodes[i], result);
}
}
}
return result;
} */
/* function getChildren(ids,treeNode){
ids.push(treeNode.id);
if (treeNode.isParent){
for(var obj in treeNode.children){
getChildren(ids,treeNode.children[obj]);
}
}
return ids;
} */
//删除节点
function beforeRemove(treeId, treeNode) {
debugger;
myConfirm('消息提示框','确认删除--'+ treeNode.name +'--节点吗?',function(){
//debugger;
var param = "id=" + treeNode.id;
/* if(treeNode.isParent){
var childNodes = zTree.removeNode(treeNode);
var paramsArray = new Array();
for(var i = 0; i < childNodes.length; i++){
paramsArray.push(childNodes[i].id);
}
} */
$.ajax({
url: "<%=path%>/CaseLibrary/DataBaseSUD.do?type=3&"+param,
type: "POST",
async: false,
success: function (res) {
if (res = "success") {
//myAlert("消息提示框","删除成功!",function(){
window.location.reload();
//});
} else {
myAlert("消息提示框","删除失败!",function(){
window.location.reload();
});
}
}
});
});
return false;
}
//修改节点
function beforeRename(treeId,treeNode,newName){
if(newName.length==0){
myAlert("消息提示框","节点名称不能为空");
setTimeout(function(){zTree.editName(treeNode)},10);
return false;
}
var param="id="+treeNode.id+"&level="+treeNode.level+"&sort="+treeNode.sort+"&pId="+treeNode.pId+"&name="+newName+"&remark="+treeNode.remark;
$.post("<%=path%>/CaseLibrary/DataBaseSUD.do?type=2&"+param,function(data){});
}
/*
if (addbtn) addbtn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("tree");
//$("#addDiv").show();
zTree.addNodes(treeNode, {id:(1000 + newCount), pId:treeNode.id, name:"子节点" + (newCount++)});
return false;
}) /* else{
var zTree = $.fn.zTree.getZTreeObj("tree");
$("#addDiv").hide();
};
*/
//新增节点
function addHoverDom(treeId, treeNode) {
var addStr;
if(treeNode.level<2){
//if(treeNode.name.indexOf("结束")<0){
addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='添加节点'></span>";
//}
}
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
sObj.after(addStr);
var addbtn = $("#addBtn_"+treeNode.tId);
if (addbtn) addbtn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("tree");
$("#addDiv").show();
var pId = treeNode.id;
$("#addPId").val(pId);
var level = treeNode.level+2;
$("#addLevel").val(level);
});
};
//取消添加案例
function removeAddDiv(){
$("#addCase").val(null);
$("#addDiv").hide();
}
<%-- $("#btn_save").click(function(){
$.post("<%=path%>/CaseLibrary/caseLibraryQuery.do",function(data){
var treeNodes = data.rows;
alert(treeNodes);
})
}) --%>
//保存按钮的方法
function saveAddDiv(){
debugger;
var reg=/^[\u4e00-\u9fa5a-zA-Z0-9]+$/;
var name = $("#addCase").val();
var pId = $("#addPId").val();
var level =$("#addLevel").val();
if(name==""){
myAlert("消息提示框","案例名称不能为空!");
return;
}else if(!reg.test(name)){
myAlert("消息提示框","案例名称只能是字母、数字和汉字,请重新填写!");
return;
}else{
var param = "pId="+pId+"&level="+level+"&name="+name;
$.ajax({
url: "<%=path%>/CaseLibrary/DataBaseSUD.do?type=1&"+param,
type: "POST",
async: false,
success: function (res) {
if (res = "success") {
//myAlert("消息提示框","新增成功!",function(){
window.location.reload();
$("#addCase").val("");
$("#addDiv").hide();
//});
} else {
myAlert("消息提示框","新增失败!",function(){
window.location.reload();
$("#addCase").val("");
$("#addDiv").hide();
});
}
}
});
}
return false;
}
<%-- var Ppname = prompt("请输入新节点名称 : ");
if(Ppname==null){
return;
}else if(Ppname==""){
alert("节点名称不能为空");
}else{
var temp = treeNode.level+2;
var param = "pId="+treeNode.id+"&level="+temp+"&name="+Ppname;
var zTree = $.fn.zTree.getZTreeObj("tree");
$.post("<%=path%>/CaseLibrary/DataBaseSUD.do?type=1&"+param,function(data){
if($.trim(data)!=null){
var treenode = $.trim(data);
console.log(treenode);
alert("----------"+treeNode.id);
zTree.addNodes(treeNode,{id:treenode,pId:treeNode.id,name:Ppname},true);
}
});
}
return false; --%>
//控制高度
function loadReady() {
var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
h = demoIframe.height() >= maxH ? minH:maxH ;
if (h < 2000) h = 2000;
demoIframe.height(h);
}
</script>
<div class="span">
<div class="col-sm-4">
<div>
<ul id="tree" class="ztree"></ul>
</div>
</div>
<div class="col-sm-8" style="margin-top:20px" id="addDiv" hidden>
<div class="panel panel-default" id="hideOrShow" style="width:400px;">
<div class="panel-heading">新增案例</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:20px">
<label class="control-label col-sm-4" for="addCase">案例名称</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="addCase" id="addCase">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<input type="hidden" class="form-control" name="addPId" id="addPId">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<input type="hidden" class="form-control" name="addLevel" id="addLevel">
</div>
</div>
<div class="form-group" style="margin-top:20px;margin-bottom:20px">
<div class="col-sm-1" >
<!-- <button type="button" class="btn btn-default" style="margin-left:140px" data-dismiss="modal" id="btn_save">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>保存
</button> -->
<button type="button" style="margin-left:140px" id="btn_save" class="btn btn-primary" onClick="saveAddDiv();">保存</button>
</div>
<div class="col-sm-1" style="text-align:left;">
<button type="button" class="btn btn-default" style="margin-left:210px" data-dismiss="modal" id="btn_del" onClick="removeAddDiv();">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>