那一刻秋色 2017-07-07 08:46 采纳率: 0%
浏览 3529
已结题

bootstrap treeview 右边显示内容

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

  • 写回答

1条回答 默认 最新

  • 张大教主 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>
    评论

报告相同问题？

悬赏问题

  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn，请教个问题 flink启动yarn-session.sh连不上hadoop，这个整了好几天一直不行，求帮忙看一下怎么解决
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥30 python代码，帮调试，帮帮忙吧