1. 下面是一种简单的树结构，使用的是jquery插件，需要先导入下面两个js文件
<script type="text/javascript" src="js/jquery.tree.js"></script>
<script type="text/javascript" src="js/jquery.tree.checkbox.js"></script>
<script type="text/javascript">
$(function () {
$("#demo_1").tree({
ui : {
theme_name : "checkbox"
},
plugins : {
checkbox : { }
}
});
});
</script>
<div class="demo" id="demo_1">
<ul>
<li id="1000" title="本市" class="open"><a href="#"><ins> </ins>本市</a>
<li id="2000" title="环京六省市" class="open"><a href="#"><ins> </ins>环京六省市</a>
<ul>
<li id="2001" title="河北(环京)" class="open"><a href="#"><ins> </ins>河北(环京)</a></li>
<li id="2002" title="辽宁(环京)" class="open"><a href="#"><ins> </ins>辽宁(环京)</a></li>
<li id="2003" title="内蒙(环京)" class="open"><a href="#"><ins> </ins>内蒙(环京)</a></li>
<li id="2004" title="山东(环京)" class="open"><a href="#"><ins> </ins>山东(环京)</a></li>
<li id="2005" title="山西(环京)" class="open"><a href="#"><ins> </ins>山西(环京)</a></li>
<li id="2006" title="天津(环京)" class="open"><a href="#"><ins> </ins>天津(环京)</a></li>
</ul>
</li>
<li id="3000" title="公安部" class="open" ><a href="#"><ins> </ins>公安部</a>
<ul>
<li id="3002" title="天津(公安部)" class="open" ><a href="#"><ins> </ins>天津(公安部)</a></li>
<li id="3003" title="河北(公安部)" class="open" ><a href="#"><ins> </ins>河北(公安部)</a></li>
<li id="3004" title="山西(公安部)" class="open" ><a href="#"><ins> </ins>山西(公安部)</a></li>
<li id="3005" title="内蒙古(公安部)" class="open" ><a href="#"><ins> </ins>内蒙古(公安部)</a></li>
<li id="3006" title="辽宁(公安部)" class="open" ><a href="#"><ins> </ins>辽宁(公安部)</a></li>
<li id="3007" title="吉林" class="open" ><a href="#"><ins> </ins>吉林</a></li>
<li id="3008" title="黑龙江" class="open" ><a href="#"><ins> </ins>黑龙江</a></li>
<li id="3009" title="上海" class="open" ><a href="#"><ins> </ins>上海</a></li>
<li id="3010" title="江苏" class="open" ><a href="#"><ins> </ins>江苏</a></li>
<li id="3011" title="浙江" class="open" ><a href="#"><ins> </ins>浙江</a></li>
<li id="3012" title="安徽" class="open" ><a href="#"><ins> </ins>安徽</a></li>
<li id="3013" title="福建" class="open" ><a href="#"><ins> </ins>福建</a></li>
<li id="3014" title="江西" class="open" ><a href="#"><ins> </ins>江西</a></li>
<li id="3015" title="山东(公安部)" class="open" ><a href="#"><ins> </ins>山东(公安部)</a></li>
<li id="3016" title="河南" class="open" ><a href="#"><ins> </ins>河南</a></li>
<li id="3017" title="湖北" class="open" ><a href="#"><ins> </ins>湖北</a></li>
<li id="3018" title="湖南" class="open" ><a href="#"><ins> </ins>湖南</a></li>
<li id="3019" title="广东" class="open" ><a href="#"><ins> </ins>广东</a></li>
<li id="3020" title="广西" class="open" ><a href="#"><ins> </ins>广西</a></li>
<li id="3021" title="海南" class="open" ><a href="#"><ins> </ins>海南</a></li>
<li id="3022" title="重庆" class="open" ><a href="#"><ins> </ins>重庆</a></li>
<li id="3023" title="四川" class="open" ><a href="#"><ins> </ins>四川</a></li>
<li id="3024" title="贵州" class="open" ><a href="#"><ins> </ins>贵州</a></li>
<li id="3025" title="云南" class="open" ><a href="#"><ins> </ins>云南</a></li>
<li id="3026" title="西藏" class="open" ><a href="#"><ins> </ins>西藏</a></li>
<li id="3027" title="陕西" class="open" ><a href="#"><ins> </ins>陕西</a></li>
<li id="3028" title="甘肃" class="open" ><a href="#"><ins> </ins>甘肃</a></li>
<li id="3029" title="青海" class="open" ><a href="#"><ins> </ins>青海</a></li>
<li id="3030" title="宁夏" class="open" ><a href="#"><ins> </ins>宁夏</a></li>
<li id="3031" title="新疆" class="open" ><a href="#"><ins> </ins>新疆</a></li>
</ul>
</li>
</ul>
</div>