<!DOCTYPE html>
<html lang="en" xmlns:div="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>zTree示例</title>
<link rel="stylesheet" type="text/css" href="./zTree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="./zTree/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./zTree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="./zTree/jquery.ztree.excheck.js"></script>
<style>
#confTree{
margin: 30px auto;
width: 800px;
height: auto;
}
/*按钮*/
.ztree {
padding: 0;
border: 2px solid #CDD6D5;
}
.ztree li[isparent='false']{
height: 40px;
line-height: 40px;
margin: 4px 0;
}
.ztree li > a {
vertical-align: middle;
height: 30px;
}
.ztree li > a {
width: 100%;
}
.ztree li > a,
.ztree li a.curSelectedNode {
padding-top: 0px;
height: auto;
border: none;
cursor: default;
opacity: 1;
}
.ztree li ul {
padding-left: 0px
}
/*内容显示行*/
.ztree div.meetRow{
width: 640px;
height: 25px;
line-height: 25px;
display: inline-block;
box-sizing: border-box;
color: #6c6c6c;
font-family: "SimSun";
font-size: 12px;
overflow: hidden;
}
.ztree div.meetRow span{
vertical-align: middle;
}
.ztree li[isparent='true'] div.meetRow{
/*border: 1px solid red;*/
height: 25px;
line-height: 25px;
}
.ztree li[isparent='false'] div.meetRow{
height: 40px;
line-height: 40px;
background: rgba(204, 204, 204, .5);
}
/*图标显示区域*/
.ztree li[isparent='false'] div.meetState{
width: 160px;
display: inline-block;
box-sizing: border-box;
height: 40px;
line-height: 40px;
background: rgba(204, 204, 204, .5);
}
/*状态图标*/
.meetIcon {
float: right;
width: 30px;
height: 40px;
margin:0 3px;
display: flex;
align-items: center;
justify-content: center;
}
.meetIcon>a {
width: 19px;
height: 19px;
cursor: pointer;
}
.confstate_offline {
background-image: url("./meetIcon/confstate_offline.png"); }
.confstate_online {
background-image: url("./meetIcon/confstate_online.png"); }
.h323meet_offline {
background-image: url("./meetIcon/h323meet_offline.png"); }
.h323meet_online {
background-image: url("./meetIcon/h323meet_online.png"); }
.tempwatch_offline {
background-image: url("./meetIcon/tempwatch_offline.png"); }
.tempwatch_online {
background-image: url("./meetIcon/tempwatch_online.png"); }
.screen_offline {
background-image: url("./meetIcon/screen_offline.png"); }
.screen_online {
background-image: url("./meetIcon/screen_online.png"); }
.ztree li span.button.pMetOnLine_ico_open,
.ztree li span.button.pMetOnLine_ico_close{background: url('./meetIcon/confstate_online.png') no-repeat;}
.ztree li span.button.pMetOffLine_ico_open,
.ztree li span.button.pMetOffLine_ico_close{background: url('./meetIcon/confstate_offline.png') no-repeat;}
.ztree li span.button.confstateonline_ico_open,
.ztree li span.button.confstateonline_ico_close,
.ztree li span.button.confstateonline_ico_docu{background: url('./meetIcon/confstate_online.png') no-repeat;}
.ztree li span.button.confstateoffline_ico_open,
.ztree li span.button.confstateoffline_ico_close,
.ztree li span.button.confstateoffline_ico_docu{background: url('./meetIcon/confstate_offline.png') no-repeat;}
.ztree li span.button.h323meetonline_ico_open,
.ztree li span.button.h323meetonline_ico_close,
.ztree li span.button.h323meetonline_ico_docu{background: url('./meetIcon/h323meet_online.png') no-repeat;}
.ztree li span.button.h323meetoffline_ico_open,
.ztree li span.button.h323meetoffline_ico_close,
.ztree li span.button.h323meetoffline_ico_docu{background: url('./meetIcon/h323meet_offline.png') no-repeat;}
.ztree li span.button.tempwatchoffline_ico_open,
.ztree li span.button.tempwatchoffline_ico_close,
.ztree li span.button.tempwatchoffline_ico_docu{background: url('./meetIcon/tempwatch_offline.png') no-repeat;}
.ztree li span.button.tempwatchonline_ico_open,
.ztree li span.button.tempwatchonline_ico_close,
.ztree li span.button.tempwatchonline_ico_docu{background: url('./meetIcon/tempwatch_online.png') no-repeat;}
.icon_dual_on { background:url("./meetIcon/confctrl-bg.png") -551px -681px no-repeat;}
.icon_dual_off{ background:url("./meetIcon/confctrl-bg.png") -513px -681px no-repeat;}
.icon_speaker_on { background:url("./meetIcon/confctrl-bg.png") -665px -681px no-repeat;}
.icon_speaker_off{ background:url("./meetIcon/confctrl-bg.png") -627px -681px no-repeat;}
.icon_quiet_on { background:url("./meetIcon/confctrl-bg.png") -437px -681px no-repeat;}
.icon_quiet_off{ background:url("./meetIcon/confctrl-bg.png") -399px -681px no-repeat;}
.icon_mute_on { background:url("./meetIcon/confctrl-bg.png") -494px -681px no-repeat;}
.icon_mute_off{ background:url("./meetIcon/confctrl-bg.png") -456px -681px no-repeat;}
.icon_selview_on { background:url("./meetIcon/confctrl-bg.png") -722px -681px no-repeat;}
.icon_selview_off{ background:url("./meetIcon/confctrl-bg.png") -684px -681px no-repeat;}
</style>
</head>
<body>
<div class='icon screen_online'></div>
<div class="layer">
<div id="tableMain">
<ul id="confTree" class="ztree"></ul>
<button onclick="addNode()">添加结点</button>
<button onclick="delNode()">删除结点</button>
<button onclick="upDateNode()">更新结点</button>
<button onclick="allSelect()">全选</button>
</div>
</div>
<script>
var addNode = function(){
var newMeetNode = onCreateMeetNode( 13, 14, 11, "网呈会场", 5, true, true, false, true, true, 1);
var meetNode = $.fn.zTree.getZTreeObj("confTree").getNodeByParam('id', newMeetNode.id, null);
if(!!meetNode){
// 结点已存在,更新结点数据
if(!meetNode.isParent){
meetNode.online = newMeetNode.online;
meetNode.mute = newMeetNode.mute;
meetNode.quiet = newMeetNode.quiet;
meetNode.screenNum = newMeetNode.screenNum;
meetNode.name = newMeetNode.name;
meetNode.iconSkin = newMeetNode.iconSkin;
$.fn.zTree.getZTreeObj("confTree").updateNode(meetNode);
}
}
else{
// 结点不存在,添加结点数据
var meetNode = $.fn.zTree.getZTreeObj("confTree").getNodeByParam('id', newMeetNode.pId, null);
$.fn.zTree.getZTreeObj("confTree").addNodes(meetNode, newMeetNode, true);
if(!!meetNode){
// 父结点,则展开
$.fn.zTree.getZTreeObj("confTree").expandNode(meetNode, true, tr