📄 testwztree.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test WzTree Demo</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="wztree.css?12" media="screen" rel="stylesheet" type="text/css" />
<script src='wztree.js?333'></script>
<script src='jstest.js?333'></script>
</HEAD>
<BODY>
<div id='a' class="btns">
<div class="h10"></div>
<button onclick='js_add1();'>添加同级</button>
<button onclick='js_add2();'>添加下级</button>
<button onclick='js_edit();'>修改选择</button>
<button onclick='js_delete();'>删除选择</button>
<div class="ln"></div>
<button onclick="js_k01();">重新生成树</button>
<button onclick="js_k02();">前置复选框</button>
<button onclick="js_k03();">前置文本框</button>
<button onclick="js_k04();">后面加图片</button>
<button onclick="js_k05();">支掉图片后</button>
<div class="ln"></div>
<button onclick='js_kkk();'>点击树测试</button>
<textarea id='kkk' cols=8 rows=10> </textarea>
</div>
<!--
<textarea id='uuu' cols=6 rows=5> </textarea>
<div class="ln"></div>
<button onclick="js_k03();">反转选择</button>
<span title="第一行 第二行">看看这里</span>
<div id='b' class="pane">
<div class="row">
<div class="g2"></div>
<div class="fo"></div>
<span>根结点[g2 fo]</span>
</div>
<div class="has">
<div class="row">
<div class="grid"></div>
<div class="g8"></div>
<div class="fc"></div>
<span>结点1[g8 fc]</span>
</div>
<div class="row">
<div class="grid"></div>
<div class="gt"></div>
<div class="leaf"></div>
<span>结点3[gt leaf]</span>
</div>
<div class="row">
<div class="grid"></div>
<div class="gt"></div>
<div class="leaf"></div>
<span>结点5[gt leaf]</span>
</div>
<div class="row">
<div class="grid"></div>
<div class="g7"></div>
<div class="fo"></div>
<span>结点8[g7 fo]</span>
</div>
<div class="has">
<div class="row">
<div class="grid"></div>
<div class="grdv"></div>
<div class="g7"></div>
<div class="fo"></div>
<span>结点m[g7 fo]</span>
</div>
<div class="has">
<div class="row">
<div class="grid"></div>
<div class="grdv"></div>
<div class="grdv"></div>
<div class="g8"></div>
<div class="fc"></div>
<span>结点dddd[g7 fo]</span>
</div>
<div class="row">
<div class="grid"></div>
<div class="grdv"></div>
<div class="grdv"></div>
<div class="g7"></div>
<div class="fo"></div>
<span>结点k[g7 fo]</span>
</div>
<div class="has">
<div class="row">
<div class="grid"></div>
<div class="grdv"></div>
<div class="grdv"></div>
<div class="grdv"></div>
<div class="g3"></div>
<div class="leaf"></div>
<span>结点g[g3 leaf]</span>
</div>
</div>
<div class="row">
<div class="grid"></div>
<div class="grdv"></div>
<div class="grdv"></div>
<div class="g3"></div>
<div class="leaf"></div>
<span>结点h[g3 leaf]</span>
</div>
</div>
<div class="row">
<div class="grid"></div>
<div class="grdv"></div>
<div class="gt"></div>
<div class="leaf"></div>
<span>结点7[gt leaf]</span>
</div>
<div class="row">
<div class="grid"></div>
<div class="grdv"></div>
<div class="g8"></div>
<div class="fc"></div>
<span>结点s[g8 fc]</span>
</div>
<div class="row">
<div class="grid"></div>
<div class="grdv"></div>
<div class="g3"></div>
<div class="leaf"></div>
<span>结点7[g3 leaf]</span>
</div>
</div>
<div class="row">
<div class="grid"></div>
<div class="g3"></div>
<div class="leaf"></div>
<span>结点10[g3 leaf]</span>
</div>
</div>
<div class="h10"></div>
<div class="ln"></div>
<div class="row">
<div class="g1"></div>
<div class="fc"></div>
<span>根结点[g1 fc]</span>
</div>
<div class="ln"></div>
<div class="row">
<div class="grid"></div>
<div class="leaf"></div>
<span>结点X[leaf]</span>
</div>
<div class="ln"></div>
<div class="row">
<div class="grid"></div>
<div class="g4"></div>
<div class="fc"></div>
<span>结点Y[g4 fc]</span>
</div>
<div class="ln"></div>
<div class="row">
<div class="grid"></div>
<div class="g3"></div>
<div class="leaf"></div>
<span>结点Z[g3 leaf]</span>
</div>
<div class="ln"></div>
<div class="row">
<div class="grid"></div>
<div class="g5"></div>
<div class="fo"></div>
<span>结点M[g5 fo]</span>
</div>
<div class="has">
<div class="row">
<div class="grid"></div>
<div class="grid"></div>
<div class="g3"></div>
<div class="leaf"></div>
<span>结点N[g4 leaf]</span>
</div>
</div>
<div class="ln"></div>
<div class="row">
<div class="grid"></div>
<div class="g7"></div>
<div class="fo"></div>
<span>结点P[g7 fo]</span>
</div>
<div class="has">
<div class="row">
<div class="grid"></div>
<div class="grdv"></div>
<div class="g3"></div>
<div class="leaf"></div>
<span>结点Q[g3 leaf]</span>
</div>
</div>
</div>
-->
</BODY>
</HTML>
<script>
var datas = '1,0,根结点;2,1,结点2;3,1,结点3;4,2,结点4;5,2,结点5;6,5,结点6;7,5,结点7;20,5,结点20;8,7,结点8;A,7,结点A;9,8,结点9;11,5,结点K;12,11,结点L;13,11,结点Q;15,2,结点U;16,5,结点K;18,15,结点H;19,18,结点X;';
var k1 = new WzTree();
k1.setTreeData(datas);
k1.setTreeAreaWH([200,380]);
k1.setTreeLocaXY([160,30]);
k1.show();
</script>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -