这周统一了过滤和搜索样式，
作个记录。
还自己写了两个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; }
)
