您的位置：首页 > Web前端 > JQuery

jquery treeview 简介

2017-11-27 22:47 155 查看

【声明】

内容源自网络。

1.静态

[html] view
plain copy

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <title>tree demo</title>

    <link rel="stylesheet" href="./jquery.treeview.css" />

    

    <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>

    <script type="text/javascript" src="./js/jquery.treeview.js"></script>

    <script type="text/javascript">

$(function(){

    $("#browser").treeview();

})

</script>



</head>

<body>

<h4>Sample Tree - default</h4>

<ul id="browser" class="filetree">

    <li>

        <span class="folder">Folder 1</span>

        <ul>

            <li><span class="file">Item 1.1</span></li>

        </ul>

    </li>



    <li>

        <span class="folder">Folder 2</span>

        <ul>

            <li><span class="folder">Subfolder 2.1</span>

                <ul id="folder21">

                    <li><span class="file">File 2.1.1</span></li>

                    <li><span class="file">File 2.1.2</span></li>

                </ul>

            </li>

            <li><span class="file">File 2.2</span></li>

        </ul>

    </li>



    <li class="closed">

        <span class="folder">Folder 3 (closed at start)</span>

        <ul>

            <li><span class="file">File 3.1</span></li>

        </ul>

    </li>



    <li><span class="file">File 4</span></li>

</ul>

</body>

</html>

2.动态

官网
http://docs.jquery.com/Plugins/Treeview http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
①前端jsp

[html] view
plain copy

<%@page contentType="text/html; charset=utf-8" %>

<%

    String basePath = request.getContextPath();

%>

<html>

<head>

    <title>dynamic Demo</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <link rel="stylesheet" href="<%=basePath%>/jquery.treeview.css" />

    <script type="text/javascript" src="<%=basePath%>/js/jquery-1.7.2.js"></script>

    <script type="text/javascript" src="<%=basePath%>/js/jquery.cookie.js"></script>

    <script type="text/javascript" src="<%=basePath%>/js/jquery.treeview.js"></script>

    <script type="text/javascript" src="<%=basePath%>/js/jquery.treeview.async.js"></script>



<script type="text/javascript">

function initTrees(){

    $("#tree").treeview({

            url:"<%=basePath%>/dynamicTree",

            ajax:{

                data:{

                    "additional":function(){

                        return "yeah: " + new Date;

                    }

                },

                type: "post"

            }

            });

}



$(function(){

    initTrees();

});

</script>



</head>

<body>

<ul id="tree">

</ul>

</body>

</html>

②后端servelet

[java] view
plain copy

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    // TODO Auto-generated method stub

    doPost(request, response);

}



protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    // TODO Auto-generated method stub

    response.setHeader("Cache-Control", "no-cache");

    response.setContentType("text/json;charset=UTF-8");

//      response.setContentType("text/plain");

    response.setCharacterEncoding("utf-8");

    PrintWriter out = response.getWriter();



    String re = "[{'text':'root','expanded':false,"

            + "'children':[{'text':'系统管理',"

            + "'children':[{'text':'用户管理'}, {'text':'权限管理'}]},{'text':'业务管理'}]}]";





    out.flush();

    System.out.println(re);

    out.write(re);

    out.close();

}

效果图

【总结】

感觉jquery 树插件 treeview 也不是太好用！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航