我正在尝试使用树视图功能从div创建一个表。例如，第一行应首先显示，但单击节点时，将显示第二级，单击第二级节点时，将显示第三级，依此类推。该表还应具有级联复选框。这应该都是通过html，css和javascript来完成的。我已经尝试了几件事，包括：
http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html
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>
我的CSS：
/*CSS for table*/
.container{
display:table;
width: 50%;
border-collapse: collapse;
text-align:center;
}
.heading{
font-weight: bold;
display:table-row;
text-align: center;
line-height: 25px;
font-size: 14px;
font-family:georgia;
}
.table-row{
display:table-row;
text-align: center;
}
.col{
display:table-cell;
border: 1px solid #000;
padding: 1%;
}
.container label[for]::before,
.container label span::before
{
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
}
.container input[type="checkbox"]
{
display: none;
}
.container label
{
cursor: pointer;
}
.container label[for]::before
{
-webkit-transform: translatex(-24px);
-moz-transform: translatex(-24px);
-ms-transform: translatex(-24px);
-o-transform: translatex(-24px);
transform: translatex(-24px);
}
.container label span::before
{
-webkit-transform: translatex(16px);
-moz-transform: translatex(16px);
-ms-transform: translatex(16px);
-o-transform: translatex(16px);
transform: translatex(16px);
}
.container input[type="checkbox"][id]:checked ~ label[for]::before
{
content: "\25bc";
}
.container input[type="checkbox"][id]:not(:checked) ~ ul
{
display: none;
}
.container label:not([for])
{
margin: 0 8px 0 0;
}
.container label span::before
{
content: "";
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.container label input:checked + span::before
{
content: "\2714";
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
让我知道你们的想法。这结果是一项具有挑战性的努力，我需要找出这样的事情是否可能。谢谢大家。
编辑：我已经查看了建议的第三方工具，这可能是一种可能性。但就目前而言，我根据我所做的更深入的研究编写了自己的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>
让我知道你们对此的看法。再次感谢有时间回答的人。