ztree基本操作

modulePage.html

<ul id="modules" class="ztree"></ul>

case.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例管理</title>
<link rel="stylesheet" href="/autotest/css/reset.css" />
<link rel="stylesheet" href="/autotest/css/common.css" />
<link rel="stylesheet" href="/autotest/css/ace.min.css">
<link rel="stylesheet" href="/autotest/css/font-awesome.min.css">
<link rel="stylesheet" href="/plugins/zTree_v3/css/metroStyle/metroStyle.css" type="text/css">
<link rel="stylesheet" href="/autotest/css/bootstrap.pagination.css" type="text/css">

<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/autotest/js/effect.js"></script>
<script src="/autotest/js/bootstrap.min.js"></script>
<script src="/autotest/js/ace-elements.min.js"></script>
<script src="/autotest/js/ace.min.js"></script>

<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="/js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="/plugins/layer-3.1.1/layer.js"></script>
</head>
<body>
	<div class="header clearfix">
		<div id="topPage"></div>
	</div>
	<main>
		<div class="wl clearfix">
			<div class="float_l w200 l-piece">
				<div id="modulePage" style="overflow: hidden;margin-left: 0px;"></div>
			</div>
			<div class="float_r r-piece">
				<table class="table_common_s mt20">
					<tbody id="datbody">
					</tbody>
				</table>
				<ul id="pager" class="pagination"></ul>
			</div>
		</div>
		</div>
	</main>
</body>
<script type="text/javascript" charset="utf-8" src="/autotest/autotest-js/module/module.js"></script>
<script type="text/javascript" src="/autotest/common-js/common.js"></script>
<script type="text/javascript" src="/autotest/autotest-js/cases/cases.js"></script>
</html>

module.js

var module;
var zNodes = [];
var setting = {
	async : {
		enable : true
	},
	view : {
		showLine : true,
		expandSpeed : "slow",
		selectedMulti : false
	},
	callback : {
		beforeDrag : beforeDrag
	},
	data : {
		simpleData : {
			enable : true,
			idKey : "id",
			pIdKey : "parentid",
			rootPId : 0
		}
	}
};
// 禁止拖拽
function beforeDrag(treeId, treeNodes) {
	return false;
}
/**
 * 设定setting，初始化树
 * @param setting
 */
function initTree(setting) {
	loadNodes();
	$.fn.zTree.init($("#modules"), setting, zNodes);
	module = $.fn.zTree.getZTreeObj("modules");
	module.expandAll(true);
	var nodes = module.getNodes();
}
function initTree() {
	loadNodes();
	$.fn.zTree.init($("#modules"), setting, zNodes);
	module = $.fn.zTree.getZTreeObj("modules");
	module.expandAll(true);
	var nodes = module.getNodes();
}
/**
 * 重新渲染
 * @param treeNode
 */
function reloadTree(treeNode) {
	loadNodes();
	module = $.fn.zTree.init($("#modules"), setting, zNodes);
	module.expandAll(true);
	module.selectNode(treeNode);
}
/**
 * 初始化treeNodes
 */
function loadNodes() {
	$.ajax({
		url : '/module/getAllModules',
		type : 'get',
		cache : false,
		async : false,
		success : function(res) {
			res = JSON.parse(res);
			if (res.messageCode == 1) {
				zNodes = res.details;
			} else {
				alert("加载数据异常!");
			}
		}
	});
};

cases.js

var cases;
var strs;
var dtbody = $("#datbody");
var checkedArray = new Array();
var count=0;
var checkId;
var name;
$("#modulePage").load("/pages/module/modulePage.html");
$("#topPage").load("/pages/commonPage/top.html");
/**
 * 查询功能
 */
function search(){
	name=$("#name").val();
	loadCases();
}
/**
 * 清除查询
 */
function clearSearch(){
	name="";
	$("#name").val("");
	loadCases();
}

//checkbox选中-全选
$('#checkedAll').click(function() {
	$('[name=fx]:checkbox').prop('checked', this.checked);
});
//checkbox选中-删除功能
function delCase(){
	var checkFlag=$("input[type='checkbox']").is(':checked');
	if(checkFlag==true){
		$('[name=fx]:checkbox:checked').each(function() {
			 checkedArray.push($(this).val());
			 count++;
		 });
		console.info(checkedArray);
		checkedArray = new Array();
		$.ajax({
			
		});
	}else{
		layer.alert("请至少选中一条数据!");
		return;
	}
}
/**
 * 加载列表数据
 */
function loadCases() {
	$('#checkedAll').prop('checked', false);
	var data = {
		pageNum : 1,
		pageSize : 5
	};
	if(checkId!=""){
		data.moduleId=checkId
	}
	if(name!=""){
		data.name=name;
	}
	$.ajax({
		url : "/cases/getAllCases",
		datatype : 'json',
		type : "Post",
		data : data,
		success : function(result) {
			result = JSON.parse(result);
			console.info(result);
			if (result.messageCode == 1) {
				cases = result.details;
				if (cases != null) {
					loadData(cases);
				}
				var options = {
					bootstrapMajorVersion : 3,
					alignment: "right",
					shouldShowPage: true,//是否显示该按钮
					currentPage : result.details.pageNum>0?result.details.pageNum:1, //当前页数  
					totalPages : result.details.pages>0?result.details.pages:1, //总页数  
					itemTexts : function(type, page, current) {
						switch (type) {  
                        case "first":  
                            return "首页";  
                        case "prev":  
                            return "上一页";  
                        case "next":  
                            return "下一页";  
                        case "last":  
                            return "末页";  
                        case "page":  
                            return page;  
                    	}  
					},
					onPageClicked:function (event, originalEvent, type, page) {
						$('#checkedAll').prop('checked', false);
						searchData={
							pageNum : page,
							pageSize:5
						}
						if(checkId!=""){
							searchData.moduleId=checkId;
						}
						if(name!=""){
							searchData.name=name;
						}
						$.ajax({
							url : "/cases/getAllCases",
							datatype : 'json',
							type : "Post",
							data :searchData,
							success : function(result) {
								result = JSON.parse(result);
								cases = result.details;
								if (cases != null) {
									loadData(cases);
								}
							}
						});
					}
				};
				$('#pager').bootstrapPaginator(options); 
			}
		}
	});
}
//渲染数据
function loadData(cases){
	strs="";
	dtbody.empty();
	$.each(cases.list,function(index, item) {
		strs += "<tr class='table_bo'>";
		strs += "<td><input type='checkbox' name='fx' value='"+item.id+"'/>"+ item.name+ "</td>";
		strs += "<td>"+ item.moduleName+ "</td>";
		strs += "<td>"+ (new Date(item.createDate)).Format("yyyy-MM-dd")+ "</td>";
		strs += "<td>"+ (new Date(item.updateDate)).Format("yyyy-MM-dd")+ "</td>";
		strs += "<td><a class='but btn_ash m5' href='#'>编辑</a> <a class='but btn_ash m5' href='#'>执行</a> <a class='but btn_ash m5' href='#'>手工案例</a></td>";
		strs += "</tr>"
	});
	dtbody.append(strs);
}

/**
 * ztree相关操作
 */
//定制ztreeSetting
var setting = {
	async : {
		enable : true
	},
	view : {
		showLine : true,
		expandSpeed : "slow",
		selectedMulti : false,
		addHoverDom: addHoverDom,
		removeHoverDom: removeHoverDom
	},
	edit : {
		enable : true,
		removeTitle : "删除",
		renameTitle : "修改",
		showRemoveBtn : true,
		showRenameBtn : true
	},
	callback : {
		beforeDrag : beforeDrag,
		beforeRename: zTreeBeforeRename,
		onRename: zTreeOnRename,
		beforeRemove: zTreeBeforeRemove,
		onRemove: zTreeOnRemove,
		onClick: zTreeOnClick
	},
	data : {
		simpleData : {
			enable : true,
			idKey : "id",
			pIdKey : "parentid",
			rootPId : 0
		}
	}
};
//禁止拖拽
function beforeDrag(treeId, treeNodes) {
	return false;
}
var renameData;
var removeData;
var addData;
/**
 * 修改前操作
 * @param treeId
 * @param treeNode
 * @param newName
 * @param isCancel
 * @returns {Boolean}
 */
function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
	if (newName.length == 0) {
		layer.alert("节点名称不能为空.");
		return false;
	}
	if (typeof (treeNode.id) == "undefined") {
		var r = confirm("确定新增[" + newName + "]吗？");
		if (r == true) {
			addData = {
				name : newName,
				parentid : treeNode.pId
			};
			return true;
		} else {
			reloadTree(treeNode);
			return false;
		}
	} else {
		var r = confirm("确定将[" + treeNode.name + "]" + "修改为[" + newName + "]吗？");
		if (r == true) {
			renameData = {
				id : treeNode.id,
				name : newName
			};
			return true;
		} else {
			reloadTree(treeNode);
			return false;
		}
	}
}
/**
 * 修改操作
 * @param event
 * @param treeId
 * @param treeNode
 * @param isCancel
 */
function zTreeOnRename(event, treeId, treeNode, isCancel) {
	if (typeof (treeNode.id) == "undefined") {
		var returnId;
		$.ajax({
			url : '/module/addModule',
			type : 'post',
			data : addData,
			cache : false,
			async : false,
			success : function(res) {
				res = JSON.parse(res);
				if (res.messageCode == 1) {
					returnId = res.details.id;
					layer.alert("添加成功!");
				}
			}
		});
		treeNode.id = returnId;
		module.updateNode(treeNode);
	} else {
		$.ajax({
			url : '/module/updateModule',
			type : 'post',
			data : renameData,
			cache : false,
			async : false,
			success : function(res) {
				res = JSON.parse(res);
				if (res.messageCode == 1) {
					layer.alert("修改成功!");
				}
			}
		});
		loadNodes();
		module = $.fn.zTree.init($("#modules"), setting, zNodes);
		module.expandAll(true);
	}
	loadCases();
}
/**
 * 删除前操作
 * @param treeId
 * @param treeNode
 * @returns {Boolean}
 */
function zTreeBeforeRemove(treeId, treeNode) {
	var r = confirm("确定将[" + treeNode.name + "]" + "删除吗？");
	if (r == true) {
		removeData = {
			id : treeNode.id
		}
		return true;
	} else {
		reloadTree(treeNode);
		return false;
	}
}
/**
 * 删除操作
 * @param event
 * @param treeId
 * @param treeNode
 */
function zTreeOnRemove(event, treeId, treeNode) {
	$.ajax({
		url : '/module/delModule',
		type : 'post',
		data : removeData,
		cache : false,
		async : false,
		success : function(res) {
			res = JSON.parse(res);
			if (res.messageCode == 1) {
				layer.alert("删除成功!");
			}
		}
	});
	var pNode = treeNode.getParentNode();
	reloadTree(pNode);
}
/**
 * 点击事件
 * @param event
 * @param treeId
 * @param treeNode
 */
function zTreeOnClick(event, treeId, treeNode) {
	checkId=treeNode.id;
	if (checkId == 1) {
		checkId = "";
	}
	loadCases();
};
/**
 * 经过时添加新增按钮
 * @param treeId
 * @param treeNode
 */
function addHoverDom(treeId, treeNode) {
	var sObj = $("#" + treeNode.tId + "_span");
	if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) {
		return;
	}
	var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
			+ "' title='添加' οnfοcus='this.blur();'></span>";
	sObj.after(addStr);
	var btn = $("#addBtn_" + treeNode.tId);
	if (btn)btn.bind("click", function() {
		module.addNodes(treeNode, {
			pId : treeNode.id,
			name : ""
		});
		var node = module.getNodeByParam("name", "", null);
		module.editName(node);
		return false;
	});
};
/**
 * 移除后让添加按钮消失
 * @param treeId
 * @param treeNode
 */
function removeHoverDom(treeId, treeNode) {
	$("#addBtn_" + treeNode.tId).unbind().remove();
};
/**
 * 初始化函数
 */
$(function() {
	//加载左侧数结构
	initTree(setting);
	//渲染数据
	loadCases();
});

猜你喜欢