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

作个记录。

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

这周,我们作前端,实现统一的过滤搜索相关推荐

  1. 前端项目统一管理API接口

    前端项目统一管理API接口 如今的前端框架层出不穷.应对的项目也是大小不一,微型的项目倒是无所谓文件结构,大多数项目我们都需要做到以下几点 规范文件目录,完善项目结构,以达到开发时思维清晰,错误定位准 ...

  2. 【web前端】可筛选[输入搜索]的select(重写)

    [web前端]可筛选[输入搜索]的select(重写)  ---  filterSelect.js /** * 将Select转变为支持输入内容对Select的Option进行筛选的js * @aut ...

  3. 网站前端进行违禁词过滤js代码

    var strChar=['最佳','最具','最爱','最赚','最优','最优秀','最好','最大','最大程度','最高','最高级','最高端','最奢侈','最低','最低级','最底', ...

  4. 前端校验统一社会信用代码

    统一社会信用代码规则 由18位的阿拉伯数字或大写英文字母(不使用I.O.Z.S.V)组成: 第1位~第2位.第9位~第18位 [0-9A-HJ-NP-RT-UW-Y] 第3位~第8位,由阿拉伯数字表示 ...

  5. 语义分割领域开山之作:Google提出用神经网络搜索实现语义分割

    来源: AI科技评论 1. Introduction 在 arxiv 浏览论文的时候,单独看文章名不知道属于 CV 哪个领域,怀着对一作 Liang-Chieh 敬畏的心,在摘要中扫描到 PASCAL ...

  6. qlabel文本改变信号_周明:NLP进步将如何改变搜索体验

    编者按:4月3日,微软亚洲研究院副院长周明受邀参加北大AI公开课,与大家分享了近期自然语言技术取得的进展和创新成果,并探讨了自然语言技术和搜索引擎如何进一步结合并创造新的可能.在课后问答环节,周明解读 ...

  7. 周明:NLP进步将如何改变搜索体验

    https://www.toutiao.com/a6682254230226469384/ 来源:AI 前线(ID:ai-front) 本文约4500字,建议阅读8分钟. 本文详细描述了周明如何在NL ...

  8. 周明:NLP进步将如何改变搜索体验(附视频)

    来源:AI 前线(ID:ai-front) 本文约4500字,建议阅读8分钟. 本文详细描述了周明如何在NLP进步中探索. 课程导师:雷鸣, 天使投资人,百度创始七剑客之一,酷我音乐创始人,北大信科人 ...

  9. 中科大提出统一输入过滤框架InFi:首次理论分析可过滤性,支持全数据模态

    点击上方"AI遇见机器学习",选择"星标"公众号 重磅干货,第一时间送达 来自:机器之心 针对模型推理过程中的输入冗余,中科大新研究首次从理论角度进行了可过滤性 ...

最新文章

  1. Learn OpenGL (三):着色器
  2. 我在OSC的第一篇博文
  3. 小工匠聊架构-超高并发秒杀系统设计 07_Plan B 的设计
  4. SAE 的极致应用部署效率
  5. LeetCode(69):x 的平方根
  6. gb50268-2008给水排水管道施工及验收规范_20131城市给水排水管道·中篇(开槽施工管道质量验收标准)...
  7. EF5.x Code First 一对多关联条件查询,Contains,Any,All
  8. linux配置定时删除日志文件,Linux使用shell脚本定时删除历史日志文件
  9. devops+备份mysql_使用Xtrabackup备份 MySQL 数据库
  10. Linux-完美解决linux系统镜像下载速度慢的问题
  11. win vista/win 7/win 2008 超级激活工具
  12. 更改计算机的桌面图标,电脑如何更改桌面图标 更改桌面图标方法
  13. ② 判断语句、循环语句
  14. 【PAT】 1020 发邮件(错排问题)详解
  15. 基于FPGA的电子万年历设计
  16. 测试dns的工具--rndc,dig命令----DNS排错,在线修改bind(nsupdate)
  17. 中国电子学会2022年python六级考试真题大题 类与对象练习题
  18. AutoMapper的使用方法
  19. 解决电脑某些网站打不开的问题
  20. 联想笔记本电脑novo键在哪?联想笔记本novo键位置介绍

热门文章

  1. 荒径 弗罗斯特_弗罗斯特庞克,颠覆性城市建设者
  2. 并发工具类(四)线程间的交换数据 Exchanger
  3. [CF903G]Yet Another Maxflow Problem
  4. 用imageMagick的composite合并图片
  5. 详解SpringMVC中Controller的方法中参数的工作原理[附带源码分析] good
  6. 在Winform程序中设置管理员权限及为用户组添加写入权限
  7. 【足迹C++primer】52、,转换和继承虚函数
  8. Jquey将序列化对象在前台显示地几种方式
  9. C# 中静态调用C++dll 和C# 中动态调用C++dll
  10. JMS : Java Message Service (Java消息服务)之一 [转]