ztree右击（点击图标）‘上移、下移、置顶、置底’_ztree 上下方向键控制选择-优快云博客

本文链接：https://blog.youkuaiyun.com/github_37213295/article/details/96835065

本文介绍了如何在ZTree中实现右击节点时触发上移、下移、置顶和置底的功能。内容包括在存在滚动条的情况下考虑滚动条高度的调整，以及在表格列过多时实现显示和隐藏表格行的交互。涉及到HTML、CSS和JavaScript的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、出现滚动条时，加滚动条的高度

html

<!DOCTYPE html>
<html lang="zh-cn"> 
<head>
    <meta charset="utf-8"/>

    <title>test</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>

    <meta content="" name="description"/>

    <meta content="" name="author"/>

    <link rel="stylesheet" href="zTree/css/metroStyle/metroStyle.css">
</head>

<body class="page-header-fixed page-sidebar-fixed">


<div class="page-container">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12"> 
                    <div class="row-fluid">

                        <div class="span4" id="jio">
                            <ul id="manageTree" class="ztree" style="width:800px; overflow:auto;"></ul>
                            <div id="rMenu">
                                <a href="#" class="list-group-item" attrOn="m_top">置顶</a>
                                <a href="#" class="list-group-item" attrOn="m_up">上移</a>
                                <a href="#" class="list-group-item" attrOn="m_down">下移</a>
                                <a href="#" class="list-group-item" attrOn="m_bottom">置底</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
</body>

</html>
<script src="jquery-1.12.1.min.js" type="text/javascript"></script>

<script src="zTree/js/jquery.ztree.core.js"></script>

<script src="zTree/js/jquery.ztree.excheck.js"></script>

<script src="zTree/js/jquery.ztree.exedit.js"></script>

css

div#rMenu {
    position: absolute;
    visibility: hidden;
    top: 0;
    text-align: left;
    padding: 4px;
}

div#rMenu a {
    padding: 3px 15px 3px 15px;
    background-color: #cad4e6;
    vertical-align: middle;
    display: block;
    opacity: 0.9;
}

var setting = {
        check: {
            enable: false
        },
        view: {
            addDiyDom: addDiyDom,
            dblClickExpand: true,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {