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
- 直播軟體開發,實現模糊搜尋的程式碼分析
- 微信小程式 簡易搜尋功能實現微信小程式
- 微信小程式實現搜尋關鍵詞高亮微信小程式
- layUI Table自定義工具欄和搜尋引數UI
- Laravel + Elasticsearch 實現中文搜尋LaravelElasticsearch
- Elasticsearch 實現簡單搜尋Elasticsearch
- Jquery + Bootstrap 實現搜尋框jQueryboot
- PHP實現搜尋附近的人PHP
- 實現延遲搜尋功能
- jquery 實現層級下拉框聯動效果 程式碼jQuery
- 直播系統程式碼,常用搜尋中搜尋歷史,搜尋推薦功能
- Java實現利用搜尋引擎收集網址的程式Java
- YII框架中自帶的表單,搜尋,分頁程式碼的實現框架
- 搜尋框帶有搜尋提示點選消失程式碼例項
- 如何用Redis實現搜尋介面Redis
- laravel8實現ES搜尋Laravel
- elasticsearch實現基於拼音搜尋Elasticsearch
- ASP智慧搜尋的實現 (轉)
- 讀書APP原始碼,搜尋欄模糊處理實現APP原始碼
- Redis 實戰 —— 10. 實現內容搜尋、定向廣告和職位搜尋Redis
- element-ui中el-select下拉框實現拼音、首字母、漢字等模糊搜尋UI
- Elasticsearch搜尋功能的實現(五)-- 實戰Elasticsearch
- Sunday搜尋演算法實現演算法
- BM搜尋演算法C實現演算法
- javascript實現二叉搜尋樹JavaScript
- Python如何實現窮舉搜尋?Python
- 基於Elasticsearch實現搜尋建議Elasticsearch
- CSS 實現搜尋相關互動CSS
- 使用 Laravel Scout + ElasticSearch 實現全文搜尋LaravelElasticsearch
- 搜尋引擎原理及使用
- 成品直播原始碼,實現在平臺內部的搜尋原始碼
- 線上直播系統原始碼,vue實現搜尋文字高亮功能原始碼Vue