ztree插件的使用

时间：2021-03-03 12:02:14

ztree插件的使用

上面是ztree官方API引入ztree的相关介绍，地址：http://www.treejs.cn/v3/api.php

注：必须先引入jQuery，然后再引入ztree相关js,因为ztree是在jQuery的基础上使用的。

//引入W3C声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　

//引入插件
<script type="text/javascript" src="js/z_tree/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/z_tree/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="js/z_tree/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="js/z_tree/jquery.ztree.exedit-3.5.js"></script>
	<link rel="stylesheet" href="css/z_tree/zTreeStyle.css" type="text/css">

　　

全部代码：

map.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
//引入W3C声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>map</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
　　　　　//引入相关插件
	<script type="text/javascript" src="js/z_tree/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/z_tree/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="js/z_tree/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="js/z_tree/jquery.ztree.exedit-3.5.js"></script>
	<link rel="stylesheet" href="css/z_tree/zTreeStyle.css" type="text/css">
　　　　　//引入devMap.js文件
	<script type="text/javascript" src="./js/dev/devMap.js"></script>
	
	<script type="text/javascript">
		$(function() {
			getdevnumber();
		});
	</script>
	
  </head>
  
  <body>
  	
	<div id="tools_panel_add" onclick="devnumber()">
		<div class="BMapLib_box_name">统计</div>
		<div id="divztree" class="childClass" style="position: absolute; left: 0px; top:64px;display: none; background: #FFF;">
			<div class="diyDialog" style="width: 300px;bsckground:#FFF;">
				<ul class="ztree" id="treedivid" style="font-size: 16px;overflow: auto;">
				</ul>
			</div>
		<div id="divztreenumber" style=" background:#FFF;width: 300px; font-size: 16px;display: none;">
		<span>终端总数 :</span>
		<span id="number"></span>
		<span>个</span>
		<div></div>
		<span>已注册 :</span>
		<span id="yesnumber"></span>
		<span>个</span>
		<div></div>
		<span>未注册 ：</span>
		<span id="nonumber"></span>
		<span>个</span>
	</div>
</div>
		
	
  </body>
</html>

　　

　　devMap.js
var dev_number=0;
function devnumber(){
	if(dev_number==0){
		$("#divztree").css("display","none");
		console.log("dev_number"+dev_number)
	}else{
		var divo=document.getElementById("divztree");
		var divoplay=divo.currentStyle["display"];
		if(divoplay=="none"){
		$("#divztree").css("display","block");
		}else{	
		$("#divztree").css("display","none");
		}
	}
}



//分区信息调用
function getdevnumber (){
	getSectorsBC(loginName,'1','10000');//这里采用调用js的方法，可替换成别的方式，如ajax异步
	window.event.cancelBubble = true;//阻止冒泡时间
}

//分区返回数据
function getSectorsCallBackBC(data){
	console.log(data);
	//alert(data);
	
	if(data.result == '0') {
		var datas=data.msg[0].rows;
		if(datas.length<0){
		}else{
                	$.fn.zTree.init($("#treedivid"), setting, datas);
			dev_number=1;
		}
		
	} else {
		usedMessageTb('1', "获取分区失败");

	}
}


//setting相关配置可参考ztreesetting详细文档
var setting = {
		check: {
			enable: false,
			chkStyle: "checkbox"
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "parentId",
				rootPId: 0
			}
		},
		async: {
			enable: true
		},
		view: {
			expandSpeed: false,
			autoCancelSelected: false,
			selectedMulti: false,
			showLine:true,
			showTitle: false
		},
		callback: {
			onClick:getSectorID   //点击结点后调用的方法
		}
	};

function getSectorID(event, treeId, treeNode)
{
	var sectorID = treeNode.id;
	$('#sectorId').val(sectorID);
	
	// 展开树节点
	var zTree = $.fn.zTree.getZTreeObj("treedivid");
	zTree.expandNode(treeNode, true, false, true);
	
	mapgetDevsBC(sectorID);
	
};
//调用js接口，访问后台终端数据
function mapgetDevsBC(sectorID){
	console.log("id:"+sectorID);
	var devmap={"dev_state":3,"dev_switchs":3,"sector_id":sectorID,"condition":"","page":1,"perPage":10000};
	console.log(devmap);
	getDevsBC(loginName,devmap);
};
//终端数据返回
function getDevsCallBackBC(data){
	console.log("datadatadata:"+data);
	if(data.result=='0'){
		var totle=data.msg[0].total;//注册总数
		var rows=data.msg[0].rows;
		var dev_stateyes=0;//注册成功个数
		var dev_stateno=0;//注册失败个数
		for(var i=0,l=rows.length;i<l;i++){
			if(rows[i].dev_state=='0'){
				dev_stateyes++;
			}else{
				dev_stateno--;
			}
		}
		console.log("**************************"+totle+"********"+dev_stateyes+"*********"+dev_stateno);
		$('#number').html(totle);
		$('#yesnumber').html(dev_stateyes);
		$('#nonumber').html(dev_stateno);
		$("#divztreenumber").css("display", "block");
	}else{
		usedMessageTb('1', "获取终端数量失败");
		console.log("reason:"+data.reason);
		$("#divztreenumber").css("display", "none");
	}
	
};

　　bc_microsys.js

//验证是否为空
function checkNullOfData(data) {
	if(null == data || "" == data) {
		return true;
	} else {
		return false;
	}
}

//验证特殊符号
function illegalChar(str) {
	if($.inArray("!",str) >= 0) {
		return false;
	}
	if($.inArray("@",str)>= 0) {
		return false;
	}
	if($.inArray("$",str)>= 0) {
		return false;
	}
	if($.inArray("%",str)>= 0) {
		return false;
	}
	if($.inArray("_",str)>= 0) {
		return false;
	}
	if($.inArray(".",str)>= 0) {
		return false;
	}
	if($.inArray("'",str)>= 0) {
		return false;
	}
	if($.inArray("\"",str)>= 0) {
		return false;
	}
	if($.inArray("\\",str)>= 0) {
		return false;
	}
	if($.inArray("/",str)>= 0) {
		return false;
	}
	if($.inArray(",",str)>= 0) {
		return false;
	}
	if($.inArray("#",str)>= 0) {
		return false;
	}
	if($.inArray("<",str)>= 0) {
		return false;
	}
	if($.inArray(">",str)>= 0) {
		return false;
	}
	if($.inArray("(",str)>= 0) {
		return false;
	}
	if($.inArray(")",str)>= 0) {
		return false;
	}
	return true;
}

/**
 * 获取用户权限下的分区信息
 */
function getSectorsBC(loginName, page, perPage) {
	var result = "1";
	var reason = "20300";
	if(checkNullOfData(loginName)) {
		alert(loginName)
		reason = "20301";
		return getSectorsCallBackBC(getResult_BC(result, reason));
	} else {
		if(!illegalChar(loginName)) {
			return getSectorsCallBackBC(getResult_BC("1", "10010"));
		}
	}
	if(checkNullOfData(page)) {
		page = '1';
	} else {
		if(!illegalChar(page)) {
			return getSectorsCallBackBC(getResult_BC("1", "10010"));
		}
	}
	if(checkNullOfData(perPage)) {
		perPage = '20';
	} else {
		if(!illegalChar(perPage)) {
			return getSectorsCallBackBC(getResult_BC("1", "10010"));
		}
	}
	//跨域
	$.ajax( {
		type: 'get',
		url: requestUrl + 'bc_getSecotrInfosByUser.action',
		data: 'loginName=' + loginName + 
			'&page=' + page + '&perPage=' + perPage + 
			'&time=' + new Date().getTime(),
		dataType: 'jsonp',
		jsonp: 'callback',
		jsonpCallback: 'getSectorsCallBackBC',
		success:function(data) {
	}
	});
}

/**
 * 获取用户权限下的终端信息
 * 
 */
function getDevsBC(loginName, dev) {
	var result = "1";
	var reason = "20300";
	if(checkNullOfData(loginName)) {
		reason = "20301";
		return getDevsCallBackBC(getResult_BC(result, reason));
	} else {
		if(!illegalChar(loginName)) {
			return getDevsCallBackBC(getResult_BC("1", "10010"));
		}
	}
	if(checkNullOfData(dev)) {
		reason = "20310";
		return getDevsCallBackBC(getResult_BC(result, reason));
	}
	var dev_state = dev.dev_state;
	if(checkNullOfData(dev_state)) {
		reason = "20311";
		return getDevsCallBackBC(getResult_BC(result, reason));
	} else {
		if(!illegalChar(dev_state)) {
			return getDevsCallBackBC(getResult_BC("1", "10010"));
		}
	}
	var dev_switchs = dev.dev_switchs;
	if(checkNullOfData(dev_switchs)) {
		reason = "20312";
		return getDevsCallBackBC(getResult_BC(result, reason));
	} else {
		if(!illegalChar(dev_switchs)) {
			return getDevsCallBackBC(getResult_BC("1", "10010"));
		}
	}
	var sector_id = dev.sector_id;
	if(checkNullOfData(sector_id)) {
		sector_id = '';
	} else {
		if(!illegalChar(sector_id)) {
			return getDevsCallBackBC(getResult_BC("1", "10010"));
		}
	}
	var condition = dev.condition;
	if(checkNullOfData(condition)) {
		condition = '';
	} else {
		if(!illegalChar(condition)) {
			return getDevsCallBackBC(getResult_BC("1", "10010"));
		}
	}
	var page = dev.page;
	var perPage = dev.perPage;
	if(checkNullOfData(page)) {
		page = '1';
	} else {
		if(!illegalChar(page)) {
			return getDevsCallBackBC(getResult_BC("1", "10010"));
		}
	}
	if(checkNullOfData(perPage)) {
		perPage = '20';
	} else {
		if(!illegalChar(perPage)) {
			return getDevsCallBackBC(getResult_BC("1", "10010"));
		}
	}
	//跨域
	$.ajax( {
		type: 'get',
		url: requestUrl + 'bc_getDevInfosByUser.action',
		data: 'loginName=' + loginName + '&dev_state=' + dev_state + 
			'&dev_switchs=' + dev_switchs + '&sector_id=' + sector_id + 
			'&condition=' + encodeURI(condition) + 
			'&page=' + page + '&perPage=' + perPage + 
			'&time=' + new Date().getTime(),
		dataType: 'jsonp',
		jsonp: 'callback',
		jsonpCallback: 'getDevsCallBackBC',
		success:function(data) {
		}
	});
}

　　因为后台数据在宁外一个项目中取得，宁外一个项目只开放js接口，所以采用的是跨域请求获取后台数据。如果在同一个项目中，可以直接使用ajax异步请求

 
标签：

相关文章