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

2016-02-17 04:25:07 765 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

C#实现生成Markdown文档目录树 C#解析Markdown文档，实现替换图片链接操作算是第一次尝试使用C#处理Markdown文档，然后最近又把博客网站的前台改了一下，目前文章渲染使用Editor.md组件在前端渲染，但这个插件生成的目录树很丑，我魔改了一下换成bootstrap5-treeview组件，好看多了。魔改editormd组件，优化ToC渲染效果此前我一直想用后端来渲染markdown文章而不得，经过这个操作，思路就打开了，也就有了本文的C#实现。需要俩class第一个是代表一个标题元素，父子关系的标题使用id和pid关联。阅读详情

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

...全文

疾病负担研究（GBD）——如何使用joinpoint软件计算AAPC 疾病负担研究（GBD）——如何使用joinpoint软件计算AAPC 阅读详情

wyplay

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

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；好像不管用了。。

斯洛文尼亚旅游 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] 嗯。结了。多谢版版大人

斯洛文尼亚旅游 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>

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

以专业开发人员为伍 2016-02-19

打赏
举报

斯洛文尼亚旅游 2016-02-18

打赏
举报

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


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

斯洛文尼亚旅游 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%像一块被切掉一样了。

斯洛文尼亚旅游 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)好像加不加效果是一样的啊。画布并没有增大

斯洛文尼亚旅游 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%'

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

逝_去_的_光_阴 2016-02-17

打赏
举报

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


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

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

相关推荐