今天的Django教训汇总：Bootstrap的折叠功能-20211103

search_results_detail.html

通过class="collapse"来实现折叠功能。点击查看指标项，可以弹出对应细项。

{% extends 'PPDASH/base.html' %}
{% load static %}


{% block title_block %}
    search_results
{% endblock %}


{% block body_block %}
<div class="container-fluid">
      
    <div class="row">
        <!--导航栏-->

        <div class="col-lg-3 col-md-12 ml-4">
                <section class="bg-dark text-white">
                    {% for employee in employee_list %}
                    <div class="mx-4 py-5 bg-success text-center h4" >{{ employee.name }}<br>{{ employee.mail |cut:"@wistron.com" | cut:"@WISTRON.COM"}}</div>
                    <br>
                    <div class="mx-4 py-2 bg-success text-center h4 d-block d-lg-none">Menu</div>
                    <nav class="nav flex-column p-3 d-none d-lg-block">
                        <a class="nav-link" href="/PPDASH/compare_by_employee_and_dept/{{ employee.eid }}/"><img class="mb-1" src="{% static 'images/图标/公益.png'%}" style="height:18px;width:18px;">&nbsp;&nbsp;点击查看图表</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <div class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="{% static 'images/图标/公益.png'%}" style="height:18px;width:18px;">&nbsp;&nbsp;工號：{{ employee.eid }}</div>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <div class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="{% static 'images/图标/公益.png'%}" style="height:18px;width:18px;">&nbsp;&nbsp;部門：{{ employee.dept_code }}</div>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <div class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="{% static 'images/图标/公益.png'%}" style="height:18px;width:18px;">&nbsp;&nbsp;Level：{{ employee.level }}</div>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <div class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="{% static 'images/图标/公益.png'%}" style="height:18px;width:18px;">&nbsp;&nbsp;Function：{{ employee.function }}</div>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <div class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="{% static 'images/图标/公益.png'%}" style="height:18px;width:18px;">&nbsp;&nbsp;批次：{{ employee.batch }}</div>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <div class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="{% static 'images/图标/公益.png'%}" style="height:18px;width:18px;">&nbsp;&nbsp;潜力值：{{ potential_dict_mean }}</div>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <div class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="{% static 'images/图标/公益.png'%}" style="height:18px;width:18px;">&nbsp;&nbsp;能力值：{{ conpetence_dict_mean }}</div>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                    </nav>
                    {% endfor %}
                </section>
        </div>


        <!--正文-->
        <div class="col-lg-8 col-md-12 mt-0"  style="background-color: #fff;">

            <!--潜力分数展现-->
            <div class="row my-2 mx-4" >
                {% for employee in employee_list %}
                <div id='qianli'>
                    <div class="text-muted">指标分析</div>
                    <h2 value={{ potential_dict_mean }} id='mode1'>潜力值：{{ potential_dict_mean }}</h2>
                </div>
                <div>
                    <button class="btn btn-primary m-3" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
                      查看潜力指标项
                    </button>
                </div>

                <!--折叠项目开始-->
                <div class="collapse" id="collapseExample1">
                    <div class="">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:10px;">
                                    <th scope="col">潜力/能力</th>
                                    <th scope="col">指标</th>
                                    <th scope="col">低分表现-高分表现</th>
                                    <th scope="col">分数值</th>
                                </tr>
                            </thead>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">潜力</td>
                                <td scope="col">接纳反馈</td>
                                <td scope="col">低分表现：较少寻求反馈，对他人的建议持防御态度。<br>高分表现：主动寻求反馈，虚心听取建设性意见。保持谦逊的态度。</td>
                                <td scope="col">{{ employee.score_jieshoufankui }}</td>
                            </tr>

                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">潜力</td>
                                <td scope="col">学习敏锐度</td>
                                <td scope="col">低分表现：偏好熟悉的工作，遇到困难较少尝试自己探索。<br>高分表现：有广泛的好奇心和求知欲，擅长主动学习，快速吸取新知识。</td>
                                <td scope="col">{{ employee.score_xueximinruidu }}</td>
                            </tr>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">潜力</td>
                                <td scope="col">结果导向</td>
                                <td scope="col">低分表现：在面对困难时，优先选择调整目标。<br>高分表现：全力以赴追求高目标，克服困难完成调整。</td>
                                <td scope="col">{{ employee.score_jieguodaoxiang }}</td>
                            </tr>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">潜力</td>
                                <td scope="col">全局思维</td>
                                <td scope="col">低分表现：更关注具体问题，依靠直觉行事。<br>高分表现：思路开阔，善于理解宽泛、抽象的概念；能看清复杂问题背后的逻辑。</td>
                                <td scope="col">{{ employee.score_quanjusiwei }}</td>
                            </tr>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">潜力</td>
                                <td scope="col">适应力</td>
                                <td scope="col">低分表现：偏好清晰的工作流程，面对工作的变化和不确定性倍感压力。<br>高分表现：面对变化乐观自信，保持高效。</td>
                                <td scope="col">{{ employee.score_shiyingli }}</td>
                            </tr>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">潜力</td>
                                <td scope="col">成就他人</td>
                                <td scope="col">低分表现：关注自身工作，以做好本职为先。<br>高分表现：主动了解他人，发挥优势，挖掘潜能。</td>
                                <td scope="col">{{ employee.score_chengjiutaren }}</td>
                            </tr>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">潜力</td>
                                <td scope="col">领导意愿</td>
                                <td scope="col">低分表现：愿意服从安排，为团队提供支持。<br>高分表现：愿意主动承担领导团队的职责。</td>
                                <td scope="col">{{ employee.score_lingdaoyiyuan }}</td>
                            </tr>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">潜力</td>
                                <td scope="col">平衡人际与任务</td>
                                <td scope="col">低分表现：关注事情本身，较少借助人际关系推动任务。<br>高分表现：重视人际关系，借助融洽的人际关系为工作提供便利。</td>
                                <td scope="col">{{ employee.score_pinghengrenjiyurenwu }}</td>
                            </tr>
                
                        </table>
                    </div>
                </div>
                <!--折叠项目结束-->
                {% endfor %}
            </div>



            <div class="pl-3">
                <hr>
            </div>  


            <!--能力分数展现-->
            <div class="row m-4">

                {% for employee in employee_list %}
                    <div id='nengli'>
                        <div class="text-muted">指标分析</div>
                        <h2 >能力值：{{ conpetence_dict_mean }}</h2>
                    </div>

                    <div>
                        <button class="btn btn-primary m-3" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
                          查看能力指标项
                        </button>
                    </div>

                    <!--折叠项目开始-->
                    <div class="collapse" id="collapseExample2">
                        <div class="">
                            <table class="table table-striped table-bordered">
                            <thead>
                                <tr style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:10px;">
                                    <th scope="col">潜力/能力</th>
                                    <th scope="col">指标</th>
                                    <th scope="col">高分表现</th>
                                    <th scope="col">分数值</th>
                                </tr>
                            </thead>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">能力</td>
                                <td scope="col">辅导</td>
                                <td scope="col">提供及时的指导和反馈，帮助他人提高特定知识或技巧，以完成工作或解决问题。</td>
                                <td scope="col">{{ employee.score_fudao }}</td>
                            </tr>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">能力</td>
                                <td scope="col">授权委责</td>
                                <td scope="col">为提高组织与个人的效能，将决策权和/或工作职责指派给适当的人员。</td>
                                <td scope="col">{{ employee.score_shouquanweize }}</td>
                            </tr>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">能力</td>
                                <td scope="col">建立成功团队</td>
                                <td scope="col">使用适当的方法和灵活的人际互动风格建立一个有凝聚力的团队；<br>促进团队目标的达成。</td>
                                <td scope="col">{{ employee.score_jianlichenggongtuandui }}</td>
                            </tr>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">能力</td>
                                <td scope="col">管理人际关系</td>
                                <td scope="col">满足个人需要，以便建立信任、鼓励双向沟通、加强人际关系。</td>
                                <td scope="col">{{ employee.score_guanlirenjiguanxi }}</td>
                            </tr>
                
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">能力</td>
                                <td scope="col">影响力</td>
                                <td scope="col">运用适宜的人际互动风格与技巧获得他人对其想法或计划的认同；<br>针对不同的任务、状况及人员调整自己的行为。</td>
                                <td scope="col">{{ employee.score_yingxiangli }}</td>
                            </tr>
                
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">能力</td>
                                <td scope="col">建立伙伴关系</td>
                                <td scope="col">拓展并运用工作圈以外的人脉来达到成果。</td>
                                <td scope="col">{{ employee.score_jianlihuobanguanxi }}</td>
                            </tr>
                
                            <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
                                <td scope="col">能力</td>
                                <td scope="col">计划与组织</td>
                                <td scope="col">为自己与他人制定行动方案，确保工作有效完成。</td>
                                <td scope="col">{{ employee.score_jihuayuzuzhi }}</td>
                            </tr>
                            </table>
                        </div>
                    </div>
                    <!--折叠项目结束-->
                    {% endfor %}
            </div>

            <div class="pl-3">
                <hr>
            </div>


                <!--个人领导力发展策略：潜力-->
                <div class="row m-4">
                    <div>
                        <div>
                            <span class="h2">潜力</span>
                            <span class="text-muted">以下是针对最为凸显的助力与阻力，相对应的发展策略。这些发展策略将给您建议，如何更好地发挥您的助力因子，最大程度地发挥个人优势；如何更好地管理您的阻力因子，最大程度的减少发展的阻碍。</span>
                        </div>
                    </div>
                    <div class="container mt-3">
                        <div class="row">
                            <div class="row">
                                <div class="col-sm-6">
                                  <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">{{ employee_potential1 }}</h5>
                                      <p class="card-text">
                                        {% autoescape off %}
                                          {{ employee_potential_advice1 }}
                                        {% endautoescape %}
                                      </p>
                                      <a href="#qianli" class="btn btn-primary">查看定义</a>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-sm-6">
                                  <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">{{ employee_potential2 }}</h5>
                                      <p class="card-text">
                                          {% autoescape off %}
                                            {{ employee_potential_advice2 }}
                                          {% endautoescape %}
                                        </p>
                                      <a href="#qianli" class="btn btn-primary">查看定义</a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                        </div>

                    </div>

                </div>

                <div class="pl-3">
                    <hr>
                </div>

                <!--个人领导力发展策略：能力-->
                <div class="row m-4">
                    <div>
                        <div>
                            <span class="h2">能力</span>
                            <span class="text-muted">岗位的变化与职位的晋升往往会给我们带来新的挑战。如何驾驭这些挑战，很大程度上取决于转型领导力的水平及准备度。以下是针对您在转型时可能面对的挑战及相应的发展建议。</span>
                        </div>
                    </div>
                    <div class="container mt-3">
                        <div class="row">
                            <div class="row">
                                <div class="col-sm-12">
                                  <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">{{ employee_min_conpetence }}</h5>
                                      <p class="card-text">
                                        {% autoescape off %}
                                          {{ employee_conpetence_advice }}
                                        {% endautoescape %}
                                      </p>
                                      <a href="#nengli" class="btn btn-primary">查看定义</a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                        </div>

                    </div>

                </div>


        </div>


    </div>




</div>
{% endblock %}