jsTree插件的應用

從服務器端動態的獲取數據:

在瀏覽器頁面中:客戶端

<html>
    <head>
        <base href="<%=basePath%>">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CMS 後臺管理工作平臺</title>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/jquery.jstree.js"></script>
        <script language="javascript">
        
     //第二種寫法,注意是添加attr
     $(function() {
        //將menuContainer變成一棵樹!
        
    $("#demo").jstree( {
            "json_data" : {
                "ajax" : {

                                 //通過URl從服務器拿到數據
                            "url" : "XXXX.action?method:tree"
                         }
            },
            "plugins" : [ "themes", "json_data" ]
        });
    });
</script>
        <style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-size: 12px;
}
-->
</style>
    </head>
    <body>
        <div id="demo">
            
        </div>
    </body>
</html>
服務器端:

public void tree()
    {
        try
        {
            //添加數據
            Node root = new Node("大學",1,"www.baidu.com");
            root.addChildNode(new Node("辦公室",2,"www.csdn.com"));
            root.addChildNode(new Node("學籍科",3,"www.sina.com"));

            //把存儲的數據解析存到JSON 中
            String str = JSONMapper.toJSON(root).render(false);
            //設置編碼方式
            ServletActionContext.getResponse().setCharacterEncoding("UTF-8");

            //輸出到客戶端
            ServletActionContext.getResponse().getWriter().print(str);
            
            
        } catch (MapperException e)
        {
            e.printStackTrace();
        } catch (IOException e)
        {
            e.printStackTrace();
        }
    }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章