基于layui實(shí)現(xiàn)高級(jí)搜索（篩選）功能
更新時(shí)間：2019年07月26日 17:13:49 作者：Rjxxxx。
這篇文章主要為大家詳細(xì)介紹了基于layui實(shí)現(xiàn)高級(jí)搜索、篩選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
基于layui寫(xiě)的一個(gè)高級(jí)搜索（篩選）功能。
效果圖：
是一位萌新，所有寫(xiě)的有點(diǎn)兒亂。（放在上面，供新手們參考，也是自己做一個(gè)記錄。）
代碼如下：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<base href="<%=basePath%>" rel="external nofollow" />
<title></title>
<link rel="SHORTCUT ICON" href="<%=basePath%>favicon.ico" />
<!--
<link rel="stylesheet" type="text/css" href="fundstyle.css" />
-->
<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" />
<link rel="stylesheet" href="<%=basePath %>common/layuiadmin/layui/css/layui.css" type="text/css">
<link rel="stylesheet" href="<%=basePath %>common/jajxjs/css/jxlayui.css" type="text/css">
<script type="text/javascript" src="<%=basePath%>common/jquery-ui/js/jquery.min.js"></script>
<script src="<%=basePath %>common/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="<%=basePath%>common/jajxjs/jxpubjs.js"></script>
<%
String secucode = request.getParameter("secucode");
secucode = secucode == null ? "" : secucode;
out.print("<script language='javascript'>var secucode='" + secucode
+ "';</script>");
%>
<style type="text/css">
.last{
border-right:none !important;
}
.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>
<div id="search-content" class="layui-colla-content layui-show">
<div style="width:86%;border-right:1px solid #e6e6e6;float:left;">
<div id="fundtype" class="search-condition">
<span class="search-name">基金類(lèi)型：</span>
<ul>
<li class="active">不限</li>
<li typeid="0">貨幣型</li>
<li typeid="1">純債型</li>
<li typeid="2">一級(jí)債</li>
<li typeid="3">二級(jí)債</li>
<li typeid="4">股票型</li>
<li typeid="5">混合型</li>
<li typeid="6">封閉式</li>
<li typeid="7">指數(shù)型</li>
<li typeid="8">QDII</li>
</ul>
<div class="clearfloat"></div>
</div>
<div id="fundcompany" class="search-condition">
<span class="search-name">基金公司：</span>
<div class="layui-tab layui-tab-card" style="width:90%;margin-left:90px;position:relative;">
<ul id="fundcomptitle" class="layui-tab-title">
<li class="layui-this" style="margin-left:100px;">熱門(mén)</li>
</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">嘉實(shí)</a>
<a class="companyname" compid="80000229">易方達(dá)</a>
<a class="companyname" compid="80000220">南方</a>
<a class="companyname" compid="80048752">中銀</a>
<a class="companyname" compid="80000248">廣發(fā)</a>
<a class="companyname" compid="80064225">工銀瑞信</a>
<a class="companyname" compid="80000226">博時(shí)</a>
<a class="companyname" compid="80000228">華安</a>
<a class="companyname last" compid="80053708">匯添富</a>
</div>
</div>
</div>
</div>
<div id="fundyeji" class="search-condition">
<span class="search-name">基金業(yè)績(jī)：</span>
<div class="layui-tab layui-tab-card" lay-filter="jijinyeji" style="width:90%;margin-left:90px;position: relative;">
<ul class="layui-tab-title">
<li fundsign="yeji_1z" style="margin-left:100px;">近1周</li>
<li fundsign="yeji_1y">近1月</li>
<li fundsign="yeji_3y">近3月</li>
<li fundsign="yeji_6y">近6月</li>
<li fundsign="yeji_jin">今年以來(lái)</li>
<li fundsign="yeji_1n">近1年</li>
<li fundsign="yeji_2n">近2年</li>
<li fundsign="yeji_3n">近3年</li>
<li fundsign="yeji_zi">自定義</li>
</ul>
<a yejiid="0" class="layui-btn layui-btn-primary active fundyeji" style="position:absolute;top:0;left:0;width:95px;height:40px;">不限</a>
<div class="layui-tab-content fundyeji-content">
<div class="layui-tab-item">
<a class="choicecom">不限</a>
<a>前10名</a>
<a>前20名</a>
<a>前50名</a>
<a>前100名</a>
</div>
<div class="layui-tab-item">
<a class="choicecom">不限</a>
<a>前10名</a>
<a>前20名</a>
<a>前50名</a>
<a>前100名</a>
</div>
<div class="layui-tab-item">
<a class="choicecom">不限</a>
<a>前10名</a>
<a>前20名</a>
<a>前50名</a>
<a>前100名</a>
</div>
<div class="layui-tab-item">
<a class="choicecom">不限</a>
<a>前10名</a>
<a>前20名</a>
<a>前50名</a>
<a>前100名</a>
</div>
<div class="layui-tab-item">
<a class="choicecom">不限</a>
<a>前10名</a>
<a>前20名</a>
<a>前50名</a>
<a>前100名</a>
</div>
<div class="layui-tab-item">
<a class="choicecom">不限</a>
<a>前10名</a>
<a>前20名</a>
<a>前50名</a>
<a>前100名</a>
</div>
<div class="layui-tab-item">
<a class="choicecom">不限</a>
<a>前10名</a>
<a>前20名</a>
<a>前50名</a>
<a>前100名</a>
</div>
<div class="layui-tab-item">
<a class="choicecom">不限</a>
<a>前10名</a>
<a>前20名</a>
<a>前50名</a>
<a>前100名</a>
</div>
<div class="layui-tab-item layui-form">
<div class="layui-form-item">
<label class="layui-form-label">日期</label>
<div class="layui-input-inline" style="width:90px;">
<input type="text" name="title" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">至</label>
<div class="layui-input-inline" style="width:90px;">
<input type="text" name="title" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label"> </label>
<label class="layui-form-label">收益率：</label>
<div class="layui-input-inline" style="width:90px;">
<input type="text" name="title" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">至</label>
<div class="layui-input-inline" style="width:90px;">
<input type="text" name="title" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label"></label>
<button class="layui-btn">確定</button>
</div>
</div>
</div>
</div>
</div>
<div id="fundstar" class="search-condition">
<span class="search-name">基金評(píng)級(jí)：</span>
<ul>
<li class="active">不限</li>
<li starid="1">★</li>
<li starid="2">★★</li>
<li starid="3">★★★</li>
<li starid="4">★★★★</li>
<li starid="5">★★★★★</li>
</ul>
<div class="clearfloat"></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 fundyeji(fundsign,textname){
$("#fundyeji .layui-show a").click(function(){
var isChoose = $(this).hasClass("choicecom");
console.log(isChoose);
console.log($(this).index());
if($(this).index() !== 0){
if(!isChoose){
$(this).siblings().removeClass("choicecom");
$(".fundyeji").removeClass("active");
$(this).addClass("choicecom");
var arr =[];
arr.push($(this).text());
keyObj["'"+fundsign+"'"] = arr;
$("#"+fundsign).parent().css("display","block");
$("#"+fundsign).text(textname+keyObj["'"+fundsign+"'"]);
$("#"+fundsign).attr("title",keyObj["'"+fundsign+"'"]);
}else{
$(this).removeClass("choicecom");
$(this).parent().find("a").eq(0).addClass("choicecom");
$(".fundyeji").addClass("active");
keyObj["'"+fundsign+"'"] = '';
$("#"+fundsign).parent().css("display","none");
}
}else{
$(this).siblings().removeClass("choicecom");
$(this).addClass("choicecom");
keyObj["'"+fundsign+"'"] = '';
$("#"+fundsign).parent().css("display","none");
}
});
}
var parentdata = window.parent.toIframe();
var pd = parentdata.split("-");
var uid = pd[0];
var moduleid = pd[1];
//收起和展開(kāi)
function foleType(){
if($("#search-content").hasClass("layui-show")){
$("#btn_fold").text(" 展開(kāi)");
$("#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(){
//選擇基金類(lèi)型
$("#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", "類(lèi)型：");
}
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");
}
var hasActive = null;
hasActive = $("#fundcompany a.active").length>0;
var arr =[];
var arr2 = [];
if(hasActive){
keyObj['fundcompany'] = '';
keyObj['fundcompanyid']='';
$("#companytext").parent().css("display","none");
}else{
$("#companytext").parent().css("display","block");
$("#fundcompany a.choicecom").each(function(index,item){
arr.push($(item).text());
arr2.push($(item).attr("compid"));
});
keyObj['fundcompany'] = arr;
keyObj['fundcompany'] = arr.join(',');
keyObj['fundcompanyid'] = arr2;
keyObj['fundcompanyid'] = arr2.join(',');
}
showText(keyObj.fundcompany, "#companytext", "公司：");
}else{
$("#fundcompany a").eq(0).addClass("active")
$("#fundcompany a").removeClass("choicecom");
keyObj['fundcompany'] = '';
keyObj['fundcompanyid']='';
$("#companytext").parent().css("display","none");
}
});
}
//選擇基金評(píng)級(jí)
$("#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", "評(píng)級(jí)：");
}
else{
$(this).addClass("active");
$(this).siblings().removeClass("choice");
keyObj['fundstar'] = '';
keyObj['starid']='';
$("#startext").parent().css("display","none");
}
});
//從數(shù)據(jù)庫(kù)獲取所有公司
$.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數(shù)組的長(zhǎng)度
function getJsonLength(jsonData){
var jsonLength = 0;
for(var item in jsonData){
jsonLength++;
}
return jsonLength;
}
function data_letter_sort (data, field) {
var letter_reg = /^[A-Z]$/;
var list = new Array();
for (var i = 0; i < data.length; i++) {
// 添加 # 分組，用來(lái) 存放 首字母不能 轉(zhuǎn)為 大寫(xiě)英文的 數(shù)據(jù)
list[''] = new Array();
// 首字母 轉(zhuǎn) 大寫(xiě)英文
letter = (data[i][field]).substr(0, 1).toUpperCase();
// 是否 大寫(xiě) 英文 字母
if (!letter_reg.test(letter)) {
letter = '#';
}
// 創(chuàng)建 字母 分組
if (!(letter in list)) {
list[letter] = new Array();
}
// 字母 分組 添加 數(shù)據(jù)
list[letter].push(data[i]);
}
// 轉(zhuǎn)換 格式 進(jìn)行 排序；
var resault = new Array();
for (var key in list) {
resault.push({
letter: key,
list: list[key]
});
}
resault.sort(function (x, y) {
return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
});
// # 號(hào)分組 放最后
var last_arr = resault[0];
resault.splice(0, 1);
resault.push(last_arr);
// 轉(zhuǎn)換 數(shù)據(jù) 格式
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']='';
}
}
//點(diǎn)擊已選條件清除該條件
$("#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");
});
//條件超出兩個(gè)顯示省略號(hào)（光標(biāo)放在上面顯示完整條件 ）
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: '請(qǐng)輸入保存名稱(chēng)',
}, 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();
}
});
}
//點(diǎn)擊保存的搜索標(biāo)簽，回顯相應(yīng)的搜索條件
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", "類(lèi)型：");
showText(keyObj.fundcompany, "#companytext", "公司：");
showText(keyObj.fundstar, "#startext", "評(píng)級(jí)：");
}
});
});
}
//回顯條件方法
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 delCondition(){
$(".savedcond i").click( function(event){
event.stopPropagation();
var delname = $(this).parent().text();
$.ajax({
url: 'advancedsearch/delCondition.do',
data: {
uid: uid,
moduleid: moduleid,
value: delname
},
dataType: 'json',
success: function(data){
if(data.info == 'success'){
layer.alert("刪除成功！");
}else{
layer.alert(data.info);
}
showSearchName();
}
});
});
}
function toParent(){
return keyObj;
}
$("#searchOk").click(function(){
console.log(keyObj);
window.parent.reloadByAdvance();
});
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法
- 解決layui數(shù)據(jù)表格table的橫向滾動(dòng)條顯示問(wèn)題
- layui 表格的屬性的顯示轉(zhuǎn)換方法
- Layui實(shí)現(xiàn)數(shù)據(jù)表格默認(rèn)全部顯示(不要分頁(yè))
- 解決Layui數(shù)據(jù)表格顯示無(wú)數(shù)據(jù)提示的問(wèn)題
- layui 表格操作列按鈕動(dòng)態(tài)顯示的實(shí)現(xiàn)方法
- layui 實(shí)現(xiàn)表格某一列顯示圖標(biāo)
- 解決LayUI數(shù)據(jù)表格復(fù)選框不居中顯示的問(wèn)題
- layui實(shí)現(xiàn)數(shù)據(jù)表格點(diǎn)擊搜索功能
- layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能(搜索功能）
- Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實(shí)例
- layui實(shí)現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能示例
相關(guān)文章
JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
本文介紹一個(gè)簡(jiǎn)單可行的辦法，來(lái)做基于gulp構(gòu)建的中小型項(xiàng)目中的seajs合并壓縮，感興趣的朋友一起看看詳情吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
uniapp自定義多列瀑布流組件項(xiàng)目實(shí)戰(zhàn)總結(jié)
這篇文章主要為大家介紹了uniapp自定義多列瀑布流組件實(shí)戰(zhàn)總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
js 調(diào)用百度地圖api并在地圖上進(jìn)行打點(diǎn)添加標(biāo)注
上邊有一個(gè)標(biāo)題，下邊分成兩塊，左邊是地圖。并且地圖上有兩個(gè)點(diǎn)，點(diǎn)擊兩個(gè)點(diǎn)有相應(yīng)的提示信息，具體實(shí)現(xiàn)如下2014-05-05
類(lèi)似于JQuery的這樣js庫(kù)已經(jīng)實(shí)現(xiàn)了很好的數(shù)據(jù)綁定機(jī)制的封裝效果，但只知其然，不知其所以然還有會(huì)有種蒙在鼓里的感覺(jué)，親自去分析一下具體的實(shí)現(xiàn)，會(huì)有一種豁然開(kāi)朗的感覺(jué)2014-06-06
JavaScript無(wú)縫滾動(dòng)效果的實(shí)例代碼
本文給大家分享一段實(shí)例代碼有關(guān)js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-03-03
js實(shí)現(xiàn)樹(shù)形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例
這篇文章主要介紹了js實(shí)現(xiàn)樹(shù)形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
本文給大家介紹了JavaScript中的類(lèi)型檢查的一些知識(shí)點(diǎn),整理的非常詳細(xì),推薦給大家,希望對(duì)大家學(xué)習(xí)JavaScript能夠所幫助2020-02-02
Extjs表單輸入框異步校驗(yàn)的插件實(shí)現(xiàn)方法
這篇文章主要介紹了Extjs表單輸入框異步校驗(yàn)的插件實(shí)現(xiàn)方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03