ls_liwei
那一刻秋色
采纳率0%
2017-07-07 08:46 阅读 3.3k

bootstrap treeview 右边显示内容

6

我的界面分为两部分,左边是treeview树结构(已完成),我想要点击左边的
treeview某个节点,右边会显示相应的div(不同的div是在右边同一位置显示,
每次显示一个div,未点击的节点对应的div不显示)。给点实例啊

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • u014074697 张大教主 2017-07-07 10:37
    谁让我这么热心,右侧一个div就可以实现
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <title></title>
        <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
            <script type="text/javascript" src="http://www.srcfans.com/js/jquery-1.9.1.min.js"></script>
            <script src="bootstrap-treeview.js"  type="text/javascript"></script><!--网上下载一个bootstrap-treeview.js文件-->
        <script type="text/javascript">
            $(function () {
                    function getData(){
                var data = [{
                    id:"00000",
                    text: "中国",
                    nodes: [{text: "北京", id: '00001' },
                    { text: "上海", id: '00002' },
                    { text: "江苏", id: '00003' }, 
                    { text: "河南", id: '00004', 
                    nodes: [{ text: '郑州', id: '00005'}]}]
    
                }];
                return data;
            }
                    $('#tree').treeview({
                            data: getData(),         // data is not optional
                            levels: 5,
                            multiSelect: false,
                            onNodeSelected:function(event,node){
                        $("#txtArea").val(node.text);
                    $("#txtid").val(node.id);
                }
                    });
            })
    </script>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div id="tree"></div>
            </div>
            <div class="col-sm-8">
                <div style="width:700px;height:500px;background:#f0f0f0">
                    地区:<input id="txtArea" style="width:200px;" />
                    编码:<input id="txtid" style="width:200px;" />
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    
    点赞 评论 复制链接分享

相关推荐