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 框架 ...

随机推荐

java基础序--列化和反序列化
一.什么是序列化和反序列化: 序列化:是指把java堆内存中的对象转换成字节(二进制流)的过程.也就是通过某种方式将java对象存储在磁盘内存中,这个过程称为序列化反序列化:是把磁盘上的对象转恢复成 ...
Spring + Struts + Hibernate 简单封装通用接口
1.BaseDao public interface BaseDao<T> { /** * 获取符合条件的记录数 * @param filter * @param sortName * @ ...
SourceTree 3.1.3 版本跳过bitbucket注册方法（亲测好用）
1.首先下载并安装好git程序. 2.接着下载并执行SourceTreeSetup-3.1.3.exe,会进入登录或注册bitbucket的界面,我只是想用软件,并不想去注册账号.怎么办?请往下看. ...
python操作MySQL之pymysql模块
import pymysql#pip install pymysql db=pymysql.connect(','day040') cursor=db.cursor() #创建游标 book_list ...
判断割是否唯一zoj2587
Unique Attack Time Limit: 5 Seconds Memory Limit: 32768 KB N supercomputers in the United State ...
还不会K8S吗？先从kubeadm开始吧
目录 1. 准备工作 1.1 机器准备 1.2 系统配置 1.2.1 主机名及域名解析 1.2.2 免密登录 1.2.3 配置yum源 1.2.4 安装必要依赖包 1.2.5 关闭防火墙.SELinu ...
Istio Gateway网关
Istio Ingress Gateway Istio 服务网格中的网关使用网关为网格来管理入站和出站流量,可以让用户指定要进入或离开网格的流量. 使用网关为网格来管理入站和出站流量,可以让用户指定 ...
flutter 环境出错后排查
莫名其妙地环境坏了 VSCode 终端里执行 flutter run 卡在 installing.. 模拟器上闪了一下,打不开, 应该是安装出错爆掉了 flutter doctor 检查一下: X A ...
前端基础进阶（十一）：详细图解jQuery对象，以及如何扩展jQuery插件
早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发 ...
关于Vue data对象赋值的问题
遇到这么一个问题: 把data中的某个对象赋值给一个变量,修改变量,会同时把data中的对象也一同修改,所以,这个赋值应该就是引用了地址,贴个代码 <script> export defa ...

Layui 实现一个高级筛选功能

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

随机推荐

热门专题