layui 下拉框搜尋及程式碼實現
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型別 導致查詢不到資料
相反 如果是整型型別的話 就不用判斷 != ''
明天就休息啦 !開心 !我要連躺兩天! 再見 打工人仍在加班。
相關文章
- layui下拉框xm-select自定義搜尋使用方法UI
- layui資料表格搜尋UI
- 微信小程式實現全域性搜尋程式碼高亮微信小程式
- C# MVC LayUI實現下拉框二級聯動C#MVCUI
- 直播軟體開發,實現模糊搜尋的程式碼分析
- layui tree 對節點進行搜尋UI
- OpenSearch & AI 開放平臺,實現0程式碼圖片搜尋!AI
- 直播系統程式碼,常用搜尋中搜尋歷史,搜尋推薦功能
- 微信小程式 簡易搜尋功能實現微信小程式
- Elasticsearch 實現簡單搜尋Elasticsearch
- Laravel + Elasticsearch 實現中文搜尋LaravelElasticsearch
- Jquery + Bootstrap 實現搜尋框jQueryboot
- layUI Table自定義工具欄和搜尋引數UI
- 微信小程式實現搜尋關鍵詞高亮微信小程式
- element-ui中el-select下拉框實現拼音、首字母、漢字等模糊搜尋UI
- 讀書APP原始碼,搜尋欄模糊處理實現APP原始碼
- Sunday搜尋演算法實現演算法
- elasticsearch實現基於拼音搜尋Elasticsearch
- laravel8實現ES搜尋Laravel
- Python如何實現窮舉搜尋?Python
- 如何用Redis實現搜尋介面Redis
- Elasticsearch搜尋功能的實現(五)-- 實戰Elasticsearch
- DES原理及程式碼實現
- Redis 實戰 —— 10. 實現內容搜尋、定向廣告和職位搜尋Redis
- 成品直播原始碼,實現在平臺內部的搜尋原始碼
- BM搜尋演算法C實現演算法
- 基於Elasticsearch實現搜尋建議Elasticsearch
- Java實現 LeetCode 35 搜尋插入位置JavaLeetCode
- javascript實現二叉搜尋樹JavaScript
- 使用 Laravel Scout + ElasticSearch 實現全文搜尋LaravelElasticsearch
- CSS 實現搜尋相關互動CSS
- vue2實現搜尋結果中的搜尋關鍵字高亮Vue
- 海量資料搜尋---demo展示百度、谷歌搜尋引擎的實現谷歌
- 圖的廣度優先搜尋和深度優先搜尋Python實現Python
- 4 Spring Cloud叢集服務清單及搜尋頁面實現SpringCloud
- 【搜尋引擎】 PostgreSQL 10 實時全文檢索和分詞、相似搜尋、模糊匹配實現類似Google搜尋自動提示SQL分詞Go
- 直播系統搭建,可自動模糊匹配的搜尋下拉框
- 線上直播系統原始碼,vue實現搜尋文字高亮功能原始碼Vue