layui 下拉框搜尋及程式碼實現

FairyHe發表於2020-12-31

layui 下拉框搜尋 和注意點
實現效果
在這裡插入圖片描述

一:html

<div class="layui-inline">
       <select id="contentType" name="contentType" >
               		<option value="">內容型別</option>
                     @for(item in contentTypeMapList){
                      <option value="${item.value}">${item.name}</option>
                      @}
         </select>
</div>
<div class="layui-inline">
         <select id="jumpType" name="jumpType" >
                 option value="">跳轉型別</option>
                 @for(item in jumpTypeMapList){
                  option value="${item.value}">${item.name}</option>
                   @}
         </select>
</div>

二:js

首先定義一下form
 var func = layui.func;
  /**
     * 點選查詢按鈕
     */
    CommunitySquareRecommend.search = function () {
        var queryData = {
            contentType:       $('#contentType').val(),
            jumpType:       $('#jumpType').val(),
        };


        table.reload(CommunitySquareRecommend.tableId, {
            where: queryData, page: {curr: 1}
        });
    };
    /**
     * 點選重置按鈕
     */
    CommunitySquareRecommend.reset = function () {
        $('#contentType').val("");
        $('#jumpType').val("");


        form.render();

        CommunitySquareRecommend.search();
    }
// 搜尋按鈕點選事件
    $('#btnSearch').click(function () {
        CommunitySquareRecommend.search();
    });
    // 重置按鈕點選事件
    $('#btnReset').click(function () {
        CommunitySquareRecommend.reset();
    });

三、mapper

<select id="customPageMapList" resultType="map" parameterType="cn.stylefeng.guns.modular.community.model.condition.CommunitySquareRecommendCondition">
        select
        <include refid="Base_Column_List"/>,
        goodbase.goods_name as goodsName,
        subject.subject_name as subjectName
        from mt_community_square_recommend base
        left join mt_goods_base goodbase on goodbase.goods_id = base.jump_value
        left join mt_eb_subject subject on subject.id = base.jump_value
        where 1 = 1
        <if test="paramCondition.contentType != null and paramCondition.contentType != ''">
            and base.content_type = #{paramCondition.contentType}
        </if>
        <if test="paramCondition.jumpType != null and paramCondition.jumpType != ''">
            and base.jump_type = #{paramCondition.jumpType}
        </if>
        order by base.create_time DESC
    </select>

四、上程式碼


//1.首先關於型別 用的列舉轉換文字  比如我的 就要轉換一下 所以有下面這個  具體看看我的   layui 表單 資料轉換 
 @RequestMapping("")
    public String index(Model model) {
        model.addAttribute("contentTypeMapList", CommunitySquareRecommendContentTypeEnum.getMapList());
        model.addAttribute("jumpTypeMapList", CommunitySquareRecommendJumpTypeEnum.getMapList());
        return PREFIX + "/communitySquareRecommend.html";
    }
//這個頁面定義後就可以顯示出想要展示的文字了。

ok 這樣應該就可以了。
我在寫這個的時候遇到的問題是:

if test="paramCondition.jumpType != null and paramCondition.jumpType != ''">
我的這個不為空的判斷 我只寫了前面的不為 null  後面的沒寫 的但是因為這兩個型別是string型別 導致查詢不到資料

相反 如果是整型型別的話  就不用判斷  != '' 

明天就休息啦 !開心 !我要連躺兩天! 再見 打工人仍在加班。

相關文章