protree 树状图

首选引入依赖包

<script type="text/javascript" src="plugins/proTree/jquery.min.js"></script>
<script type="text/javascript" src="plugins/proTree/proTree.js" ></script>

然后 定义一个dIv

然后写function方法

    <script type="text/javascript">  
//后台传入的 标题列表
var arr = [{
        id: 1,
        name: "文书档案",
        pid: 0
    }, {
        id: 2,
        name: "各单位累计归档数量",
        pid: 0
    }, {
        id: 3,
        name: "年限分类统计",
        pid: 0
    }, {
        id: 4,
        name: "档案借阅统计",
        pid: 0
    }, {
        id: 5,
        name: "系统后台统计",
        pid: 0
    },{
        id: 6,
        name: "单位(部门)发文数量",
        pid: 1
    }, {
        id: 7,
        name: "领导签发文件数量",
        pid: 1
    }, {
        id: 8,
        name: "领导审批文件数量",
        pid: 1
    }, {
        id: 9,
        name: "访问量",
        pid: 5
    }, {
        id: 10,
        name: "搜索量",
        pid: 5
    }, {
        id: 10,
        name: "热搜排行榜",
        pid: 5
    }

];
$(".innerUl").ProTree({
    arr: arr,
    simIcon: "fa fa-file-o",
    mouIconOpen: "fa fa-folder-open-o",
    mouIconClose:"fa fa-folder-o",
    callback: function(id,name) {
        if(id==7){
            var url ="<%=basePath%>statisticmgr/leaderfilenum.do"

        }
        else if(id==8){
            var url = "<%=basePath%>statisticmgr/leaderapprovalNum.do"
        }
        /* window.location.href=url */
        $("#myiframe").attr("src",url)
    }

})

</script>

效果图