这周，我们作前端，实现统一的过滤搜索

这周统一了过滤和搜索样式，

作个记录。

还自己写了两个css样式，长见识了。

filter.html

{% load staticfiles %}

<link rel="stylesheet" href="{% static 'css/select2.min.css'%}" />
<link rel="stylesheet" href="{% static 'gentelella/build/css/prism.css'%}" />
<script src="{% static 'gentelella/vendors/jquery/dist/jquery.min.js'%}"></script>
<script src="{% static 'js/select2.min.js'%}"></script>

<div class="input-group" id="first-select" onclick="init_select(); opclick()">
    <div  id="site-div-before"  style="width:180px" >
        <select class="select2_single form-control" disabled style="width:180px" id="id_site_name_before">
            <option value="" selected="selected">选择项目</option>
        </select>
    </div>
    <div  id="site-div" style="display:none;"  style="width:180px" >
        <select class="select2_single form-control" style="width:180px;"  id="id_site_name" name="Site_name" onChange="getSiteIdOptions(this.value)">
            <option value="" selected="selected">选择项目</option>
        </select>
    </div>
</div>
<div class="input-group">
    <div style="width:280px;">
        <select class="select2_single form-control" style="width:280px;" id="id_app_name" name="App_name">
            <option value="" selected="selected">选择组件</option>
        </select>
    </div>
</div>

<script>

    $('select.select2_single').select2(

    );

    init_select = function(){
        $("#site-div-before").remove();
        $("#id_site_name").attr("disabled","disabled");
        var promiseGetSite = $.ajax({
            type:"POST",
            url:"/public_views/get_site/",
            cache: false,
            dataType:"json",
            success:function(data){
                if(data.length > 0) {
                    for(i=0;i<data.length;i++){
                        var opt = new Option();
                        opt.text = data[i].label;
                        opt.value = data[i].text;
                        $("#id_site_name").append(opt);
                    }
                    $("#id_site_name").removeAttr("disabled");
                }
            }
        });
       $("#site-div").show();
       $('#first-select').removeAttr("onclick");
    };

    function opclick() {
        console.log("todo");
    };

    function getSiteIdOptions(site_id){
        $("#id_app_name").attr("disabled","disabled");
        $.ajax({
            type: "GET",
            url: "{% url "public_views:get-site-app" %}?site_id="+site_id+"&devtype=nosql",
            dataType:'json',
            success: function(data){
                var siteSelect = document.getElementById("id_app_name");
                $("#id_app_name").empty();
                    var opt = new Option();
                    opt.text = "选择组件";
                    opt.value = "";
                    $("#id_app_name").append(opt);
                if(data.length > 0) {

                    for(i=0;i<data.length;i++){
                        if (data[i].label == undefined){
                            break;
                        }
                        var opt = new Option();
                        opt.text = data[i].label;
                        opt.value = data[i].text;
                        $("#id_app_name").append(opt);
                    }
                    $("#id_app_name").removeAttr("disabled");
                } else {
                    console.log("empty");
                }
            }
        });
    };

    function GetRequest() {
       var url = location.search;
       var theRequest = new Object();
       if (url.indexOf("?") != -1) {
          var str = url.substr(1);
          strs = str.split("&");
          for(var i = 0; i < strs.length; i ++) {
             theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
          }
       }
       return theRequest;
    }
    var Request = new Object();
    Request = GetRequest();
    var site_name = Request['site_name'];
    if (site_name) {
        init_select();
    }
</script>

my.css:

.btn-vertical-prism {
  padding: 0px 0px;
  margin: 0px;
  z-index: 2;
}


/** /bootstrap-wysiwyg **/
/** Select2 **/
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 34px;
}

.select2-container--default .select2-selection--single {
  border-radius: 0px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-top: 2px;
}