Layui 实现一个高级筛选功能

基于layui写的一个高级搜索（筛选）功能。
效果图：

是一位萌新，所有写的有点儿乱。（放在上面，供新手们参考，也是自己做一个记录。）
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../../../header_ck.jsp"%>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<base href="<%=basePath%>" />

<title></title>
<link rel="SHORTCUT ICON" href="<%=basePath%>favicon.ico" />

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="This is my page" />

.search-title{
position: relative;
height:40px;
border-bottom: 1px solid #e6e6e6;
}
.search-title span{
position:absolute;
left:16px;
line-height:40px;
}
.search-title a{
color:#01AAED;
}
.search-title a:hover{
color:#5FB878;
}
.search-title ul{
position: absolute;
left:100px;
height:30px;
padding: 10px 0;
}
.search-title ul li{
font-size: 12px;
height: 18px;
line-height: 18px;
float: left;
margin-left: 10px;
border: 1px solid;
cursor: pointer;
border-radius: 10px;
padding-left: 6px;;
}
.search-title ul li i{
font-size: 12px;
}
#search-content{
border-top:0px;
padding-right:0;
}
#searchResult li:hover{
border: 1px solid #01AAED;
color: #01AAED;
}
#searchResult li b{
font-weight: normal;
padding-right: 2px;
}

#btn_fold{
font-size:14px;
position: absolute;
cursor:pointer;
right:30px;
line-height:40px;
}

.search-name{
float:left;
display: block;
width:90px;
line-height:40px;
}
#fundtype{
border-bottom: 1px solid #e6e6e6;
height: auto;
padding-bottom:10px;
}
#fundtype ul{
line-height: 50px;
padding-left:90px;
}
#fundtype ul li{
float: left;
width: 95px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
margin-right: 10px;
margin-top: 4px;
background-color: #eeeeee;
}
#fundtype ul li a{
cursor: pointer;
}

#fundcompany{
border-bottom: 1px solid #e6e6e6;
}

.fundcompany-content a{
padding: 0 20px;
cursor: pointer;
border-right: 1px solid #d4d4d4;
}

#fundyeji{
border-bottom: 1px solid #e6e6e6;
}
.fundyeji-content a{
padding: 0 30px;
cursor: pointer;
}

#fundstar{
border-bottom: 1px solid #e6e6e6;
height: auto;
padding: 10px 0;
}
#fundstar ul{
line-height: 50px;
padding-left:90px;
}
#fundstar ul li{
float: left;
width: 95px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
margin-right: 10px;
margin-top: 4px;
background-color: #eeeeee;
}
#fundstar ul li a{
cursor: pointer;
}

.layui-tab-title li{
min-width:10px;
padding: 0 10px;
}

.layui-tab-content{
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
.layui-input{
width:90px;
}
.layui-input-inline{
width:60px;
}
.layui-form-label{
padding: 9px 0;
width:60px;
text-align: center;
}
.active{
background-color: #01AAED !important;
color: #fff !important;
}
.choice{
background-color: #01AAED !important;
color: #fff !important;
}
.choicecom{
color: #5FB878;
text-decoration: underline;
}

.savedcond{
cursor:pointer;
line-height: 24px;
padding: 0 4px 0 8px;
margin: 5px 10px;
display: block;
background-color: #EEEEEE;
color: #A6AAB8;
border-radius: 12px;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
text-align: center;
}
.savedcond:hover{
background-color: #aaa;
color: #fff;
}
.savedcond i{
float: right;
}
.savedcond i:hover{
color: #FF5722;
}

.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}
</style>
<script type="text/javascript">
layui.config({
base: 'common/layuiadmin/',
}).extend({
excel: 'modules/excel',
xlsx: 'modules/xlsx',
FileSaver: 'modules/FileSaver',
suggestbind : 'lib/suggestbind',
index : 'lib/index'
});
</script>
</head>
<body>
<div class="layui-collapse" style="width:99%;height:100%; margin:0 auto; background-color: white">
<div class="layui-colla-item">
<div class="search-title">
<span>所有条件 
<i class="layui-icon layui-icon-triangle-r"></i> </span>
<ul id="searchResult">
<li style="display:none"><b id="typetext"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="companytext"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_1z"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_1y"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_3y"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_6y"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_jin"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_1n"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_2n"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_3n"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_zi"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="startext"></b><i class="layui-icon layui-icon-close"></i></li>
</ul>
<a style="position: absolute; right:100px;padding-right:20px;line-height: 40px;border-right:1px solid #e6e6e6;cursor:pointer;" class="" id="resetsearch"">清空所有条件</a>
<a class="layui-icon layui-icon-up" id="btn_fold" onclick="foleType();"> 收起
</a>
</div>

</ul>
<a compid="0" class="layui-btn layui-btn-primary active companyname" style="position:absolute;top:0;left:0;width:95px;height:40px;">不限</a>
<div id="fundcompname" class="layui-tab-content fundcompany-content">
<div id="fundcompany-hot" class="layui-tab-item layui-show">
<a class="companyname" compid="80000222">华夏</a>
<a class="companyname" compid="80000223">嘉实</a>
<a class="companyname" compid="80000229">易方达</a>
<a class="companyname" compid="80000220">南方</a>
<a class="companyname" compid="80048752">中银</a>
<a class="companyname" compid="80000248">广发</a>
<a class="companyname" compid="80064225">工银瑞信</a>
<a class="companyname" compid="80000226">博时</a>
<a class="companyname" compid="80000228">华安</a>
<a class="companyname last" compid="80053708">汇添富</a>
</div>

</div>
</div>
</div>

<div style="width:100%;padding-top:10px;">
<div style="width:220px;margin:0 auto;">
<button id="savecondition" style="background-color: #5FB878;width:100px;" class="layui-btn ">保存</button>
<button id="searchOk" style="width:100px;" class="layui-btn layui-btn-warm">确定</button>
</div>
</div>
</div>
<div style="float:left;width:13%;height:100%;">
<dl style="width:100%;padding-left:4px;">
<dt style="text-align: center">保存的搜索</dt>
<dd id="savedsearch">
</dd>
</dl>
</div>
<div class="clearfloat"></div>
</div>
</div>

</div>
<script>
var keyObj = {'fundtype':'','fundtypeid':'','fundcompany':'','fundcompanyid':'','yeji_1z':'','yeji_1y':'','yeji_3y':'','yeji_6y':'','yeji_jin':'','yeji_1n':'','yeji_2n':'','yeji_3n':'','yeji_zi':'','fundstar':'','starid':''};
layui.use(['suggestbind','layer', 'form', 'element','laydate'], function(){
var layer = layui.layer
,form = layui.form
,jxtable = layui.jxtable
,element = layui.element
var laydate = layui.laydate;
window.$ = layui.jquery;

element.on('tab(jijinyeji)', function(){
var fundsign = $(this).attr("fundsign");
var textname = $(this).text()+"：";
$("#fundyeji .layui-tab-item").removeClass("layui show");

fundyeji(fundsign,textname);
});

});

//收起和展开
function foleType(){
if($("#search-content").hasClass("layui-show")){
$("#btn_fold").text(" 展开");
$("#btn_fold").removeClass("layui-icon layui-icon-up").addClass("layui-icon layui-icon-down");
$("#search-content").removeClass("layui-show")
}
else{
$("#btn_fold").text(" 收起");
$("#btn_fold").removeClass("layui-icon layui-icon-down").addClass("layui-icon layui-icon-up");
$("#search-content").addClass("layui-show")
}
}

$(function(){
//选择基金类型
$("#fundtype ul li").click(function(){
var isChoose = $(this).hasClass("choice");
var chooseLen = null;
var $parent = $(this).parent();

if($(this).index()!==0){
$(this).siblings().removeClass("active");
if(!isChoose){
$(this).addClass("choice");
}else{
$(this).removeClass("choice");
}
chooseLen = $parent.children('.choice').length;
if(chooseLen==0){
$("#typetext").parent().css("display","none");
$parent.children('li').eq(0).addClass('active');
}
var hasActive = null;
hasActive = $parent.children('.active').length>0;
if(hasActive){
keyObj['fundtype'] = '';
keyObj['fundtypeid'] = '';
$("#typetext").parent().css("display","none");
}else{
var arr =[];
var arr2 = [];
$("#typetext").parent().css("display","block");
$parent.children('.choice').each(function(index,item){
arr.push($(item).text());
arr2.push($(item).attr("typeid"));
});
keyObj['fundtype'] = arr;
keyObj['fundtype'] = arr.join(',');
keyObj['fundtypeid'] = arr2;
keyObj['fundtypeid'] = arr2.join(',');
}

showText(keyObj.fundtype, "#typetext", "类型：");
}
else{
$(this).addClass("active");
$(this).siblings().removeClass("choice");
keyObj['fundtype'] = '';
keyObj['fundtypeid']='';
$("#typetext").parent().css("display","none");
}

});

//选择基金公司
function choosecompany(){
$("#fundcompany a").click(function(){
var isChoose = $(this).hasClass("choicecom");
var chooseLen = null;
var $parent = $("#fundcompany");
if($(this).attr("compid")!=='0'){
$("#fundcompany a").removeClass("active");
if(!isChoose){
$(this).addClass("choicecom");
}else{
$(this).removeClass("choicecom");
}
chooseLen = $("#fundcompany a.choicecom").length;
if(chooseLen==0){
$("#fundcompany a").eq(0).addClass('active');
$("#companytext").parent().css("display","none");
}

showText(keyObj.fundcompany, "#companytext", "公司：");

}else{
$("#fundcompany a").eq(0).addClass("active")
$("#fundcompany a").removeClass("choicecom");
keyObj['fundcompany'] = '';
keyObj['fundcompanyid']='';
$("#companytext").parent().css("display","none");
}

});
}

//选择基金评级
$("#fundstar ul li").click(function(){
var isChoose = $(this).hasClass("choice");
var chooseLen = null;
var $parent = $(this).parent();

if($(this).index()!==0){
$(this).siblings().removeClass("active");
if(!isChoose){
$(this).addClass("choice");
}else{
$(this).removeClass("choice");
}
chooseLen = $parent.children('.choice').length;
if(chooseLen==0){
$("#startext").parent().css("display","none");
$parent.children('li').eq(0).addClass('active');
}
var hasActive = null;
hasActive = $parent.children('.active').length>0;
if(hasActive){
keyObj['fundstar'] = '';
keyObj['starid'] = '';
$("#startext").parent().css("display","none");
}else{
var arr =[];
var arr2 = [];
$("#startext").parent().css("display","block");
$parent.children('.choice').each(function(index,item){
arr.push($(item).text());
arr2.push($(item).attr("starid"));
});
keyObj['fundstar'] = arr;
keyObj['fundstar'] = arr.join(',');
keyObj['starid'] = arr2;
keyObj['starid'] = arr2.join(',');
}

showText(keyObj.fundstar, "#startext", "评级：");
}
else{
$(this).addClass("active");
$(this).siblings().removeClass("choice");
keyObj['fundstar'] = '';
keyObj['starid']='';
$("#startext").parent().css("display","none");
}

});

//从数据库获取所有公司
$.ajax({
url: 'advancedsearch/getCompanyname.do',
dataType: 'json',
success: function(data){
var comp = data_letter_sort(data.data,"cn");
for (var key in comp) {
var title = '';
var str = '';
var str2 = '';
title = '<li>'+key+'</li>';
$("#fundcomptitle").append(title);
for(var j = 0; j < comp[key].length; j++){
if(j == comp[key].length-1){
str += '<a class="last" compid="'+comp[key][j].cid+'">'+comp[key][j].cname+'</a>';
}else{
str += '<a compid="'+comp[key][j].cid+'">'+comp[key][j].cname+'</a>';
}
}
str2 = '<div id="fundcompany-'+key+'" class="layui-tab-item">'+str
+'</div>';
$("#fundcompname").append(str2);
}

choosecompany();
}
});

//获取json数组的长度
function getJsonLength(jsonData){
var jsonLength = 0;
for(var item in jsonData){
jsonLength++;
}
return jsonLength;
}

// 转换数据格式
var json_sort = {}
for (var i = 0; i < resault.length; i++) {
json_sort[resault[i].letter] = resault[i].list;
}

return json_sort;
}

});

//清空条件方法
function clearCondition(id){
if("typetext"==id){
$("#fundtype ul li").removeClass("choice");
$("#fundtype ul li").eq(0).addClass("active");
keyObj['fundtype']='';
keyObj['fundtypeid']='';
}else if("companytext"==id){
$("#fundcompany a").removeClass("choicecom");
$("#fundcompany a").eq(0).addClass("active")
keyObj['fundcompany']='';
keyObj['fundcompanyid']='';
}else if("startext"==id){
$("#fundstar ul li").removeClass("choice");
$("#fundstar ul li").eq(0).addClass("active")
keyObj['fundstar']='';
keyObj['starid']='';
}

}

//点击已选条件清除该条件
$("#searchResult li").each(function(){
$(this).click(function(){
var showId = $(this).children("b").attr("id");
$("#"+showId).parent().css("display","none");
clearCondition(showId);
})
});

//清空所有条件
$("#resetsearch").click(function(){
$("#typetext").parent().css("display","none");
clearCondition("typetext");
$("#companytext").parent().css("display","none");
clearCondition("companytext");
$("#startext").parent().css("display","none");
clearCondition("startext");
});

//条件超出两个显示省略号（光标放在上面显示完整条件）
function showText(value, id, titlename){
var arr = value.split(",");
if(arr.length<3){
$(id).text(titlename+value);
}else{
$(id).text(titlename+arr[0]+","+arr[1]+"···");
}
$(id).attr("title",value);
}

//保存条件
$("#savecondition").click( function(){
layer.confirm("是否保存搜索条件？", {
btn: ['确定','取消'] //按钮
}, function(index){
layer.prompt({
formType: 0,
value: '',
title: '请输入保存名称',
}, function(value, index, elem){
$.ajax({
url:'advancedsearch/saveCondition.do',
data:{
uid: uid,
moduleid: moduleid,
value: value,
keyObj: JSON.stringify(keyObj)
},
dataType: 'json',
success: function(data){
if(data.info == "success"){
layer.alert("保存成功！");
showSearchName();
}else{
layer.alert(data.info);
}
}
});
layer.close(index);
});
layer.close(index);
});
});

//保存的搜索显示
showSearchName();
function showSearchName(){
$("#savedsearch").text("");
$.ajax({
url:'advancedsearch/getSavedData.do',
data: {
uid: uid,
moduleid: moduleid
},
dataType: 'json',
success: function(data){
for(var i =0; i < data.data.length; i++){
var str = '<a class="savedcond">'+data.data[i].searchname+'<i class="layui-icon layui-icon-close-fill"></i></a>';
$("#savedsearch").append(str);
}
saveSearch();
delCondition();
}
});
}

//点击保存的搜索标签，回显相应的搜索条件
function saveSearch(){
$(".savedcond").click( function(){
$.ajax({
url:'advancedsearch/getSearchData.do',
data:{searchname: $(this).text()},
dataType: 'json',
success: function(data){
var searchdata = data.data[0].searchparams;
var typeid = searchdata['fundtypeid'].split(",");
var compid = searchdata['fundcompanyid'].split(",");
var starid = searchdata['starid'].split(",");
showCondition("#fundtype ul li", typeid, "typeid", "choice");
showCondition("#fundcompany a", compid, "compid", "choicecom");
showCondition("#fundstar ul li", starid, "starid", "choice");
keyObj = searchdata;
$("#typetext").parent().css("display","block");
$("#companytext").parent().css("display","block");
$("#startext").parent().css("display","block");
showText(keyObj.fundtype, "#typetext", "类型：");
showText(keyObj.fundcompany, "#companytext", "公司：");
showText(keyObj.fundstar, "#startext", "评级：");
}
});
});
}

//回显条件方法
function showCondition(dom, keyArr, attr, style){
$(dom).siblings().removeClass(style);
$(dom).each(function(){
for(var i = 0; i< keyArr.length; i++){
if($(this).attr(attr)==keyArr[i]){
$(dom).eq(0).removeClass("active");
$(this).addClass(style);
}
}
});
}

function toParent(){
return keyObj;
}

$("#searchOk").click(function(){
console.log(keyObj);
window.parent.reloadByAdvance();
});

</script>

</body>
</html>

Layui 实现一个高级筛选功能的更多相关文章

DataGridView如何实现列标头带数据筛选功能，就象Excel高级筛选功能一样
'近日有本论坛网友问:DataGridView如何实现列标头带数据筛选功能,就象Excel高级筛选功能一样 '今晚正好闲着没事,加之以前也没用到过这个需求,所以就写了个模拟功能,供各位坛友酌情参考. ...
一个高级的J2E工程师需要面对MySQL要有那些基本功夫呢<上>
1. MySQL的架构介绍1.1 MySQL简介: MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不 ...
织梦CMS实现多条件筛选功能
用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击, ...
【PHP开源产品】Ecshop的商品筛选功能实现分析之一
一.首先,说明一下为什么要对category.php文件进行分析. 原因如下: ①个人对商城类商品筛选功能的实现比较好奇: ②对商城中关于商品的数据表设计比较感兴趣.(该功能涉及到与数据库的交互,而且 ...
Sharepoint 高级筛选
先看看效果吧.............. 默认情况下:不做任何筛选. 添加一个筛选条件: 条件:如果是int类型那么可以有> < = 等如果是string的话那么就没有这么多条件,当然这 ...
【经验】angularjs 实现带查找筛选功能的select下拉框
一.背景对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...
SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表
SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表 SSRS 系列 - 使用带参数的 MDX 查询实现一个分组聚合功能的报表 2013-10-09 23:09 by BI Wor ...
Layui 写一个简单的后台页面
参考如下: 1.layui 官方文档 http://www.layui.com/doc/ 2.https://blog.csdn.net/huyanliang/article/details/7796 ...
element框架中表格的筛选功能使用说明（转载）
一.element框架中表格的筛选功能使用说明转载:https://blog.csdn.net/liangxhblog/article/details/80513030 在element ui 框架 ...

随机推荐

webpack使用babel
几个月没用webpack都忘了好多了. webpack构建前端,使用时除了entry/output,就是plugins和module.loaders,还有本地测试的devServer. npm ins ...
Paxos made simple 翻译尝试
[这篇论文我翻译下来,首先感觉还是不好懂,很多地方结论的得出不够清楚,需要读者自己思考其中的原因.要理解Paxos算法,个人建议先搜索下介绍算法的中文文章,大致了解下Paxos算法要做什么,然后就再读 ...
python3.x 基础三：装饰器
装饰器:本质是函数,用于装饰其他函数,在不改变其他函数的调用和代码的前提下,增加新功能原则: 1.不能修改被装饰函数的源代码 2.不能修改被装饰函数的调用方式 3.装饰函数对于被装饰函数透明参考如 ...
【git】git 常用命令(含删除文件)
Git常用操作命令收集: 1) 远程仓库相关命令检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远程仓库:$ git remote -v ...
J2EE项目分类管理中，提交表单数据是二进制形式时，对数据的修改失败。category赋值失败。
原因: 在条件判断时,对字符串的比较进行了错误比较. 解决方法: A==B,比较的是两个字符串是否是同一个对象. A.equal(B),比较的是两个字符串内容是否相同. 出现错误是用了第一种比较,应该 ...
远程快速安装mysql
远程服务器安装mysql数据库 https://www.cnblogs.com/renjidong/p/7047396.html 1.新开的云服务器,需要检测系统是否自带安装mysql # yum l ...
Istio Gateway网关
Istio Ingress Gateway Istio 服务网格中的网关使用网关为网格来管理入站和出站流量,可以让用户指定要进入或离开网格的流量. 使用网关为网格来管理入站和出站流量,可以让用户指定 ...
微软：正式发布针对 .NET Core的 Winform 设计器
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://devblogs.microsoft.com/dotnet/windows-for ...
[编辑排版]小技巧---markdown 转 richText
Markdown 使用markdown,可以方便地编辑富文本,VSCode自带了对markdown的支持,编辑完成后可点击右上角预览,实时查看效果. 在github上有给账号,就可以使用GithubP ...
CPU缓存学习及C6678缓存使用总结（知识归纳）
作者注: 1.本篇博客内容是本人在学习cpu缓存原理时进行的学习总结,参考了多处相关资源(书籍,视频,知乎回答等),参考出处标注在内容最后. 2.由于本篇内容的编辑工作在印象笔记完成,输出的PDF文件 ...

Layui 实现一个高级筛选功能

Layui 实现一个高级筛选功能的更多相关文章

随机推荐

热门专题