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

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


...全文
480 19 打赏 收藏 举报
写回复
19 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
wyplay 2016-02-26
额发现是我粗心了。。。 st.onClick(node.id); 忘记加节点id。。。不好意思版版。。
  • 打赏
  • 举报
回复
wyplay 2016-02-26
引用 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;好像不管用了。。
  • 打赏
  • 举报
回复
Go 旅城通票 2016-02-26
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 2016-02-26
引用 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个的情况下,点击节点后提示 您要查看该部门员工清单吗? 点击 是 后。跳转到其它页面。
  • 打赏
  • 举报
回复
wyplay 2016-02-25
引用 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] 嗯。结了。多谢版版大人
  • 打赏
  • 举报
回复
Go 旅城通票 2016-02-19
引用 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 2016-02-19
引用 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>
嗯。看起来可以啦。感谢版主大人。
  • 打赏
  • 举报
回复
  • 打赏
  • 举报
回复
Go 旅城通票 2016-02-18
这个插件会实现点击自动计算画布位置然后移位的动画效果,你要是设置到顶部点击了移动后头部有可能显示不全,如果你不考虑所有部分的显示,你找个最底部的节点点击就会移动到顶部。

                onAfterCompute: function () {
                    st.onClick(786)
                }
  • 打赏
  • 举报
回复
Go 旅城通票 2016-02-18
画布是小了,我这里没往下移动,你可以放大容器,容器外层再套一个容器,然后重新定位,画布就没问题了
    <div style="position:relative;width:100%;height:800px;overflow:hidden">
        <div id="infovis" style="width:100%;height:1200px;background:#edf2f9;top:-100px"></div>
    </div>
  • 打赏
  • 举报
回复
wyplay 2016-02-18
你看,下面明明还有空间。但是就 是因为top -30%像一块被切掉一样了。

  • 打赏
  • 举报
回复
Go 旅城通票 2016-02-18
引用 7 楼 wyplay 的回复:
你看,下面明明还有空间。但是就 是因为top -30%像一块被切掉一样了。
我这里放大height,firefox,chrome,IE7-IE11的没有问题,你什么浏览器
  • 打赏
  • 举报
回复
wyplay 2016-02-18
引用 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)好像加不加效果是一样的啊。画布并没有增大
  • 打赏
  • 举报
回复
Go 旅城通票 2016-02-18
引用 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 2016-02-18
引用 3 楼 showbo 的回复:
这个插件会实现点击自动计算画布位置然后移位的动画效果,你要是设置到顶部点击了移动后头部有可能显示不全,如果你不考虑所有部分的显示,你找个最底部的节点点击就会移动到顶部。

                onAfterCompute: function () {
                    st.onClick(786)
                }
嗯。多谢版主大人回复。之前我也想过这样做。但是实现效果并不是我想要的。比如一个分支特别长。那显示出来就比较奇怪了。 2楼的方式是我想要的。图形是上去了,但是画布调小了。这个问题有点棘手。
  • 打赏
  • 举报
回复
wyplay 2016-02-17
引用 1 楼 u011376884 的回复:
jit.js 2781行加了点东西 兼容性肯定好不到哪儿去 top的值你改成你需要的吧

'height': height + 'px',
         'top' : '-30%'
多谢回复,加上试了一下,确实有点问题。 是往上移了。但是同时下方的空间也减少了。画布小了
  • 打赏
  • 举报
回复
jit.js 2781行加了点东西 兼容性肯定好不到哪儿去 top的值你改成你需要的吧

'height': height + 'px',
         'top' : '-30%'
  • 打赏
  • 举报
回复
发帖
JavaScript
加入

8.6w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
申请成为版主
帖子事件
创建了帖子
2016-02-17 04:25
社区公告
暂无公告