<!-- 让include引用的页面,因为故障列表和周、月故障列表里面的table和分页是一样的前端页面,只有一点不同,没必要每个页面都写这些 --> <table id="table" class="table table-bordered table-striped text-center"> <thead class="success"> <tr class="success"> <th hidden="hidden" class="text-center">故障ID</th> <th class="text-center">主机名</th> <th class="text-center">IP地址</th> <th class="text-center" width="6%">报修人员</th> <th class="text-center">报修时间</th> <th width="22%" class="text-center">具体问题</th> <th width="22%" class="text-center">解决办法</th> <th class="text-center">故障状态</th> <th class="text-center">处理人</th> <th class="text-center">操作</th> </tr> </thead> <tbody id="history_income_list" class="table-hover"> {% for obj in hostnames %} <tr> <td hidden="hidden">{{ obj.id }}</td> <td id="{{ obj.id }}">{{ obj.Hostname }}</td> <td>{{ obj.IPaddress }}</td> <td>{{ obj.ProblemUser }}</td> <td>{{ obj.ProblemTime }}</td> <td> <div style="height:60px;overflow-y:scroll;"> {{ obj.Issue }} </div> </td> <td> <div style="height:60px;overflow-y:scroll;"> {{ obj.Resolve }} </div> </td> <td>{{ obj.get_ProblemStatus_display }}</td> <td>{{ obj.ResolveUser }}</td> <td id="{{ obj.id }}" class="model-button"> <button class="btn btn-primary edit-model" data-toggle="modal" data-target="#edit" id="model-button">编辑 </button> </td> </tr> {% endfor %} </tbody> </table> <!--分页--> <div class="pagination pagination-centered"> <div class="pull-right"><span class="label">{{hostnames}}</span></div> <ul>{% if not hostnames.has_previous %} <li class="active"><a>前一页</a></li> {% endif %} {% if hostnames.has_previous %} <li><a href="?page={{ hostnames.previous_page_number }}">前一页</a></li> {% endif %} {% if not hostnames.has_next %} <li class="active"><a>后一页</a></li> {% endif %} {% if hostnames.has_next %} <li><a href="?page={{ hostnames.next_page_number }}">后一页</a></li> {% endif %} </ul> </div>
<!-- 让include引用的页面,因为故障列表和周、月故障列表是一样的前端页面,只有一点不同,没必要每个页面都写一个 --> {#style="display: none;" 未加这个样式的时候这个模态框总是遮挡住正常该显示的页面,按钮无法按,F12可以看见模态框的阴影。加上后就不显示了#} <div style="display: none;" class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <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="myModalLabel"> 编辑 </h4> </div> <div class="modal-body"> <h3>编辑故障</h3> <form id="register-form" method="POST" action="{% url 'edit' %}" class="form-horizontal"> {% csrf_token %} <div hidden="hidden" class="control-group"> <div class="input-group"> <span class="input-group-addon control-label" for="id">故障id:</span> <input type="text" class="form-control" style=" 39%" id="inputid" name="id"> </div> </div> <div class="control-group"> <div class="input-group"> <span class="input-group-addon control-label" for="host_name">主机名:</span> <input type="text" class="form-control" style=" 39%" id="inputhostname" name="hostname" placeholder="主机名"> </div> </div> <div style="padding: 11px 0px" class="control-group"> <div class="input-group"> <span for="ip_address" class="control-label input-group-addon">IP地址:</span> <input type="text" class="form-control" style=" 37%" id="inputipaddress" name="ipaddress" placeholder="192.168.1.1"> </div> </div> <div class="control-group"> <div class="input-group"> <span class="input-group-addon control-label" for="problem_user">报修人员:</span> <input type="text" class="form-control" style=" 40%" id="inputproblemuser" name="problem_user" placeholder="李红星"> </div> </div> <div style="padding: 11px 0px" class="control-group"> <div class="input-group"> <span class="input-group-addon control-label" for="problem_time">报修时间:</span> <input name="problem_time" type="datetime-local" id="inputproblemtime" > {# <input type="text" class="form-control" style=" 36.5%" id="inputproblemtime" name="problem_time" placeholder="2018/01/26">#} </div> </div> <div class="control-group"> <div class="input-group"> <span class="input-group-addon control-label" for="issue">具体问题:</span> <textarea type="text" class="form-control" style=" 36%" id="inputissue" name="issue" placeholder="电脑蓝屏"></textarea> </div> </div> <div style="padding: 11px 0px" class="control-group"> <div class="input-group"> <span class="input-group-addon control-label" for="resolve">解决办法:</span> <textarea type="text" class="form-control" style=" 38%" id="inputresolve" name="resolve" placeholder="软件冲突卸载软件"></textarea> </div> </div> <div class="control-group"> <div class="input-group"> <span class="input-group-addon control-label" for="status">是否解决:</span> <select name="status"> <option value="yes">已解决</option> <option value="no">未解决</option> <option value="wait">待观察</option> </select> </div> </div> <div class="control-group"> <div class="controls"> <button type="submit" class="btn btn-info" >Save</button> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
/** * Created by Administrator on 2018/1/31. */ $(document).ready(function() { $(".model-button").click(function() { var value = $(this).parent().children(); $('#inputid').val(value.eq(0).text()); $('#inputhostname').val(value.eq(1).text()); $('#inputipaddress').val(value.eq(2).text()); $('#inputproblemuser').val(value.eq(3).text()); $('#inputproblemtime').val(value.eq(4).text()); $('#inputissue').val(value.eq(5).text().trim()); $('#inputresolve').val(value.eq(6).text().trim()); //for (var i=0;i<8;i++){ // var last_value1 = "td" +i + ":" // var last_value = value.eq(i).text() // console.log(last_value) //} //var last_value123 = value.eq(0).text() //console.log(last_value123) }) });