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

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

作个记录。

还自己写了两个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;
}