zTree的简单使用

理论可以看：http://www.cnblogs.com/shinhwazt/p/5828031.html

zTree包：链接：http://pan.baidu.com/s/1eR4xP6M 密码：w11x

zTree的使用依赖于js，所以要先引入js

<link href="${ctx}/js/plugins/zTree_v3-master/css/demo.css" rel="stylesheet">
<link href="${ctx}/js/plugins/zTree_v3-master/css/metroStyle/metroStyle.css" rel="stylesheet">
<script src="${ctx}/js/plugins/zTree_v3-master/js/jquery.ztree.core.js"></script>
<script src="${ctx}/js/plugins/zTree_v3-master/js/jquery.ztree.excheck.js"></script>
<script src="${ctx}/js/plugins/zTree_v3-master/js/jquery.ztree.exedit.js"></script>

我这个是简单数据模式

<div class="content_wrap" id="left" >
<input type="hidden" id="power_id" name="power_id" value="0" />
<input type="hidden" name="JsonArr" id="JsonArr" value=''>
<ul id="treeDemo" class="ztree" style="background: #FFFFFF;border: 0px ;height:100%;"></ul>
</div>

在对应的js中

$(function() {
　　log.initTree();
}）；
var log = {
    initTree: function () {
        $.ajax({
            url : ctx + "/log/getDate.shtml",
            type : 'post',
            success : function(data) {
                if (data.flag) {
                    var jsonstr = data.jsonArr;
                    $("#JsonArr").val(jsonstr);
                    var setting = {
                            data: {
                                simpleData: {
                                    enable: true
                                }
                            },
                            callback: {
                                onClick: zTreeOnClick
                            }
                        };
                        $.fn.zTree.init($("#treeDemo"), setting,JSON.parse($("#JsonArr").val()));
                    //console.log("jsonstr----"+jsonstr)
                    //console.log("JSON.parse()----"+JSON.parse($("#JsonArr").val()));
                } else {
                    layer.msg("操作失败，请重试!");
                }
            }
        });

     }
};

function zTreeOnClick(event, treeId, treeNode) {
$('#power_id').val(treeNode.id);
$('#log_table').bootstrapTable('refresh');
};

在controller中

@RequestMapping(value="/getDate", produces = "application/json;charset=UTF-8")
    @ResponseBody
    public JSONObject getDate(){
        JSONObject result = new JSONObject();
        try{
            JSONArray jsonArr = new JSONArray();
            JSONObject allJson = new JSONObject();
            allJson.put("id", 0);
            allJson.put("open", true);
            allJson.put("pId", -1);
            allJson.put("name","全部分类");
            jsonArr.add(allJson);
            //查询所有菜单
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("parent_id", -1);
            map.put("sys_type", 1);//系统类型  0：管理平台  1：场馆后台  2：商城后台
            List<Power> powerList = powerService.getPowerByGroupLevel(map);
            for (Power power : powerList) {
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("id", power.getPower_id());
                jsonObject.put("pId", 0);
                jsonObject.put("open", false);
                jsonObject.put("name", power.getPower_name());
                jsonArr.add(jsonObject);
                if (power.getChildcnt() > 0) {
                    map.put("parent_id", power.getPower_id());
                    List<Power> powerChildList = powerService.getPowerByGroupLevel(map);
                    for (Power powerCh : powerChildList) {
                        JSONObject jsonObjectCh = new JSONObject();
                        jsonObjectCh.put("id", powerCh.getPower_id());
                        jsonObjectCh.put("pId", powerCh.getParent_id());
                        jsonObjectCh.put("open", false);
                        jsonObjectCh.put("name", powerCh.getPower_name());
                        jsonArr.add(jsonObjectCh);
                    }
                }
            }
            result.put("flag", true);
            result.put("jsonArr", jsonArr.toString());
        }catch(Exception ex){
            logger.error("获取日志树形菜单数据出错!",ex);
            ex.printStackTrace();
        }
        return result;
    }

result的数据：

{"jsonArr":"[{\"id\":0,\"pId\":-1,\"open\":true,\"name\":\"全部分类\"},
{\"id\":1115000001,\"open\":false,\"pId\":1115000000,\"name\":\"商品分类\"},{\"id\":1115000002,\"open\":false,\"pId\":1115000000,\"name\":\"商品信息\"},
{\"id\":1116000000,\"open\":false,\"pId\":0,\"name\":\"会员管理\"},{\"id\":1116000001,\"open\":false,\"pId\":1116000000,\"name\":\"会员信息管理\"},
{\"id\":1113300000,\"open\":false,\"pId\":1113000000,\"name\":\"营业点管理\"},{\"id\":1113400000,\"open\":false,\"pId\":1113000000,\"name\":\"用户管理\"},
{\"id\":1113500001,\"open\":false,\"pId\":1113000000,\"name\":\"部门管理\"}]","flag":true}

这里，只是用代码得到了两层菜单，如果是3层4层，代码就会显得很臃肿，觉得应该写成一个递归调用的方法比较好点