Question

好吧，我之前曾尝试过问过这个问题，但我没有得到太多帮助，我认为这是因为我一直在以错误的方式构建它。所以我要再试一次。请耐心等待我，因为我仍然是一个非常新手的开发者。

所以这是我的问题：

我将数据从视图传递到模板作为上下文，正在填充到表中以供查看。为了使其更加整合和更容易查看，我正在截断表中的数据。但是，要让用户完全访问数据，我想在模态弹出窗口中显示完整数据。但是，模态仅加载表中第一行的数据，并显示表中每隔一行的数据。

这是我的模板html：

{% if data %}
  {% for key, value in data %}
    <tr>
       <td scope="row">{{ forloop.counter }}.</td>
       <td>

    <div id="popup">
      <p class="citation" data-hover="{{ value.2 }}">{{ value.1 }}
      <img src='{% static "img/expand-icon2.png" %}' id="expand"></p>
      <a class="article" target="_blank" href={{ value.3 }}>{{ value.2 }}</a>
    </div> 

    </td>
    {% if value.4 %}
    <td class='test'>{{ value.4 }}<a href='#' id="trigger_{{ forloop.counter }}"><img src='{% static "img/expand-icon2.png" %}' id="expand"></a>
        {% if methods %}
        {% for key2, value in methods %}{% ifequal key2 key %}
        <div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                ×
                </button>
                <h4 class="modal-title" id="classModalLabel">
                    Triples:
                    </h4>
            </div>
            <div class="modal-body">
                <table id="classTable" class="table table-bordered">
                <thead>
                    <tr>
                    <th style="width: 4%">#</th>
                    <th>Subject</th>
                    <th>Predicate</th>
                    <th>Object</th>
                    <tr>
                </thead>
                <tbody>
                    {% for item in value %}
                        <tr>
                        <td scope="row">{{ forloop.counter }}.</td>
                        <td>{{ item }}</td>
                        <td>{{ item }}</td>
                        <td>{{ item }}</td>
                        </tr>

                    {% endfor %}
                </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">
                Close
                </button>
            </div>
            </div>
        </div>
        </div>
        {% endifequal %}
        {% endfor %}
        {% endif %}
    </td>
    {% else %}
    <td>No Provenance Terms Found</td>
    {% endif %}

查看：

od = collections.OrderedDict(reversed(sorted(occoruence_dict.items(), key=operator.itemgetter(1))))
    od2 = collections.OrderedDict(reversed(sorted(occoruence_dict2.items(), key=operator.itemgetter(1))))

    od_methods = {}
    od_tools = {}
    od_data = {}
    for key, value in od.iteritems():
        if value[4]:
            od_methods[key] = value[4].split(",")
        if value[5]:
            od_data[key] = value[5].split(",")
        if value[6]:
            od_tools[key] = value[6].split(",")


    context = {

        "title":"Search",
        'data': list(od.iteritems())[:10],
        'tools': od_tools.iteritems(),
        'methods': od_methods.iteritems(),
        'data4': od_data.iteritems(),
        'search_phrase': instanceValuesString,


    }
    return render(request, 'results.html', context)

使用Javascript：

 <script type="text/javascript">
    $('.test').each(function(){
      var trig = '[id^="trigger_"]';
      $(trig).click(function(){
        $('#classModal').modal('show');
        return false;
      })

    });   
  </script>

为每个表格单元格动态加载django模式中的数据

0 个答案: