Jquery+spring写搜索页面

最新推荐文章于 2021-05-20 21:56:29 发布

Msx云南人

最新推荐文章于 2021-05-20 21:56:29 发布

阅读量201

点赞数

分类专栏： Jquery SSM

本文链接：https://blog.csdn.net/qq_42402783/article/details/89946256

版权

Jquery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

SSM

3 篇文章 0 订阅

订阅专栏

1，交互页面过滤器

package com.wisesoft.portal.filter;

import lombok.Data;

import java.util.ArrayList;
import java.util.List;

@Data
public class EnterpriseFilter {

    private String keywords;

    public static final String ORDER_TYPE_SYNTHETICAL = "synthetical";
    public static final String ORDER_TYPE_PAGEVIEW = "pageview";
    public static final String ORDER_TYPE_NEWEST = "newest";
    public static final String ORDER_TYPE_AREA = "area";

    private int limit = 12;

    private int curr = 1;

    private List<String> economics;

    private List<String> citys;

    private List<String> enterpriseTypes;

    private List<String> sysTrades;

    private List<String> labels;

    private Double leftArea;

    private Double rightArea;

    private String orderType = ORDER_TYPE_SYNTHETICAL;

    private String orderByType = "asc";

    public List<EchoData> convertEchoData() {
        List<EchoData> echoDatas = new ArrayList<>(4);
        echoDatas.add(new EchoData("economics", economics, false));
        echoDatas.add(new EchoData("citys", citys, false));
        echoDatas.add(new EchoData("labels", labels, true));
        echoDatas.add(new EchoData("enterpriseTypes", enterpriseTypes, true));
        echoDatas.add(new EchoData("sysTrades", sysTrades, true));
        return echoDatas;
    }
}

2，Controller代码

    @ApiOperation(value = "列表页面")
    @RequestMapping(value = "/index")
    public String enterpriseList(Model model, @Validated EnterpriseFilter filter, BindingResult bindingResult) {
        Pager pager = new Pager();
        pager.setPageSize(filter.getLimit());
        pager.setPageNumber(filter.getCurr());
        model.addAllAttributes(enterpriseInfoService.selectEnterpriseVO(pager,filter));
        return "portal/enterprise/index";
    }

3，Service代码

@Override
    public Map<String, ?> selectEnterpriseVO(Pager pager, EnterpriseFilter filter) {
        Map<String, Object> attributes = new HashMap<>();
        // 区域分类
        List<RegionVO> regionVOList = economicZoneService.getRegionVOList();
        attributes.put("regionVOList", regionVOList);
        // 行业分类
        List<KV<String, String>> sysTradeKv = tradeService.getSysTradeKv();
        attributes.put("sysTradeKv", sysTradeKv);
        // 企业标签
        List<KV<String, String>> enterpriseLabelKv = SysCodeUtils.getSysCodeList(SysCodeConstants.ENTERPRISE_LABEL);
        attributes.put("enterpriseLabelKv", enterpriseLabelKv);
        Map<String, String> enterpriseLabelMap = ApplicationUtils.kvsToMap(enterpriseLabelKv);
        //企业分类
        List<KV<String, String>> enterpriseTypeKv = SysCodeUtils.getSysCodeList(SysCodeConstants.ENP_TYPE);
        attributes.put("enterpriseTypeKv", enterpriseTypeKv);

        StringBuffer sql = new StringBuffer();
        List<Object> params = new ArrayList<>();
        List<EnterpriseVO> enterpriseVOList = new ArrayList<>();
        sql.append("SELECT info.enp_id enpId,basic.enp_name enpName,info.label labels,info.cover_img coverImg,investment.plan_investment planInvestment");
        sql.append(" from pml_enterprise_info info JOIN pml_enterprise_basic basic on info.enp_id=basic.id ");
        sql.append(" LEFT JOIN (SELECT a.* FROM pml_enterprise_investment a JOIN (SELECT enp_id,user_id, ");
        sql.append(" max(version) as version FROM pml_enterprise_investment group by enp_id,user_id) as ");
        sql.append(" investment_tb ON a.enp_id=investment_tb.enp_id AND a.user_id=investment_tb.user_id ");
        sql.append(" and a.version = investment_tb.version) investment ON info.enp_id = investment.enp_id ");
        sql.append(" WHERE info.audit_status = ? and info.publish_status = ? and basic.audit_status = ? and basic.auth_status = ?");
        params.add(CommonConstants.AuditStatus.AUDIT_PASS);
        params.add(CommonConstants.STATUS_TAG_YES);
        params.add(CommonConstants.AuditStatus.AUDIT_PASS);
        params.add(CommonConstants.AuthStatus.AUTHENTICATED);
        // 区域分类
        List<String> citys = filter.getCitys();
        if (citys != null && !citys.isEmpty()) {
            sql.append(" and basic.register_city in ('").append(StringUtils.join(citys, "','")).append("') ");
        } else {
            List<String> economics = filter.getEconomics();
            if (economics != null && !economics.isEmpty()) {
                sql.append(" and basic.register_city in (select city_code from pml_sys_city_info where economic_zone in ('")
                        .append(StringUtils.join(economics, "','")).append("')) ");
            }
        }
        // 企业行业
        List<String> trades = filter.getSysTrades();
        if (trades != null && !trades.isEmpty()) {
            sql.append(" and basic.id in (select enp_id from pml_enterprise_trade where trade_id in ('")
                    .append(StringUtils.join(trades, "','")).append("')) ");
        }
        //企业类型筛选
        List<String> enterpriseTypes = filter.getEnterpriseTypes();
        if(enterpriseTypes != null && !enterpriseTypes.isEmpty()){
            sql.append(" and basic.enp_type in ('").append(StringUtils.join(enterpriseTypes, "','")).append("') ");
        }
        // 企业标签
        List<String> labels = filter.getLabels();
        if (labels != null && !labels.isEmpty()) {
            sql.append(" and info.id in (select biz_id from pml_biz_multival where multi_value in ('")
                    .append(StringUtils.join(labels, "','")).append("') and multi_field = ? ) ");
            params.add(MultiFieldConstants.ENTERPRISE_LABEL);
        }
        // 面积筛选
        Double leftArea = filter.getLeftArea();
        if (leftArea != null) {
            sql.append(" and basic.present_total_area  >= ? ");
            params.add(leftArea);
        }
        Double rightArea = filter.getRightArea();
        if (rightArea != null) {
            sql.append(" and basic.present_total_area <= ? ");
            params.add(rightArea);
        }
        //关键字搜索
        String keywords = filter.getKeywords();
        if(keywords != null){
            sql.append(" and basic.enp_name like ?");
            params.add("%"+keywords+"%");
        }
        // 排序
        if (EnterpriseFilter.ORDER_TYPE_SYNTHETICAL.equals(filter.getOrderType())) {
            sql.append(" order by basic.register_city asc ");
        } else if (EnterpriseFilter.ORDER_TYPE_NEWEST.equals(filter.getOrderType())) {
            sql.append(" order by basic.modify_time desc ");
        } else if (EnterpriseFilter.ORDER_TYPE_AREA.equals(filter.getOrderType())) {
            if ("asc".equalsIgnoreCase(filter.getOrderByType())) {
                sql.append(" order by basic.present_employee_scale asc ");
            } else {
                sql.append(" order by basic.present_employee_scale desc ");
            }
        }
        pager = baseDao.findByMapPager(pager, sql.toString(), params.toArray());
        List<Object> list = pager.getList();
        List<String> enpIds = new ArrayList<>();
        list.forEach(m -> {
            Map<String, String> map = (Map<String, String>) m;
            String enpId = MapUtils.getString(map, "enpId");
            enpIds.add(enpId);
        });
        Map<String, List<String>> enterpriseTradeNameMap = enterpriseTradeService.getEnterpriseTradeName(enpIds);
        if (!list.isEmpty())
            list.forEach(m -> {
                Map<String, String> map = (Map<String, String>) m;
                EnterpriseVO enterpriseVO = new EnterpriseVO();
                String enpId = MapUtils.getString(map, "enpId");
                enterpriseVO.setEnpId(enpId);
                enterpriseVO.setEnpName(MapUtils.getString(map, "enpName"));
                List<String> label =
                        bizMultivalService.getMultiValueNames(Arrays.asList(StringUtils.split(MapUtils.getString(map, "labels"), CommonConstants.SEPARATOR)), enterpriseLabelMap);
                enterpriseVO.setLabels(label);
                enterpriseVO.setPlanInvestment(new BigDecimal(MapUtils.getString(map, "planInvestment")));
                enterpriseVO.setCoverImg(MapUtils.getString(map, "coverImg"));
                enterpriseVO.setTrades(StringUtils.join(enterpriseTradeNameMap.get(enpId), CommonConstants.SEPARATOR));
                enterpriseVOList.add(enterpriseVO);
            });
        pager.setList(enterpriseVOList);
        attributes.put("pager", pager);
        attributes.put("filter", filter);
        attributes.put("echoData", JsonUtils.objectToString(filter.convertEchoData()));
        return attributes;
    }

4，前端业务代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title>园区二级列表</title>
    <link rel="stylesheet" type="text/css" href="${base}/static/webv2/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/static/webv2/layui/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/static/webv2/layui/css/style.css"/>
</head>
<body>
<div class="f-min-h-full second-page">
    <jsp:include page="/WEB-INF/jsp/portal/common/common_header_enp.jsp"></jsp:include>
    <div class="enterpaise-selects">
        <div class="g-box1200">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">按区域查找 <i class="gyyq-iconfont">&#xe600;</i></li>
                    <li><a href="${base}/portal/enterprise/map.dhtml">按地图查找</a></li>
                </ul>
                <div class="layui-tab-content">
                    <button class="layui-btn filt-btn hide-select">展开筛选<i class="gyyq-iconfont">&#xe68e;</i></button>
                    <div class="area-select-box">
                        <div class="has_chosen f-clear">
                            <span class="title">您已经选择：</span>
                            <div class="items-box"></div>
                        </div>
                        <div class="modules_level_box">
                            <div class="modules_select modules_select1" selectindex="economics">
                                <span class="title">区域分类：</span>
                                <div class="radio_select">
                                    <div class="items_box">
                                        <span class="item" data-id="">全部</span>
                                        <c:forEach items="${regionVOList}" var="item">
                                            <span class="item <c:if test="${fn:contains(filter.economics, item.id)}">active</c:if>"
                                                  data-id="${item.id}">${item.name}</span>
                                        </c:forEach>
                                    </div>
                                    <div class="btns_box">
                                        <button class="layui-btn more-btn">更多</button>
                                        <button class="layui-btn multi-btn">多选</button>
                                    </div>
                                </div>
                                <div class="multi_select">
                                    <div class="items_box f-clear">
                                        <c:forEach items="${regionVOList}" var="item">
                                            <div class="item">
                                                <input type="checkbox" id="${item.id}" data-id="${item.id}"/><label
                                                    for="${item.id}">${item.name}</label>
                                            </div>
                                        </c:forEach>
                                    </div>
                                    <div class="btns_box">
                                        <button class="layui-btn sure-btn">确定</button>
                                        <button class="layui-btn cancel-btn">取消</button>
                                    </div>
                                </div>
                            </div>
                            <div class="modules_select modules_select2" selectindex="citys" style="display: block;">
                                <span class="title">区域分类：</span>
                                <div class="radio_select">
                                    <div class="items_box">
                                        <c:forEach items="${regionVOList}" var="item">
                                            <c:forEach items="${item.cities}" var="city">
                                                <span class="item <c:if test="${fn:contains(filter.citys, city.id)}">active</c:if>"
                                                      data-id="${city.id}"
                                                      data-economic="${item.id}">${city.name}</span>
                                            </c:forEach>
                                        </c:forEach>
                                    </div>
                                    <div class="btns_box">
                                        <button class="layui-btn more-btn">更多</button>
                                        <button class="layui-btn multi-btn">多选</button>
                                    </div>
                                </div>
                                <div class="multi_select">
                                    <div class="items_box f-clear">
                                        <c:forEach items="${regionVOList}" var="item">
                                            <c:forEach items="${item.cities}" var="city">
                                                <div class="item">
                                                    <input type="checkbox" id="${city.id}"
                                                           data-economic="${item.id}" data-id="${city.id}"/>
                                                    <label for="${city.id}">${city.name}</label>
                                                </div>
                                            </c:forEach>
                                        </c:forEach>
                                    </div>
                                    <div class="btns_box">
                                        <button class="layui-btn sure-btn">确定</button>
                                        <button class="layui-btn cancel-btn">取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modules_box">
                            <div class="modules_select" selectindex="enterpriseTypes">
                                <span class="title">企业分类：</span>
                                <div class="radio_select">
                                    <div class="items_box">
                                            <c:forEach items="${enterpriseTypeKv}" var="item">
                                            <span class="item <c:if test="${fn:contains(filter.enterpriseTypes, item.key)}">active</c:if>"
                                                  data-id="${item.key}">${item.value}</span>
                                            </c:forEach>
                                    </div>
                                    <div class="btns_box">
                                        <button class="layui-btn more-btn">更多</button>
                                        <button class="layui-btn multi-btn">多选</button>
                                    </div>
                                </div>
                                <div class="multi_select">
                                    <div class="items_box f-clear">
                                          <c:forEach items="${enterpriseTypeKv}" var="item">
                                           <div class="item">
                                               <input type="checkbox" id="${item.key}" data-id="${item.key}"/><label
                                                   for="${item.key}">${item.value}</label>
                                           </div>
                                           </c:forEach>
                                    </div>
                                    <div class="btns_box">
                                        <button class="layui-btn sure-btn">确定</button>
                                        <button class="layui-btn cancel-btn">取消</button>
                                    </div>
                                </div>
                            </div>
                            <div class="modules_select" selectindex="sysTrades">
                                <span class="title">行业分类：</span>
                                <div class="radio_select">
                                    <div class="items_box">
                                        <c:forEach items="${sysTradeKv}" var="item">
                                            <span class="item <c:if test="${fn:contains(filter.sysTrades, item.key)}">active</c:if>"
                                                  data-id="${item.key}">${item.value}</span>
                                        </c:forEach>
                                    </div>
                                    <div class="btns_box">f
                                        <button class="layui-btn more-btn">更多</button>
                                        <button class="layui-btn multi-btn">多选</button>
                                    </div>
                                </div>
                                <div class="multi_select">
                                    <div class="items_box f-clear">
                                        <c:forEach items="${sysTradeKv}" var="item">
                                            <div class="item">
                                                <input type="checkbox" id="${item.key}" data-id="${item.key}"/><label
                                                    for="${item.key}">${item.value}</label>
                                            </div>
                                        </c:forEach>
                                    </div>
                                    <div class="btns_box">
                                        <button class="layui-btn sure-btn">确定</button>
                                        <button class="layui-btn cancel-btn">取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modules_box">
                            <div class="modules_select" selectindex="labels">
                                <span class="title">企业标签：</span>
                                <div class="radio_select">
                                    <div class="items_box">
                                        <c:forEach items="${enterpriseLabelKv}" var="item">
                                            <span class="item <c:if test="${fn:contains(filter.labels, item.key)}">active</c:if>"
                                                  data-id="${item.key}">${item.value}</span>
                                        </c:forEach>
                                    </div>
                                    <div class="btns_box">
                                        <button class="layui-btn more-btn">更多</button>
                                        <button class="layui-btn multi-btn">多选</button>
                                    </div>
                                </div>
                                <div class="multi_select">
                                    <div class="items_box f-clear">
                                        <c:forEach items="${enterpriseLabelKv}" var="item">
                                             <div class="item">
                                                 <input type="checkbox" id="${item.key}" data-id="${item.key}"/><label
                                                     for="${item.key}">${item.value}</label>
                                             </div>
                                         </c:forEach>
                                    </div>
                                    <div class="btns_box">
                                        <button class="layui-btn sure-btn">确定</button>
                                        <button class="layui-btn cancel-btn">取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sort-row layui-form-item">
                        <div class="sort-items-box f-clear">
                            <div class="sort-item <c:if test="${filter.orderType == 'synthetical'}">active</c:if>"
                                 data-type="synthetical">综合<i class="gyyq-iconfont">&#xe612;</i></div>
                            <%--<div class="sort-item <c:if test="${filter.orderType == 'pageview'}">active</c:if>"--%>
                            <%--data-type="pageview">浏览量<i class="gyyq-iconfont">&#xe612;</i></div>--%>
                            <div class="sort-item <c:if test="${filter.orderType == 'newest'}">active</c:if>"
                                 data-type="newest">最新<i class="gyyq-iconfont">&#xe612;</i></div>
                            <div class="sort-item rent-item <c:if test="${filter.orderType == 'area'}">active</c:if> <c:if test="${filter.orderByType == 'asc'}">asc</c:if>"
                                 data-type="area">面积
                                <div class="rent-icon"><i class="gyyq-iconfont up">&#xeb5b;</i><i
                                        class="gyyq-iconfont down">&#xe613;</i></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="f-clear rent-range">
                                <div class="layui-input-inline">
                                    <input type="text" name="leftArea" placeholder="亩" autocomplete="off"
                                           class="layui-input" value="${filter.leftArea}">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline">
                                    <input type="text" name="rightArea" placeholder="亩" autocomplete="off"
                                           class="layui-input" value="${filter.rightArea}">
                                </div>
                            </div>
                            <!--<div style="width:135px;height:40px;background:#000;"></div>-->
                            <div class="rent-bottom-btns f-clear">
                                <button class="layui-btn layui-btn-nobg" id="clearBtn">清空</button>
                                <button class="layui-btn layui-btn-gyyq" id="confirmBtn">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="second-body">
        <div class="g-box1200">
            <div class="layui-row layui-col-space20">
                <c:forEach items="${pager.list}" var="item">
                    <div class="layui-col-3">
                        <div class="enterpaise-item">
                            <a href="${base}/portal/enterprise/detail.dhtml?id=${item.enpId}" class="item-con">
                                <div class="item-line1">
                                    <img class="company-img" src="../image/img22.png" alt="" />
                                    <p class="companytit">${item.enpName}</p>
                                    <p class="invescale">拟投资规模：<span>${item.planInvestment}</span>万元</p>
                                </div>
                                <div class="item-line2"><span>意向经济区：</span>川南经济区</div>
                                <div class="item-line2"><span>所属行业：</span>${item.trades} </div>
                                <div class="item-labels f-clear">
                                    <c:forEach items="${item.labels}" var="label">
                                        <span>${label}</span>
                                    </c:forEach>
                                </div>
                            </a>
                            <div class="item-foot layui-row">
                                <div class="layui-col-4">
                                    <div class="foot-btn foot-left"><i class="gyyq-iconfont">&#xe64c;</i>加入对比</div>
                                </div>
                                <div class="layui-col-4">
                                    <div class="foot-btn foot-center"><i class="gyyq-iconfont">&#xe73e;</i>收藏</div>
                                </div>
                                <div class="layui-col-4">
                                    <div class="foot-btn foot-right"><i class="gyyq-iconfont">&#xe606;</i>分享</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </c:forEach>
                <div class="layui-col-12">
                    <div class="f-info-c" id="laypage1"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="right-fixed-menu">
        <div class="menu-list-box">
            <ul class="menu-list">
                <li><i class="gyyq-iconfont">&#xe67e;</i><a href="" class="left-btn">个人中心</a></li>
                <li><i class="gyyq-iconfont">&#xe64c;</i><span class="left-btn">加入对比</span></li>
                <li><i class="gyyq-iconfont">&#xe73e;</i></li>
                <li><i class="gyyq-iconfont">&#xe606;</i></li>
                <li><i class="gyyq-iconfont">&#xe66d;</i></li>
            </ul>
        </div>
    </div>
    <jsp:include page="/WEB-INF/jsp/portal/common/common_consulting.jsp"></jsp:include>
    <jsp:include page="/WEB-INF/jsp/portal/common/common_footer2.jsp"></jsp:include>
</div>
</body>
<script type="text/javascript" src="${base}/static/webv2/layui/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/static/webv2/layui/layui.js"></script>
<script>
    layui.use(['jquery', 'form', 'laypage'], function () {
        var $ = layui.jquery, form = layui.form, laypage = layui.laypage;
        $(".menu-list li").mouseover(function () {
            $(this).addClass('active');
        }).mouseout(function () {
            $(this).removeClass('active');
        });

        //头像信息显示/隐藏交互
        $('.user-info').on('click', function () {
            event.stopPropagation();
            $('.user-info .user-list').show(500);
        });
        $(document).on('click', function () {
            $('.user-info .user-list').hide(500);
        });

        //分页
        laypage.render({
            elem: 'laypage1',
            theme: '#2181c7',
            curr: parseInt('${pager.pageNumber}'),
            count: parseInt('${pager.totalCount}'),
            jump: function (obj, first) {
                if (!first) {
                    dataFilter(obj.curr);
                }
            }
        });

        //筛选展开与收起操作
        $('.filt-btn').on('click', function () {
            $('.area-select-box').toggle();
            if ($(this).hasClass('hide-select')) {
                $(this).html('收起筛选<i class="gyyq-iconfont">&#xeb5a;</i>').removeClass('hide-select');
            } else {
                $(this).html('展开筛选<i class="gyyq-iconfont">&#xe68e;</i>').addClass('hide-select');
            }
        });

        //以下为一级的筛选操作
        //多选确认操作
        $('.modules_box .sure-btn').on('click', function () {
            var $selected = $('<span class="item"></span>');
            $selected.attr('selectindex', $(this).parents('.modules_select').attr('selectindex'));
            var texts = [], values = [];
            $(this).parents('.multi_select').find('.items_box .item').each(function (index, item) {
                if ($(item).find('input').prop('checked') == true) {
                    texts.push($(item).find('label').text());
                    values.push($(item).find('input').attr('data-id'));
                    $(item).find('input').prop('checked', false);
                }
            });
            $selected.text($(this).parents('.modules_select').find('.title').text() + texts.join('、'));
            $selected.attr('data-id', values.join(','));
            $('.has_chosen .items-box').append($selected);
            dataFilter();
            $(this).parents('.modules_select').removeClass('multi');
            $(this).parents('.modules_select').hide();
        });
        //单击选中操作
        $('.modules_box .radio_select .item').on('click', function () {
            var dataId = $(this).attr('data-id');
            var $selected = $('<span class="item"></span>');
            $selected.attr('selectindex', $(this).parents('.modules_select').attr('selectindex'));
            $selected.text($(this).parents('.modules_select').find('.title').text() + $(this).text());
            $selected.attr('data-id', dataId);
            $('.has_chosen .items-box').append($selected);
            dataFilter();
            $(this).parents('.radio_select').removeClass('more_box');
            $(this).parents('.modules_select').hide();
        });


        //以下为多级的筛选操作
        //多选确认操作
        $('.modules_level_box .sure-btn').on('click', function () {
            var selectindex = $(this).parents('.modules_select').attr('selectindex');
            var $selected = $('<span class="item"></span>');
            $selected.attr('selectindex', selectindex);
            var texts = [], values = [];
            var $modulesSelect = $('div.modules_select[selectindex="' + selectindex + '"]');
            $(this).parents('.multi_select').find('.items_box .item').each(function (index, item) {
                if ($(item).find('input').prop('checked') == true) {
                    var dataId = $(item).find('input').attr('data-id');
                    texts.push($(item).find('label').text());
                    values.push(dataId);
                    $(item).find('input').prop('checked', false);
                    $modulesSelect.find('span.item[data-id="' + dataId + '"]').addClass('active');
                }
            });
            $selected.text($(this).parents('.modules_select').find('.title').text() + texts.join('、'));
            $selected.attr('data-id', values.join(','));
            if ($('.has_chosen .items-box').find('.item[selectindex=' + $(this).parents('.modules_select').attr('selectindex') + ']').length) {
                $('.has_chosen .items-box .item[selectindex=' + $(this).parents('.modules_select').attr('selectindex') + ']').remove();
            }
            if (selectindex === 'economics') {
                $('div.has_chosen span.item[selectindex="citys"]').remove();
                $('div.modules_select2 span.item').removeClass('active');
            } else if (selectindex === 'citys') {
                $('div.has_chosen span.item[selectindex="economics"]').remove();
                $('div.modules_select1 span.item').removeClass('active');
            }
            $('.has_chosen .items-box').append($selected);
            dataFilter();
            $(this).parents('.modules_level_box').find('.modules_select').removeClass('multi');
            // $(this).parents('.modules_level_box').find('.modules_select').hide();
            // $(this).parents('.modules_level_box').find('.item').removeClass('active');
        });
        //单击选中操作
        $('.modules_level_box .radio_select .item').on('click', function () {
            var dataId = $(this).attr('data-id');
            var selectindex = $(this).parents('.modules_select').attr('selectindex');
            var $selected = $('<span class="item"></span>');
            $selected.attr('selectindex', selectindex);
            $selected.text($(this).parents('.modules_select').find('.title').text() + $(this).text());
            $selected.attr('data-id', dataId);
            if ($('.has_chosen .items-box').find('.item[selectindex=' + $(this).parents('.modules_select').attr('selectindex') + ']').length) {
                $('.has_chosen .items-box .item[selectindex=' + $(this).parents('.modules_select').attr('selectindex') + ']').remove();
            }
            if (dataId) {
                $('.has_chosen .items-box').append($selected);
            }
            if ($(this).parents('.modules_select').hasClass('modules_select1')) {
                //在这里切换对应的二级的数据

                $(this).parents('.items_box').find('.item').removeClass('active');
                $(this).addClass('active');
                var $select2 = $(this).parents('.modules_level_box').find('.modules_select2');
                var economicId = $(this).attr('data-id');
                $('div.has_chosen span.item[selectindex="citys"]').remove();
                $('div.modules_select2 span.item').removeClass('active');
                $select2.find('span.item').each(function () {
                    if (!$(this).attr('data-economic') || !economicId) {
                        $(this).show();
                    } else {
                        if ($(this).attr('data-economic') === economicId) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                });
                $select2.find('div.item').each(function () {
                    if (!$(this).find('input').attr('data-economic') || !economicId) {
                        $(this).show();
                    } else {
                        if ($(this).find('input').attr('data-economic') === economicId) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                });
                $select2.show();
                $(this).parents('.modules_level_box').find('.modules_select3').hide();
            } else if ($(this).parents('.modules_select').hasClass('modules_select2')) {
                //在这里切换对应的三级的数据

                $('div.has_chosen span.item[selectindex="economics"]').remove();
                $('div.modules_select1 span.item').removeClass('active');

                $(this).parents('.items_box').find('.item').removeClass('active');
                $(this).addClass('active');
                $(this).parents('.modules_level_box').find('.modules_select3').show();
            } else if ($(this).parents('.modules_select').hasClass('modules_select3')) {
                $(this).parents('.modules_level_box').find('.item').removeClass('active');
                $(this).parents('.modules_level_box').find('.radio_select').removeClass('more_box');
                $(this).parents('.modules_level_box').find('.modules_select').hide();
            }
            dataFilter();
        });


        //更多操作
        $('.more-btn').on('click', function () {
            $(this).parents('.radio_select').toggleClass('more_box');
            var btn_text = $(this).text();
            switch (btn_text) {
                case '更多':
                    $(this).text('收起');
                    break;
                case '收起':
                    $(this).text('更多');
                    break;
            }
        });
        //多选操作
        $('.multi-btn').on('click', function () {
            $(this).parents('.modules_select').addClass('multi');
        });
        //多选取消操作
        $('.cancel-btn').on('click', function () {
            $(this).parents('.multi_select').find('.items_box .item').each(function (index, item) {
                $(item).find('input').prop('checked', false);
            });
            $(this).parents('.modules_select').removeClass('multi');
        });
        //已选中区域，单击取消操作
        $('.has_chosen .items-box').on('click', '.item', function () {
            var index = $(this).attr('selectindex');
            $(this).remove();
            var $modulesSelect = $('.modules_select[selectindex=' + index + ']');
            $modulesSelect.show();
            $modulesSelect.find('span.item').removeClass('active');
            dataFilter();
        })


        //排序操作
        $('.sort-row .layui-inline').mouseenter(function () {
            $(this).addClass('rent-hover');
        }).mouseleave(function (e) {
            $(this).removeClass('rent-hover');
        });
        $('.sort-item').on('click', function () {
            if (!$(this).hasClass('active')) {
                $('.sort-item').removeClass('active');
                $(this).addClass('active');
            }
            if ($(this).hasClass('rent-item')) {
                $(this).toggleClass('asc');
            } else {
                $('input[name="leftArea"]').val('');
                $('input[name="rightArea"]').val('');
            }
            dataFilter();
        });

        $('#clearBtn').on('click', function () {
            $('input[name="leftArea"]').val('');
            $('input[name="rightArea"]').val('');
            dataFilter();
        });

        $('#confirmBtn').on('click', function () {
            dataFilter();
        });

        $('#search').on('click', function () {
            dataFilter();
        });

        //筛选回显
        /**
         * 筛选回显
         * @param params = [{ selectindex:,//选中类别selectindex
         * 		dataId:[],//选中项的 data-id
         * 		shrinkFlag://是否收缩的标志true/fasle
         * }]
         */
        function filtEcho(params) {
            $('.filt-btn').trigger('click');
            params.forEach(function (item, index) {
                if (!item.dataId) {
                    return;
                }
                var title = $('.modules_select[selectindex=' + item.selectindex + ']').find('.title').text();
                var str = '<span class="item"  selectindex="' + item.selectindex + '" data-id="' + item.dataId.join(",") + '">' + title;
                if (item.shrinkFlag) {
                    $('.modules_select[selectindex=' + item.selectindex + ']').hide();

                }
                for (var i = 0; i < item.dataId.length; i++) {
                    str += $('.modules_select .radio_select .item[data-id=' + item.dataId[i] + ']').text() + '、';
                }
                str = str.slice(0, str.length - 1);
                str += '</span>';
                $('.has_chosen .items-box').append(str);
            });
        }

        // 触发默认操作
        filtEcho(JSON.parse('${echoData}' || '[]'));

        // 过滤操作
        function dataFilter(curr) {
            curr = curr || 1;
            var $submitForm = $('<form method="POST"></form>');
            $(document.body).append($submitForm);
            $submitForm.attr('action', '${base}/portal/enterprise/index.dhtml');
            $('div.has_chosen span.item').each(function () {
                var selectindex = $(this).attr('selectindex');
                var dataId = $(this).attr('data-id');
                if (dataId) {
                    var dataIds = dataId.split(',');
                    for (var i = 0; i < dataIds.length; i++) {
                        $submitForm.append('<input type="hidden" name="' + selectindex + '" value="' + dataIds[i] + '" />');
                    }
                }
            });
            $submitForm.append('<input type="hidden" name="leftArea" value="' + $('input[name="leftArea"]').val() + '" />');
            $submitForm.append('<input type="hidden" name="rightArea" value="' + $('input[name="rightArea"]').val() + '" />');
            $submitForm.append('<input type="hidden" name="curr" value="' + curr + '" />');
            $submitForm.append('<input type="hidden" name="keywords" value="' + $('input[name="keywords"]').val() + '" />');
            var orderType = $('div.sort-item').filter('.active').attr('data-type');
            $submitForm.append('<input type="hidden" name="orderType" value="' + orderType + '" />');
            if (orderType === 'area') {
                if ($('div.sort-item').filter('.asc').length) {
                    $submitForm.append('<input type="hidden" name="orderByType" value="asc" />');
                } else {
                    $submitForm.append('<input type="hidden" name="orderByType" value="desc" />');
                }
            }
            $submitForm.submit();
        }
    })
</script>
</html>

Msx云南人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery+spring写搜索页面

1，交互页面过滤器package com.wisesoft.portal.filter;import lombok.Data;import java.util.ArrayList;import java.util.List;@Datapublic class EnterpriseFilter { private String keywords; publi...
复制链接

扫一扫

专栏目录