Question

的简介：
在我的部门，一位同事和我试图建立一个基于Django框架的库存控制系统。基本上，大多数东西都在工作。但目前，我们在jQuery方面遇到了一些问题。想象一下，我们的数据库中有一些设备，例如一部手机，我们希望获得所有组件的详细视图。这些设备中的每一个都具有一些子组件（例如主板），其也可以具有子组件（例如CPU，RAM，......）。

的说明：
提供nessecary数据的方法的django实现（在HTML文件中）如下所示：

        {% for module in submodels %}
            <p>
                {{ module.intentation }} || submodules: {{ module.has_subs }} || {{ module.object }} 
            </p>
        {% endfor %}

如果模块有子模块，方法has_subs将返回true。模块本身的意图列在字符串中，方法intentation返回。

在这种情况下，我们希望动态扩展有关子模块的HTML表。下图显示了我们的想法。

>   |   1.1     |   OLED
V   |   1.2     |   Motherboard
    |   1.2.1   |   CPU
    |   1.2.2   |   RAM
>   |   1.3     |   Battery
>   |   1.4     |   Motion Sensor

如果模块的标志has_subs为TRUE，则所有从属（在方法intentation的返回字符串中列出的）模块都应该展开。例如：通过单击主板（1.2），所有具有1.2 intentation的子模块都应该展开。（模块意图的数据结构有以下零。例如OLED： 1.1.0.0，主板：1.2.0.0，CPU：1.2.1.0，RAM：1.2.2.0，...）

的问题：
我们怎样才能用jQuery实现这个功能来扩展表？我们关于一个jquery函数，它解析了意图字符串和has_subs值。

我们还希望实现两个按钮“全部关闭”和“全部展开”。

谢谢你的帮助，
关于matthieu

Answer 1

您需要一个标记，例如：

{% if module.has_subs %} 
    <p class ="with-subs-p">
        Module Name
    </p>
    <div class="with-subs-d">
        # Print each of the subs in whatever format you like
    </div>
{% else %}
    <p>Module Name</p>
...

这就是HTML和标签的全部内容，CSS /格式也取决于你。

JQuery也相对简单：

$(document).ready(function()
{

  $(".with-subs-d").hide();
  $(".with-subs-p").click(function()
  {
    $(this).next(".with-subs-d").slideToggle(600);
  });
});

使用依赖于缩进字符串的jQuery扩展HTML表

1 个答案: