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 + '§or_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异步请求
