我的界面分为两部分,左边是treeview树结构(已完成),我想要点击左边的
treeview某个节点,右边会显示相应的div(不同的div是在右边同一位置显示,
每次显示一个div,未点击的节点对应的div不显示)。给点实例啊
谁让我这么热心,右侧一个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>