bootstrap_table_example

{% extends "base.html" %}
{% block nav-left %}
    <li role="presentation" ><a href="/crawl/resys/searchqueryintervene/sensitive_intervene/">返回搜索干预主页</a></li>
{% endblock %}

{% block title %}搜索词干预后台{% endblock %}
{% block extrastyle %}
    {{ block.super }}
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static "lib/css/bootstrap-table.min.css" %}">
{% endblock %}

{% block extrajs %}
    {{ block.super }}
    {% load staticfiles %}
    <script src="{% static "lib/js/bootstrap-table.min.js" %}"></script>
    <script src="{% static "lib/js/bootstrap-table-zh-CN.min.js" %}"></script>
    <script>
        function load_table() {
                $('#keyword_table').bootstrapTable('destroy');
                $('#keyword_table').bootstrapTable({
                    url: '/crawl/resys/searchqueryintervene/get_recall_json/',
                    method: 'get', //请求方式（*）
                    toolbar: '#table_toolbar',
                    striped: true, //是否显示行间隔色
                    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true, //是否显示分页（*）,
                    sidePagination: 'client',
                    sortable: true, //是否启用排序
                    sortName: 'id',
                    sortOrder: 'desc', //排序方式
                    sortStable: true,
                    queryParamsType: "limit",//传递参数（*）
                    pageNumber: 1, //初始化加载第一页，默认第一页
                    pageSize: 100, //每页的记录行数（*）
                    pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                    strictSearch: false,
                    showColumns: true, //是否显示所有的列
                    showRefresh: true, //是否显示刷新按钮
                    minimumCountColumns: 2, //最少允许的列数
                    uniqueId: "id", //每一行的唯一标识，一般为主键列
                    showToggle: true, //是否显示详细视图和列表视图的切换按钮
                    cardView: false, //是否显示详细视图
                    detailView: false, //是否显示父子表
                    clickToSelect: true,
                    search: true,
                    columns: [{
                        field: 'query_type',
                        title: 'query类型',
                        halign: 'center',
                        align: 'center',
                        formatter: type_formatter,
                        valign: 'middle'
                    },{
                        field: 'status',
                        title: '是否召回',
                        formatter: status_formatter,
                        halign: 'center',
                        align: 'center',
                        valign: 'middle'
                    }]
                });
            }
            function type_formatter(value, row) {
                if (row.status == 0) {
                    return '<font color = "red">' + value + '</font>';
                }else {
                    return value;
                }
            }
            function status_formatter(value, row) {
                if(row.status == '1') {
                    return '<select id="' + row.query_type +'" class="form-group input-sm cp" onchange="' + "modify('" + row.query_type + "')" +'"> <option value="1" selected>召回</option> <option value="0">未召回</option> </select>';
                }
                else {
                    return '<select id="' + row.query_type +'" class="form-group input-sm cp" onchange="' + "modify('" + row.query_type + "')" +'"> <option value="1">召回</option> <option value="0" selected>未召回</option> </select>';
                }
            }
            load_table();
            function modify(query_type) {
                 var status = $('#' + query_type + '  option:selected').val();
                 var params = {
                     query_type: query_type,
                     status: status
                 };
                 $.get('/crawl/resys/searchqueryintervene/modify_recall/',
                     params,
                     function () {
                        $('#keyword_table').bootstrapTable('destroy');
                        load_table();
                     }
                );
            }

    </script>

{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-6" style="padding-left: 0;">
            <h3 style="display: inline;"><span style="color: red;">●</span>{{ current_page }}</h3>
        </div>
    </div>
    <hr style="margin-top: 5px; margin-left: -15px; margin-right: -15px;"/>

    <div class="row" style="margin-bottom:100px">
             <table id="keyword_table" data-show-columns="true"></table>
    </div>
</div>

{% endblock %}