springmvc+bootstrap风格的树形地区

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

头部：

<!--ZTree开始-->

<link rel="stylesheet" href="plugins/zTree/bootstrap/metroStyle.css" target="_blank" rel="external nofollow" 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%;" >

  <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;  

}

效果图：