分享一个很炫的js的目录树，有个位置的问题需要请教js高手

[wyplay]

是网上找的，找的太多了。实在不知道出处了。总体是国外的一个树的控件，和其它的不一样。
效果如下：
生成时会把中心节点放在中间。我想移到上边。试了很多方法。也查了api好像就是移不上去。
还请js高手帮助看看。
test.html页面找开后，点击test链接就能看到效果。很炫的。
代码示例上传到网盘了
http://pan.baidu.com/s/1dDXjPNb

[逝_去_的_光_阴]

jit.js 2781行加了点东西 兼容性肯定好不到哪儿去 top的值你改成你需要的吧

'height': height + 'px',
         'top' : '-30%'

[wyplay]

引用 1 楼 u011376884 的回复:

jit.js 2781行加了点东西 兼容性肯定好不到哪儿去 top的值你改成你需要的吧

'height': height + 'px',
         'top' : '-30%'

多谢回复，加上试了一下，确实有点问题。 是往上移了。但是同时下方的空间也减少了。画布小了

[wyplay]

引用 3 楼 showbo 的回复:

这个插件会实现点击自动计算画布位置然后移位的动画效果，你要是设置到顶部点击了移动后头部有可能显示不全，如果你不考虑所有部分的显示，你找个最底部的节点点击就会移动到顶部。

                onAfterCompute: function () {
                    st.onClick(786)
                }

嗯。多谢版主大人回复。之前我也想过这样做。但是实现效果并不是我想要的。比如一个分支特别长。那显示出来就比较奇怪了。 2楼的方式是我想要的。图形是上去了，但是画布调小了。这个问题有点棘手。

[斯洛文尼亚旅游]

引用 4 楼 wyplay 的回复:

[quote=引用 3 楼 showbo 的回复:]
这个插件会实现点击自动计算画布位置然后移位的动画效果，你要是设置到顶部点击了移动后头部有可能显示不全，如果你不考虑所有部分的显示，你找个最底部的节点点击就会移动到顶部。

                onAfterCompute: function () {
                    st.onClick(786)
                }

嗯。多谢版主大人回复。之前我也想过这样做。但是实现效果并不是我想要的。比如一个分支特别长。那显示出来就比较奇怪了。
2楼的方式是我想要的。图形是上去了，但是画布调小了。这个问题有点棘手。[/quote]
this.element = $E('div', {
'id': id + '-canvaswidget',
'style': {
'position': 'relative',
'width': width + 'px',
'height': (height*1.4) + 'px', 'top': '-40%'
}
放大element高度就行了，不过不要点击，点击应为高度放大了，导致点击子节点顶级节点被隐藏

[wyplay]

引用 5 楼 showbo 的回复:

[quote=引用 4 楼 wyplay 的回复:] [quote=引用 3 楼 showbo 的回复:] 这个插件会实现点击自动计算画布位置然后移位的动画效果，你要是设置到顶部点击了移动后头部有可能显示不全，如果你不考虑所有部分的显示，你找个最底部的节点点击就会移动到顶部。

                onAfterCompute: function () {
                    st.onClick(786)
                }

嗯。多谢版主大人回复。之前我也想过这样做。但是实现效果并不是我想要的。比如一个分支特别长。那显示出来就比较奇怪了。 2楼的方式是我想要的。图形是上去了，但是画布调小了。这个问题有点棘手。[/quote] this.element = $E('div', { 'id': id + '-canvaswidget', 'style': { 'position': 'relative', 'width': width + 'px', 'height': (height*1.4) + 'px', 'top': '-40%' } 放大element高度就行了，不过不要点击，点击应为高度放大了，导致点击子节点顶级节点被隐藏[/quote] (height*1.4)好像加不加效果是一样的啊。画布并没有增大

[斯洛文尼亚旅游]

引用 7 楼 wyplay 的回复:

你看，下面明明还有空间。但是就 是因为top -30%像一块被切掉一样了。

我这里放大height，firefox，chrome，IE7-IE11的没有问题，你什么浏览器

[wyplay]

你看，下面明明还有空间。但是就 是因为top -30%像一块被切掉一样了。

[斯洛文尼亚旅游]

画布是小了，我这里没往下移动，你可以放大容器，容器外层再套一个容器，然后重新定位，画布就没问题了

    <div style="position:relative;width:100%;height:800px;overflow:hidden">
        <div id="infovis" style="width:100%;height:1200px;background:#edf2f9;top:-100px"></div>
    </div>

[斯洛文尼亚旅游]

这个插件会实现点击自动计算画布位置然后移位的动画效果，你要是设置到顶部点击了移动后头部有可能显示不全，如果你不考虑所有部分的显示，你找个最底部的节点点击就会移动到顶部。

                onAfterCompute: function () {
                    st.onClick(786)
                }

[以专业开发人员为伍]

[wyplay]

引用 9 楼 showbo 的回复:

画布是小了，我这里没往下移动，你可以放大容器，容器外层再套一个容器，然后重新定位，画布就没问题了

    <div style="position:relative;width:100%;height:800px;overflow:hidden">
        <div id="infovis" style="width:100%;height:1200px;background:#edf2f9;top:-100px"></div>
    </div>

嗯。看起来可以啦。感谢版主大人。

[斯洛文尼亚旅游]

引用 13 楼 wyplay 的回复:

[quote=引用 9 楼 showbo 的回复:] 画布是小了，我这里没往下移动，你可以放大容器，容器外层再套一个容器，然后重新定位，画布就没问题了

    <div style="position:relative;width:100%;height:800px;overflow:hidden">
        <div id="infovis" style="width:100%;height:1200px;background:#edf2f9;top:-100px"></div>
    </div>

嗯。看起来可以啦。感谢版主大人。[/quote] 有用了记得结贴。

[wyplay]

引用 14 楼 showbo 的回复:

[quote=引用 13 楼 wyplay 的回复:] [quote=引用 9 楼 showbo 的回复:] 画布是小了，我这里没往下移动，你可以放大容器，容器外层再套一个容器，然后重新定位，画布就没问题了

    <div style="position:relative;width:100%;height:800px;overflow:hidden">
        <div id="infovis" style="width:100%;height:1200px;background:#edf2f9;top:-100px"></div>
    </div>

嗯。看起来可以啦。感谢版主大人。[/quote] 有用了记得结贴。[/quote] 嗯。结了。多谢版版大人

[wyplay]

引用 14 楼 showbo 的回复:

[quote=引用 13 楼 wyplay 的回复:] [quote=引用 9 楼 showbo 的回复:] 画布是小了，我这里没往下移动，你可以放大容器，容器外层再套一个容器，然后重新定位，画布就没问题了

    <div style="position:relative;width:100%;height:800px;overflow:hidden">
        <div id="infovis" style="width:100%;height:1200px;background:#edf2f9;top:-100px"></div>
    </div>

嗯。看起来可以啦。感谢版主大人。[/quote] 有用了记得结贴。[/quote] 版主大大，我还有个问题，我想在这个目录树上。点击节点后，弹出个提示框，点OK后，打开一个网页。 类似 如果该部门下面节点超过N个的情况下，点击节点后提示 您要查看该部门员工清单吗？ 点击 是 后。跳转到其它页面。

[斯洛文尼亚旅游]

node有adjacencies属性记录此节点的父节点和直接孩子节点，还有个nodeTo记录父节点

你修改原来的点击事件判断下adjacencies的nodeTo是否和当前的nodeTo一样得到孩子个数，自己判断超过你的N就alert+window.open

                label.onclick = function () {
                        //st.onClick(node.id);
                        console.log(node)
                        console.log(node.adjacencies)
                        var childCount = 0;
                        for (var attr in node.adjacencies) if (node.adjacencies[attr].nodeTo== node) childCount++;
                        if (childCount > 4) {//孩子节点>4
                            alert('xxxxx');
                            window.open ( 'xxxxx?id=' + node.id);
                        }

                    };

[wyplay]

引用 17 楼 showbo 的回复:

node有adjacencies属性记录此节点的父节点和直接孩子节点，还有个nodeTo记录父节点 你修改原来的点击事件判断下adjacencies的nodeTo是否和当前的nodeTo一样得到孩子个数，自己判断超过你的N就alert+window.open

                label.onclick = function () {
                        //st.onClick(node.id);
                        console.log(node)
                        console.log(node.adjacencies)
                        var childCount = 0;
                        for (var attr in node.adjacencies) if (node.adjacencies[attr].nodeTo== node) childCount++;
                        if (childCount > 4) {//孩子节点>4
                            alert('xxxxx');
                            window.open ( 'xxxxx?id=' + node.id);
                        }

                    };

                    label.onclick = function () {
//                        st.onClick(node.id);
//                        console.log(node)
//                        console.log(node.adjacencies)
                        var childCount = 0;

                        for (var attr in node.adjacencies){
                            childCount++;
                        }
                        childCount = childCount -1; //减掉原节点
                        alert(childCount);
                        if (childCount >= 4) {//孩子节点>4
                            alert('询问xxxx');
//                            location.href= 'wwww.baidu.com?id=' + node.id;
                        }else{
                            alert('打开树');
                            st.onClick;
                        }
                    };

问题来了。打开树后面st.onClick；不管用了。 比如这个节点不满足打开页面的需求，按理应该直接继续往下打开子节点。但是st.onClick；好像不管用了。。

[wyplay]

额发现是我粗心了。。。 st.onClick(node.id); 忘记加节点id。。。不好意思版版。。