在JavaScript/jQuery中创建动态树视图？

我一直在负责创建数据的树样式列表，像这样的东西：在JavaScript/jQuery中创建动态树视图？

http://paulneale.com/tutorials/dotNet/treeView/treeView02.png

我一直在考虑的唯一信息是，它必须是动态填充。 'value'，'text'对被传递给网页，类似于'select'html组件。另一条信息是它必须用Javascript/jQuery编码，因为不能有任何来自ASP.NET的回发。

可能有人亲切地指出我在正确的方向 - 我应该如何开始？我不知道数据是如何在“值”，“文本”对中传递的 - 我只知道只有2个字符串被传递，包含后者和前者。

编辑：我到目前为止已经试过这一点。

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");

来源

2011-09-06 eddsd

http://jquery.bassistance.de/treeview/demo/ – Samich

必须创建它自己，遗憾的是不能使用插件。 – eddsd

这对于构建自己的树视图来说是一个相当大的挑战，你有充分的理由不*使用jQuery插件并自己创建它，它是一个学生exercice吗？ – dmidz

你说的是动态的，你的意思是说，当你问什么孩子低于某个节点时，你会收到一个键/值对列表？这里

最好的事情将是一个事件绑定到调用（使用AJAX）服务器并接收现有节点列表说。之后，您可以在ajax的succes处理程序中解析结果，并使用JQuery DOM修改将新项目添加到列表中。漂亮的增强可以让点击的节点有一些视觉上的改变，或者改变图标来指示折叠/展开节点。

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

未经测试的代码：

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

而且一些javascript：

// 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(); 
}

来源

2011-09-06 12:48:26

谢谢你的答案。不幸的是，我不知道数据是如何传递的，这些都是我给出的模糊要求：/您是否知道如何在没有AJAX的情况下实现这一点？ – eddsd

如果你不能回发并且不能使用Ajax，我认为你不能满足这个需求的“动态”部分。如果数据是在用户遍历树时动态加载的，则必须有某种方式允许您访问服务器以获取数据。 – mikemanne

只要我没有清楚地解释我自己 - 通过“动态”，我的意思是树的内容不会在代码中被静态定义。它将是动态的，因为树的内容将在运行时确定 - 但不完全随着用户遍历它而动态发生。 – eddsd

我有好运气this tree-view code。它也能为你工作吗？

来源

2011-09-06 13:33:50

如何将值传递给treeview，以便创建它？ – eddsd

但是如果你担心数据是如何传递给树视图的，那么你为什么不仅仅是从传递值对数据中传递正确数据的方式来工作（你将不知道在哪种格式下）？？ – dmidz

@dmidz你可以看看编辑后的代码，看看我是否在正确的轨道上？这就是我最终做的 – eddsd

在JavaScript/jQuery中创建动态树视图？

回答

相关问题