C# 在javascript/jquery中创建动态树视图？

我的任务是创建一个树状数据列表，如下所示：

我得到的唯一信息是，它必须动态填充。”值、文本对被传递到网页，类似于“选择”html组件。另一条信息是，它必须用Javascript/jQuery编码，因为ASP.NET不能有任何回发

有人能帮我指出正确的方向吗？我该如何开始？我不知道数据是如何以“值”、“文本”对的形式传递的——我所知道的只是传递的两个字符串中包含了后者和前者

编辑：到目前为止，我已经试过了

    function createCategoryHeader(value, text) {

        //Code for creatign the header

    }

    function createListItem(value, text) {

        //Code for creating list item

    }

    createCategoryHeader("year_2011", "2011");
    createListItem("january", "Jan");
    createListItem("february", "Feb");
    createCategoryHeader("year_2010", "2010");
    createListItem("january", "Jan");
    createListItem("february", "Feb");

---

您所说的是动态的，您的意思是当您询问某个节点下面有哪些子节点时，您将收到一个键/值对列表吗

这里最好的做法是将事件绑定到调用服务器（使用AJAX）并接收所述列表的现有节点。之后，您可以在ajax的成功处理程序中解析结果，并使用jQueryDOM修改将新项添加到列表中。 光滑的增强可以是让单击的节点有一些视觉变化，或者改变图标以指示正在折叠/扩展的节点

我避免使用任何特定的代码，因为我不确定您的数据来自何处以及在什么时间点。下面的伪代码假设您有一个“顶级节点”列表和一种获取节点直接子节点的方法

未经测试的代码：

// Construct the basic HTML
foreach(item in list)
{
    // Make sure ID is changing appropriately
    echo "<li class='closed node' id='item1'>Item</li>";
}

---

我和他交了好运。它也能为您工作吗？

必须自己创建，不幸的是不能使用插件。构建自己的树视图是一个相当大的挑战，您有没有理由不使用jQuery插件并自己创建它，这是学生练习吗？@ed：无论这是学生练习还是工作，软件工程师和学生的主要责任是充实任务的需求，使其明确无误。通常，在工作世界和学术界，问一般性的问题会给你一般（和无用）的答案。也许你应该再问你的雇主/教授/老师一些关于需要交付什么的问题？@Cpfohl不幸的是，我问了我的老板，但他说目前还不知道数据将如何传递，甚至不知道格式。只是它将是两个字符串-'值'和'文本'。如果我知道的不止这些，我可能就不用问这个问题了：谢谢你的回答。不幸的是，我也不知道数据是如何传递的，这些都是我得到的模糊要求：/你知道如何在没有AJAX的情况下实现这一点吗？如果你不能回发，也不能使用AJAX，我认为你将无法满足这一要求的“动态”部分。如果要在用户遍历树时动态加载数据，则必须有某种方式允许您返回到服务器获取数据。以防万一，我没有清楚地解释我自己-通过“动态”，我的意思是树的内容不会在代码中静态定义。它将是动态的，因为树的内容将在运行时确定——但不完全是在用户遍历它时动态确定的。在这种情况下，您将需要在运行时树中接收某种树结构。例如父数组id或嵌套数组，如

array（0=>array（'title'=>'Item 1'，'children'=>array（…）），1=>…）

，然后可以使用递归函数生成适当的html。老实说，如果要实现最佳的树生成，您需要了解数据的表示方式。如何准确地将值传递到树视图，以便创建树视图？但是，如果您担心数据如何传递到树视图，你为什么不从你（不知道你将使用何种格式）检索的对值数据中传递正确的数据？？？@dmidz你能看一下编辑过的代码，看看我是否在正确的轨道上吗？这就是我通常所做的事情，每个孩子（或数据线）都有一个父ID属性（或者如果根、级别或类型没有），因为即使你认为数据是在树视图的正确顺序中，你怎么知道在一个水平线上是一条数据线？在编辑中，一个父类别和一个子类别之间的数据没有区别。这些数据“值”、“文本”对缺少树视图的一个属性“父对象id”。在开始编写代码之前，您可以首先定义所需和预期的数据格式，正如M.Meiboom所说。一旦您知道所需的所有属性（如“父id”）的数据格式（或类似格式），您就可以使用您喜欢的treeview插件进行设计、功能和数据初始化。然后，您的工作将只是在数据和treeview之间搭建一座桥梁。如果treeview是从dom树（ul&li）构建的，您只需构建这个dom结构，并在每次需要时初始化treeview插件，正如M.Meiboom所说，一个简单的两行递归函数就可以完成这项工作……如果您计划节省时间和金钱（和麻烦）；）

// Add jquery stuff
function setupBinds()
{
    $(".closed").click(function() { openNode(this); }
    $(".opened").click(function() { closeNode(this); }
}

function openNode(node)
{
    // get items
    make ajax call, onSuccess build HTML
    append HTML to node

    // make sure to rebind clicks for new items
    $(node).removeClass('closed');
    $(node).addClass('opened');
    setupBinds();
}

function closeNode(node)
{
    // remove the UL from the node
    $(node).remove('ul');

    // make sure to rebind clicks for new items
    $(node).removeClass('opened');
    $(node).addClass('closed');
    setupBinds();
}