你可以看下前台的html机构 后台只要返回相应格式的json数据然后动态创建js创建html即可
创新互联建站专注于古冶企业网站建设,响应式网站,电子商务商城网站建设。古冶网站建设公司,为古冶等地区提供建站服务。全流程定制网站制作，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务
不多说了，我估计你一看就明白了！！！！
script language="javascript"
window.onload=function(){
var main_j = document.documentElement.clientHeight-210;
document.getElementById('main_heigh').style.height = main_j + 'px';
var main_w = document.documentElement.clientWidth-202;
document.getElementById('main_heigh').style.width = main_w + 'px';
}
window.onresize=function(){
var main_j = document.documentElement.clientHeight-210;
document.getElementById('main_heigh').style.height = main_j +'px';
var main_w = document.documentElement.clientWidth-202;
document.getElementById('main_heigh').style.width = main_w + 'px';
}
/script
css、html和table。
前端布局使用css，即层叠样式表，控制页面的显示。以前是使用table进行布局的，但由于table布局不便于维护，每次修改的时候都需要更改页面结构。所以后来就逐渐被css所代替，在需要使用表格的时候才使用table。
除了要使用css之外，还要使用html。html用来表明页面的结构，css决定页面结构的显示方式。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
/head
body
script type="text/javascript"
function SH(){
if(document.getElementById("treeview").style.display=="block"){
document.getElementById("treeview").style.display="none";
document.getElementById("content").style.width="674px";
}else{
document.getElementById("treeview").style.display="block";
document.getElementById("content").style.width="474px";
}
}
/script
div style="width:700px; height:500px;"
div id="treeview" style="width:200px; height:500px; float:left; border:#000 1px solid; display:block"treeview/div
div id="c" style="width:20px; height:500px; float:left; border:#000 1px solid;"a href="#" onclick="SH()" style="width:20px; height:500px; display:block" title="点击此处显示或隐藏treeview"点击此处显示或隐藏/a/div
div id="content" style="width:474px; height:500px; float:left; border:#000 1px solid;"content/div
/div
/body
/html
将整个系统看做这样一个物理系统：质点和橡皮筋的系统；橡皮筋有个自然长度Length，当橡皮筋被拉长时产生弹力T；任意2个质点间存在反万有引力G（简单的说就是质量产生斥力，和物理系统相反）。当斥力和弹力平衡的时候，布局就结束了，算法简单描述如下：
设系统为G(V,E);
for (vi in V) {
vi.x = random ();
vi.y = random ();
}
while (未平衡) {
for (ei(vx, vy) in E) {
Fx += T(ei, vx, vy);
Ty += T(ei, vy, vx);
}
for (vi in V) {
for (vj in V) {
if (i == j) 跳过
Fi += G (vi, vj);
}
}
for (fi in F) {
vi.x = |fi| * cos(fi.angle);
vi.y = |fi| * sin(fi.angle);
}
}
其中弹力公式T(e, vi, vj)遵循胡克定律：F = Length(e) Length ? K * (Length(e) - Length) : 0; K 为胡克常数，酌情取值
万有引力公式G(vi, vj)遵循牛顿万有引力定律，但方向相反:
F = -G * Mass(vi) * Mass(vj) / (Distance(vi, vj) * Distance(vi, vj)); G 为万有引力常数，酌情取值，Mass(v)为质点v的质量，可直接去定点的边数；Distance(vi, vj)为质点vi 和vj之间的距离，根据勾股定理可到。
系统平衡的标准：合弹力=合斥力，表现为v.x和v.y不再发生变化或震动
注意：当随机初始化后，可能产生2个质点重叠的现象，这时2质点间的斥力可用常数替代，方向随机。若质点无质量，可使用一个小常数替代，如.0005
