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异步请求