Question

我对JQuery比较陌生。

我有一个JQWidgets Splitter，在左侧窗格中我放了一个JQWidgets树。这棵树足够长，我需要一个卷轴才能看到它。展开节点时，左窗格会重新绘制，以便尽管节点已展开，但滚动条位于包含树的窗格的顶部。我看不到我刚刚扩展的节点。我希望滚动条的位置可以远离它，因此我刚刚展开的节点仍然在光标下。这个问题很容易重现。

....
<div id='splitter'>
    <div id='splitter-left'>
        <div id='tree'>
            <ul><li></li>...</ul>
        </div>
    </div>
    <div id='splitter-right'>
    ...
    </div>
</div>
...
<script type='text/javascript>
    $(function () {
        $("#splitter").jqxSplitter();
        $("#tree").jqxTree();
    });
</script>

我有JSFiddle演示此行为，它包含所有CSS和JScript引用。它有一个足够长的列表列表可以溢出。当我展开节点时，如何使树退出？

注意：如果树不在拆分器中，那么树的行为与我预期的一样。这似乎与树和分裂器的协作有关。导致这种情况。

TIA

Answer 1

您可以将树的高度设置为100％，以便小部件使用其ScrollBar进行滚动，并且浏览器不会在Focus上自动滚动。示例：http://jsfiddle.net/6cr22ygy/

<div id="splitter">
    <div id="splitter-left" style="overflow: auto">
        <div style='border:none;' id="tree">
            <ul>
                <li>root
                    <ul>
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                        <li>d
                            <ul>
                                <li>da</li>
                                <li>db</li>
                                <li>dc</li>
                                <li>dd
                                    <ul>
                                        <li>dda</li>
                                        <li>ddb</li>
                                        <li>ddc</li>
                                        <li>ddd</li>
                                        <li>dde</li>
                                        <li>ddf</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>e</li>
                        <li>f</li>
                        <li>g</li>
                        <li>h</li>
                        <li>i</li>
                        <li>j</li>
                        <li>k</li>
                        <li>l</li>
                        <li>m</li>
                        <li>n</li>
                        <li>o</li>
                        <li>p</li>
                        <li>q</li>
                        <li>r</li>
                        <li>s</li>
                        <li>t</li>
                        <li>u</li>
                        <li>v</li>
                        <li>w</li>
                        <li>x</li>
                        <li>y
                            <ul>
                                <li>ya</li>
                                <li>yb</li>
                                <li>yc</li>
                                <li>yd</li>
                                <li>ye</li>
                                <li>yf</li>
                                <li>yg</li>
                                <li>yh</li>
                                <li>yi</li>
                                <li>yj</li>
                            </ul>
                        </li>
                        <li>z
                            <ul>
                                <li>za</li>
                                <li>zb</li>
                                <li>zc</li>
                                <li>zd</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="splitter-right">
         <h3>Steps to Reproduce</h3>

        <ol>
            <li>Run</li>
            <li>expand root</li>
            <li>Scroll to y</li>
            <li>expand y</li>
        </ol>
         <h3>Expect</h3>

        <p>node expanded and visible (position preserved in pane)</p>
         <h3>Observe</h3>

        <p>node expanded, but tree has been repositioned to top of pane</p>
    </div>
</div>

的JavaScript

$(function () {
    $("#splitter").jqxSplitter();
    $("#tree").jqxTree({height:"100%"});
});

有关jQWidgets树高属性的更多信息：jQWidgets Tree API

Splitter中的JQWidget树意外滚动到顶部

1 个答案: