Fatal编程技术网
  • tree/
  • Tree dijit树溢出div，但不滚动

Tree dijit树溢出div，但不滚动

tree scroll dojo

Tree dijit树溢出div，但不滚动,tree,scroll,overflow,dojo,Tree,Scroll,Overflow,Dojo,我有一个包含几个div的简单页面，我打算用各种dijit小部件填充这些div。我有一个div，如果我插入了太多的文本，它会正确地滚动，但是如果我插入了dijit树，树项目会溢出div，但不会发生滚动。下面是代码，为了清晰起见，使用内联样式。我愿意对树使用声明式模式，如果这会使它更简单的话，但也许你可以告诉我如何按原样修复它，这样dijitTree将保持在它自己的div和滚动中 谢谢。代码如下： <html> <head> <title>Test dij

我有一个包含几个div的简单页面，我打算用各种dijit小部件填充这些div。我有一个div，如果我插入了太多的文本，它会正确地滚动，但是如果我插入了dijit树，树项目会溢出div，但不会发生滚动。下面是代码，为了清晰起见，使用内联样式。我愿意对树使用声明式模式，如果这会使它更简单的话，但也许你可以告诉我如何按原样修复它，这样dijitTree将保持在它自己的div和滚动中

谢谢。代码如下：

<html>
<head>
    <title>Test dijit Tree Overflow</title>
    <style type="text/css">
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css";
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/tundra/tundra.css";
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/dijit.css";
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.Tree");
    </script>
<script type="text/javascript">
var snidTree = [{ id: 'tn1', label: 'Tree Node 1', },{ id: 'tn2', label: 'Tree Node 2', },{ id: 'tn3', label: 'Tree Node 3', },{ id: 'tn4', label: 'Tree Node 4', },{ id: 'tn5', label: 'Tree Node 5', },{ id: 'tn6', label: 'Tree Node 6', },{ id: 'tn7', label: 'Tree Node 7', },{ id: 'tn8', label: 'Tree Node 8', },{ id: 'tn9', label: 'Tree Node 9', },{ id: 'tn10', label: 'Tree Node 10', },{ id: 'tn11', label: 'Tree Node 11', },{ id: 'tn12', label: 'Tree Node 12', },{ id: 'tn13', label: 'Tree Node 13', },{ id: 'tn14', label: 'Tree Node 14', },{ id: 'tn15', label: 'Tree Node 15', },{ id: 'tn16', label: 'Tree Node 16', },{ id: 'tn17', label: 'Tree Node 17', },{ id: 'tn18', label: 'Tree Node 18', },{ id: 'tn19', label: 'Tree Node 19', },{ id: 'tn20', label: 'Tree Node 20', },{ id: 'tn21', label: 'Tree Node 21', },{ id: 'tn22', label: 'Tree Node 22', },{ id: 'tn23', label: 'Tree Node 23', },{ id: 'tn24', label: 'Tree Node 24', },{ id: 'tn25', label: 'Tree Node 25', },{ id: 'tn26', label: 'Tree Node 26', },{ id: 'tn27', label: 'Tree Node 27', },{ id: 'tn28', label: 'Tree Node 28', },{ id: 'tn29', label: 'Tree Node 29', },{ id: 'tn30', label: 'Tree Node 30', },{ id: 'tn31', label: 'Tree Node 31', },{ id: 'tn32', label: 'Tree Node 32', },{ id: 'tn33', label: 'Tree Node 33', },{ id: 'tn34', label: 'Tree Node 34', },{ id: 'tn35', label: 'Tree Node 35', },{ id: 'tn36', label: 'Tree Node 36', },{ id: 'tn37', label: 'Tree Node 37', },{ id: 'tn38', label: 'Tree Node 38', },{ id: 'tn39', label: 'Tree Node 39', },{ id: 'tn40', label: 'Tree Node 40', } ];

function prepare() {
        var store = new dojo.data.ItemFileReadStore({
            data: { identifier: 'id', label : 'label', items: snidTree }
        });
        var treeModel = new dijit.tree.ForestStoreModel({ store: store });
        var treeControl = new dijit.Tree({
            model: treeModel,
            showRoot: false,
            _createTreeNode: function(/*Object*/ args){
                var tnode = new dijit._TreeNode(args);
                tnode.labelNode.innerHTML = args.label;
                return tnode;
            },
        onClick: function(c,n,e) {
              myTreeClick(this,c,n,e);
          }
        }, "left" );
}
dojo.ready(prepare);
function myTreeClick(tree,child,node,event) {
  dojo.byId("footer").innerHTML = child.label + " was clicked";
}
</script>
</head>
<body class="tundra">
<div id='header' style="width:100%;
    background: #FC8;
    position: absolute;
    height: 30px;
    font-size: 150%;
    text-align: center;
    top: 0;">HEADING GOES HERE</div>
<div id='middle' style="width:100%;
    background: #8FC;
    position: absolute;
    top: 30px;
    bottom: 30px;">
  <div id='left' style="background: #FFF;
    position: absolute;
    overflow: scroll;
    left: 0;
    top: 0;
    width: 25%;
    height: 100%;">
  </div>
  <div id='right' style="background: #CF8;
    position: absolute;
    left: 25%;
    top: 0;
    width: 75%;
    height: 100%;">
    <div id='charts' style="background: #DF7;
      position: absolute;
      width: 100%;
      top:0;
      height:60%;">
CHARTS GO HERE
    </div>
    <div id='sliders' style="background: #BF9;
      position: absolute;
      width: 100%;
      bottom:0;
      height:40%;">
SLIDERS GO HERE
    </div>
  </div>
</div>
<div id='footer' style="width:100%;
    background: #8CF;
    position: absolute;
    height: 30px;
    font-size: 100%;
    bottom: 0;">footer</div>
</body>
</html>


测试dijit树溢出
@进口”http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css";
@进口”http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/tundra/tundra.css";
@进口”http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/dijit.css";
require（“dojo.data.ItemFileReadStore”）；
dojo.require（“dijit.Tree”）；
var snidTree=[{id:'tn1'，label:'Tree Node 1'，}，{id:'tn2'，label:'Tree Node 2'，}，{id:'tn3'，label:'Tree Node 3'，}，{id:'tn4'，label:'Tree Node 4'，}，{id:'tn5'，label:'Tree Node 5'，}，{id:'tn6'，label:'Tree Node 6'，}，{id:'tn7'，label:'Tree Node 7'，label:'tn8'，label:'Tree Node 8'，id:'tn9'，{id:'tn10'，label:'Tree Node 10'，}，{id:'tn11'，label:'Tree Node 11'，}，{id:'tn12'，label:'Tree Node 12'，}，{id:'tn13'，label:'Tree Node 13'，}，{id:'tn14'，label:'Tree Node 14'，}，{id:'Tree Node 15'，}，{id:'tn16'，label:'Tree Node 16'，}，{id:'tn17'，label:'Tree Node 17'，}，{id:'tn18'，label:'Tree Node 18'，}，{id:'tn19'，label:'Tree Node 19'，}，{id:'tn20'，label:'Tree Node 20'，}，{id:'tn21'，label:'Tree Node 21'，}，{id:'tn22'，label:'Tree Node 22'，}，{id:'tn23'，label:'Tree Node 23'，}，{id:'tn24'，label:'Tree Node 24'，}，{id:'tn25'，label:'Tree Node 25'，}，{id:'tn26'，{id:'tn27'，label:'Tree Node 27'，}，{id:'tn28'，label:'Tree Node 28'，}，{id:'tn29'，label:'Tree Node 29'，}，{id:'tn30'，label:'Tree Node 30'，}，{id:'tn31'，label:'Tree Node 31'，}，{id:'Tree Node 32'，}，{id:'tn33'，label:'Tree Node 33'，}，{id:'tn34'，label:'Tree Node 34'，}，{id:'tn35'，{id:'tn36'，label:'Tree Node 36'，}，{id:'tn37'，label:'Tree Node 37'，}，{id:'tn38'，label:'Tree Node 38'，}，{id:'tn39'，label:'Tree Node 39'，}，{id:'tn40'，label:'Tree Node 40'，}；
函数prepare（）{
var store=new dojo.data.ItemFileReadStore({
数据：{标识符：'id'，标签：'label'，项：snidTree}
});
var treeModel=new dijit.tree.ForestStoreModel（{store:store}）；
var treeControl=新的dijit.Tree({
型号：treeModel，
showRoot：错，
_createTreeNode:函数（/*Object*/args）{
var tnode=新的dijit.\u TreeNode（args）；
tnode.labelNode.innerHTML=args.label；
返回tnode；
},
onClick：函数（c，n，e）{
myTreeClick（this，c，n，e）；
}
}“左”）；
}
dojo.ready（准备）；
函数myTreeClick（树、子节点、节点、事件）{
dojo.byId（“页脚”）.innerHTML=child.label+“已单击”；
}
航向在这里
这里有图表
滑块在这里
页脚
如果这是一个琐碎的问题，我很抱歉，但我确实希望在要滚动的div上设置overflow:auto…

我在dijit.Tree中遇到了类似的滚动问题。我发现树继承了ContentPane的行为，这意味着在布局策略方面它将作为ContentPane。下面是我的问题的解决方法：

css类：

.TreeHeightClass {
   height: 350;
   overflow: scroll;
}
将类应用于“树”：

希望这能解决你的问题

问候

jsfiddle这里：） 
domClass.add(treeControl.domNode, "TreeHeightClass");