Fatal编程技术网
  • javascript/
  • 如何在由div组成的表上使用JavaScript创建类似treeview的功能？

如何在由div组成的表上使用JavaScript创建类似treeview的功能？

javascript jquery html css

如何在由div组成的表上使用JavaScript创建类似treeview的功能？,javascript,jquery,html,css,treeview,Javascript,Jquery,Html,Css,Treeview,我正在尝试用具有treeview功能的div创建一个表。例如，第一行首先应该可见，但单击节点时，将显示第二级，单击第二级上的节点时，将显示第三级，依此类推。该表还应具有级联复选框。这一切都应该通过html、css和javascript来完成。我已经尝试过几种方法，包括： javascript似乎对我的事业毫无帮助。也。。有趣的是，当我添加javascript时，它似乎根本不起作用。在这种情况下，什么javascript最理想？即使你们不能给我答案，任何指向正确方向的指针都会有帮助。这是我的密

我正在尝试用具有treeview功能的div创建一个表。例如，第一行首先应该可见，但单击节点时，将显示第二级，单击第二级上的节点时，将显示第三级，依此类推。该表还应具有级联复选框。这一切都应该通过html、css和javascript来完成。我已经尝试过几种方法，包括：

javascript似乎对我的事业毫无帮助。也。。有趣的是，当我添加javascript时，它似乎根本不起作用。在这种情况下，什么javascript最理想？即使你们不能给我答案，任何指向正确方向的指针都会有帮助。这是我的密码。让我知道你的想法

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 

Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-2.1.3.js"></script>
    <script src="jquery-2.1.3.min.js"></script>
    <link href="Main.css" rel="stylesheet" />

    <script>

    </script>
</head>
<body>
    <form id="form1" runat="server">

        <div class="container">
            <div class="heading">
                <span class="col">Checkboxes</span>
                <span class="col"></span>
                <span class="col">Header 1</span>
                <span class="col">Header 2</span>
            </div>
            <div class="table-row">
                <span class="col">
                    <input type="checkbox" id="node-0" /><label><input type="checkbox" id="cb" /><span></span></label><label for="node-0">Libraries</label>
                </span>
                <span class="col">Info 1</span>
                <span class="col">Info 1.2</span>
                <span class="col">Info 1.3</span>
            </div>
            <div class="table-row" id="div1">
                <span class="col">
                    <input type="checkbox" id="node-0-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0-0">Documents</label></span>
                <span class="col">Info 2</span>
                <span class="col"></span>
                <span class="col"></span>
            </div>
            <div class="table-row">
                <span class="col">
                    <input type="checkbox" id="node-0-0-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0">My Documents</label></span>
                <span class="col">Info 3</span>
                <span class="col"></span>
                <span class="col">Info 3.1</span>
            </div>
        </div>


    </form>
</body>
</html>
让我知道你们的想法。这是一项具有挑战性的工作，我需要弄清楚这样的事情是否可能。谢谢大家

编辑：我已经查看了建议的第三方工具，这可能是一种可能性。但就目前而言，我在做了一些更深入的研究的基础上编写了自己的javascript。它按照我希望的方式工作，但问题是代码不是很动态。有没有更好的方法来写这个：

  <script>
    $(document).ready(function () {
        //This piece of js is for the cascading check boxes
        $('.parent').click(function () {
            if ($(this).is(':checked')) {
                $('.child').prop('checked', true);
            }
            else {
                $('.child').prop('checked', false);
            }
        });
    });
</script>

<script>
    $(document).ready(function () {
        //hide all of the 3rd level items (and potentially 4th level or lower)
        document.getElementById("childRail2").style.display = "none";

        //handle the node click event for the top level; this will target all of the children on the second level of the parent
        $('#node-0').click(function () {
            if ($(this).is(':checked')) {

                /*this targets a div that is intially hidden on startup, grabs all its inner elements and replaces the div with them
                  the point of the div is to hide all of the second level rows on startup*/
                var content = $("#extraControls").contents();
                $("#extraControls").replaceWith(content);

                $('.child-table-row').show(0);
            }
            else {
                $('#node-0').prop('checked', false);
                $('.child-table-row').hide(0),
                $('.child-table-row-2').hide(0);
                //returns the second level node to its original state
                document.getElementById("node-0-0").checked = false;
            }
        });
    });

    $(document).ready(function () {
        /*this handles the click event for the node on the second level so that the level under it will be shown/hidden
            this is not dynamic code, so for every subsequent level and every other second level node, this must be added and
            the id/class names replaced correctly*/
        if ($('#node-0-0').is(':checked')) {
            document.getElementById("div2").style.display = "none";
        }
        $('#node-0-0').click(function () {
            if ($(this).is(':checked')) {
                $('.child-table-row-2').show(0);
            }
            else {
                $('#node-0-0').prop('checked', false);
                $('.child-table-row-2').hide(0);
            }
        });
    });
</script>


$（文档）.ready（函数（）{
//这段js用于级联复选框
$（'.parent'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（'.child'）.prop（'checked'，true）；
}
否则{
$（'.child'）.prop（'checked'，false）；
}
});
});
$（文档）.ready（函数（）{
//隐藏所有第三级项目（以及可能的第四级或更低级别）
document.getElementById（“childRail2”）.style.display=“无”；
//处理顶层的节点单击事件；这将以父级第二层上的所有子级为目标
$（'#节点-0'）。单击（函数（）{
如果（$（this）.is（':checked'））{
/*这将针对启动时初始隐藏的div，获取其所有内部元素并用它们替换div
div的目的是在启动时隐藏所有第二级行*/
变量内容=$（“#控制外”）.contents（）；
$（“#控制外”）。替换为（内容）；
$（'.child表行'）.show（0）；
}
否则{
$（'#node-0'）.prop（'checked'，false）；
$（'.child表行'）.hide（0），
$（'.child-table-row-2'）。隐藏（0）；
//将第二级节点返回到其原始状态
document.getElementById（“节点-0-0”）.checked=false；
}
});
});
$（文档）.ready（函数（）{
/*这将处理第二层上节点的单击事件，以便显示/隐藏其下的层
这不是动态代码，因此对于每个后续级别和其他第二级别节点，必须添加并删除该代码
已正确替换id/类名*/
if（$（'#node-0-0'）。是（':checked'））{
document.getElementById（“div2”）.style.display=“无”；
}
$（'#节点-0-0'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（'.child-table-row-2'）.show（0）；
}
否则{
$（'#node-0-0'）.prop（'checked'，false）；
$（'.child-table-row-2'）。隐藏（0）；
}
});
});
让我知道你们对这件事的看法。再次感谢任何有时间回答的人。

你会考虑使用第三方库来完成吗？另外，如果您不想用javascript实现它，这里有一个纯css树视图的示例：您是否考虑过使用收缩包装的解决方案而不是构建自己的解决方案？您正在处理一个主要的（imho）开发任务，除非您打算自学、开发小部件库或有特殊的许可证要求，否则有几个解决方案值得一看（例如）。感谢您的快速回复。这些解决方案似乎很有可能，不幸的是，这可能会在某个时候成为商业性的，我可能希望在未来的项目中使用这种布局，可能是商业性的。不过，我会更深入地了解你们两人提供的链接。谢谢 
  <script>
    $(document).ready(function () {
        //This piece of js is for the cascading check boxes
        $('.parent').click(function () {
            if ($(this).is(':checked')) {
                $('.child').prop('checked', true);
            }
            else {
                $('.child').prop('checked', false);
            }
        });
    });
</script>

<script>
    $(document).ready(function () {
        //hide all of the 3rd level items (and potentially 4th level or lower)
        document.getElementById("childRail2").style.display = "none";

        //handle the node click event for the top level; this will target all of the children on the second level of the parent
        $('#node-0').click(function () {
            if ($(this).is(':checked')) {

                /*this targets a div that is intially hidden on startup, grabs all its inner elements and replaces the div with them
                  the point of the div is to hide all of the second level rows on startup*/
                var content = $("#extraControls").contents();
                $("#extraControls").replaceWith(content);

                $('.child-table-row').show(0);
            }
            else {
                $('#node-0').prop('checked', false);
                $('.child-table-row').hide(0),
                $('.child-table-row-2').hide(0);
                //returns the second level node to its original state
                document.getElementById("node-0-0").checked = false;
            }
        });
    });

    $(document).ready(function () {
        /*this handles the click event for the node on the second level so that the level under it will be shown/hidden
            this is not dynamic code, so for every subsequent level and every other second level node, this must be added and
            the id/class names replaced correctly*/
        if ($('#node-0-0').is(':checked')) {
            document.getElementById("div2").style.display = "none";
        }
        $('#node-0-0').click(function () {
            if ($(this).is(':checked')) {
                $('.child-table-row-2').show(0);
            }
            else {
                $('#node-0-0').prop('checked', false);
                $('.child-table-row-2').hide(0);
            }
        });
    });
</script>