springmvc+bootstrap风格的树形地区

系统用的是bootstrap，为了满足风格，找了一个bootstrap风格的树形插件做了个地区表。现在贴出代码记录下。

头部：

<!--ZTree开始-->
<link rel="stylesheet" href="plugins/zTree/bootstrap/metroStyle.css" type="text/css">
<script type="text/javascript" src="plugins/zTree/bootstrap/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="plugins/zTree/bootstrap/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="plugins/zTree/bootstrap/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="plugins/zTree/bootstrap/jquery.ztree.exedit.js"></script>
<!--ZTree结束-->

内容：

<div class="container-fluid" id="main-container">

<div id="page-content" class="clearfix">
  <table style="width:100%;" border="0">
  <tr>
  <!--左侧树开始-->
  <td style="width:15%;" valign="top" bgcolor="#F9F9F9" align ="left" style="display:none;">
<div style="width:15%">
<ul id="leftTree" class="ztree"></ul>
</div>
  </td>
  <!--左侧树结束-->
  <!--右侧信息开始-->
  <td style="width:85%;" valign="top">
  <div class="row-fluid" style="padding-left:10px">
<div class="row-fluid">
<input type="hidden" id="id" value="">
<table id="table_report" class="table table-striped table-bordered table-hover" width="50%">
<tr><td width="20%">地市标志</td><td id = "c1" width="80%"></td></tr>
<tr><td width="20%">地市名称</td><td id = "c2" width="80%"></td></tr>
<tr><td width="20%">上级机构</td><td id = "c3" width="80%"></td></tr>
</table>

<div class="page-header position-relative">
<table style="width:100%;">
<tr>
<td style="vertical-align:top;">
<!--<c:if test="${QX.add == 1 }">
<a class="btn btn-small btn-success" οnclick="add();">新增</a>
</c:if>-->
<c:if test="${QX.edit == 1 }">
<a class="btn btn-small btn-success" οnclick="editDepart();">编辑</a>
</c:if>
<!--<c:if test="${QX.del == 1 }">
<a class='btn btn-small btn-danger' title="删除" οnclick="delDepart();">删除</a>
</c:if>-->
</td>
<td style="vertical-align:top;"><div class="pagination" style="float: right;padding-top: 0px;margin-top: 0px;">${page.pageStr}</div></td>
</tr>
</table>
</div>
</form>
</div> 
<!-- PAGE CONTENT ENDS HERE -->
  </div><!--/row-->
  </td>
  <!--右侧信息结束-->
</div><!--/#page-content-->
</tr>
</table>
</div><!--/.fluid-container#main-container-->

js：

var setting = {
view: {
                selectedMulti: false
},
check: {
                enable: false
            },
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick
}
};
function showIconForTree(treeId, treeNode) {
return !treeNode.isParent;
};


$(document).ready(function(){
//$.fn.zTree.init($("#leftTree"), setting, zNodes);
onloadZTree();
});
//-->
function treeFrameT(){
var hmainT = document.getElementById("treeFrame");
var bheightT = document.documentElement.clientHeight;
hmainT .style.width = '100%';
hmainT .style.height = (bheightT-7) + 'px';
}
treeFrameT();
window.οnresize=function(){  
treeFrameT();
};
//加载ztree  
     function onloadZTree(){  
            var ztreeNodes;  
           $.ajax( {  
                async : true, //是否异步  
                cache : false, //是否使用缓存  
                type : 'post', //请求方式,post  
                dataType : "json", //数据传输格式  
                url : "<%=request.getContextPath() %>/area/findAllLibrary/ ", //请求链接  
                error : function() {  
                     alert('亲，网络有点不给力呀！');  
                },  
                success : function(data) {
                     ztreeNodes = eval( "["+data+"]" ); //将string类型转换成json对象
                     $.fn.zTree.init($( "#leftTree"), setting, ztreeNodes);  
                     zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo" );  
                     $( "#selectAll").bind("click" , selectAll);  
                     
                }  
           });  
     };
function beforeClick(treeId, treeNode, clickFlag) {
}
function onClick(event, treeId, treeNode, clickFlag) {
detail(treeNode.id);
}

controller：

@RequestMapping(value="/findAllLibrary")  
    @ResponseBody  
    public List<Object> findAllLibrary(HttpServletRequest request, HttpServletResponse response) throws Exception{
List<Object> listZTree = new ArrayList<Object>(); 
List<com.fh.entity.system.Area> list = areaService.findAllArea("");
String str = ""; 
        for (int i = 0; i < list.size(); i++) {  
        com.fh.entity.system.Area  area = list.get(i);//遍历
       str = "{id:'" +area.getArea_id() + "', pId:'"+area.getParent_id()+"', name:\""+area.getArea_name()+"\" }";//封装ztree需要格式的字符串  
       listZTree.add(str);  
   } 
         return listZTree;  
}

效果图：