products.html

{% extends 'admin/model/list.html' %}

{% block head_css %}
    {{ super() }}
    <link href="{{ url_for('static', filename='jquery-ui.css') }}" rel="stylesheet" />
    <link href="{{ url_for('static', filename='jquery.treetable.css') }}" rel="stylesheet" />
    <style>
    .col-parent_id {
        display: none;
    }
    table.model-list td span.indent {
        white-space: no-wrap;
    }
    </style>
{% endblock %}

{% block list_header %}
    {{ super() }}
{% endblock %}

{% block list_row %}
    {{ super() }}
{% endblock %}

{% block tail_js %}
    {{ super() }}
    <script src="{{ url_for('static', filename='jquery-ui.js') }}" type="text/javascript"></script>
    <script src="{{ url_for('static', filename='jquery.treetable.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        // Assign ID data attributes to nodes in the tree
        $('table.model-list tr').map(function() {
          var nodeId = $(this).find('input.action-checkbox').val();
          $(this).data('tt-id', nodeId);

          var parentId = $(this).find('.col-parent_id').text().trim();
          $(this).data('tt-parent-id', parentId);
        })

        // Re-render the table nodes in tree format
        $('table.model-list').treetable({
          expandable: true,
          initialState: 'expanded',
          indenterTemplate: '<span class="indent"></span>',
          indent: 32,
        });

        var applyExpansionIcons = function() {
          var expand = $(this).attr('title') === 'Expand';
          $(this).removeClass().addClass(expand ? 'icon-plus' : 'icon-minus');
        };

        // Apply icons for node expand and collapse buttons
        $('table.model-list td span.indent a').click(applyExpansionIcons);
        $('table.model-list td span.indent a').each(applyExpansionIcons);
    })
    </script>
{% endblock %}