代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui扩展组件layFilter</title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: #f5f7f9;
align-items: center;
padding: 60px 0;
}
.layfilter{
width: 80%;
margin-bottom: 60px;
background-color: #fff;
position: relative;
}
.layfilter .title{
position: absolute;
height: 30px;
line-height: 30px;
padding: 0 20px;
font-weight: bold;
left: 50%;
top: -30px;
border-radius: 30px 30px 0 0;
transform: translate(-50%,0);
background-color: #fff;
}
.btn-group{
margin-top: 20px;
padding: 0 20px;
}
.show-code{
margin-top: 20px;
border-top: 1px solid #e0e0e0;
text-align: center;
height: 60px;
line-height: 60px;
}
.show-code span{
cursor: pointer;
font-size: 16px;
color: #999;
}
</style>
</head>
<body>
<div class="container">
<div class="layfilter">
<div class="title">电商类</div>
<div id="layfilter1" lay-filter="layfilter"></div>
<div class="btn-group">
<button class="layui-btn layui-btn-primary" id="getValBtn1">获取选中值(直接获取)</button>
<button class="layui-btn layui-btn-primary" id="resetBtn1">全部重置</button>
<button class="layui-btn layui-btn-primary" id="setDisabledBtn1">设置禁用</button>
<a class="layui-btn layui-btn-danger" href="https://www.52fansite.com">个博客(建设ing)</a>
</div>
<div class="show-code"><span><i class="layui-icon layui-icon-down"></i> 查看代码</span></div>
<pre class="layui-code layui-hide" style="margin: 0;">
layui.use(['layer', 'layFilter'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var layfilter = layui.layFilter;
var dataSource1 = []; //太长了，就不展示了，直接看源码吧
var filter1 = layfilter.render({
elem: '#layfilter1',
itemWidth: 80 ,
labelWidth: 100,
dataSource:dataSource1,
color: "#FF5722",
success: (data)=>{
},
onChange: (status, data, dom)=>{
console.log("filter1 is change",status,data,dom);
}
});
//获取选中值（直接获取）
$('#getValBtn1').click(function () {
layer.alert(JSON.stringify(filter1.getValue()));
});
//全部重置
$("#resetBtn1").click(function(){
filter1.resetFilter(function(){
layer.msg('重置了！');
})
});
//设置禁用
$("#setDisabledBtn1").click(function() {
filter1.setDisabled('brand','chuizi')
});
})
</pre>
</div>
<div class="layfilter">
<div class="title">影视类</div>
<div id="layfilter2" lay-filter="layfilter2"></div>
<div class="btn-group">
<button class="layui-btn layui-btn-primary" id="getValBtn2">获取选中值(回调获取)</button>
<button class="layui-btn layui-btn-primary" id="resetBtn2">重置(指定类别)</button>
<button class="layui-btn layui-btn-primary" id="setDisabledBtn2">设置禁用</button>
</div>
<div class="show-code"><span><i class="layui-icon layui-icon-down"></i> 查看代码</span></div>
<pre class="layui-code layui-hide" style="margin: 0;">
layui.use(['layer', 'layFilter'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var layfilter = layui.layFilter;
var dataSource2 = []; //太长了，就不展示了，直接看源码吧
var filter2 = layfilter.render({
elem: '#layfilter2',
labelWidth: 80,
dataSource:dataSource2,
color: "#009688",
success: (data)=>{
data.setValue('category','123')
data.setValue('day','137','138')
data.setDisabled('category','aiqing')
},
onChange: (status, data, dom)=>{
console.log("filter2 is change",status,data);
}
});
//获取选中值（回调获取）
$('#getValBtn2').click(function () {
filter2.getValue(function (data) {
layer.alert(JSON.stringify(data));
})
});
//重置（指定类别）
$("#resetBtn2").click(function(){
filter2.resetFilter(function(){
layer.msg(`重置了[类别]！`);
},'category')
})
//设置禁用
$("#setDisabledBtn2").click(function() {
filter2.setDisabled('category','jingsong')
})
})
</pre>
</div>
<div class="layfilter">
<div class="title">社交类</div>
<div id="layfilter3" lay-filter="layfilter3"></div>
<div class="show-code"><span><i class="layui-icon layui-icon-down"></i> 查看代码</span></div>
<pre class="layui-code layui-hide" style="margin: 0;">
layui.use(['layer', 'layFilter'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var layfilter = layui.layFilter;
var filter3 = layfilter.render({
elem: '#layfilter3',
labelWidth: 180,
dataSource,
color: "#1E9FFF",
success: (data)=>{
},
onChange: (status, data, dom)=>{
console.log(status,data);
}
});
})
</pre>
</div>
</div>
<script src="layui/layui.js"></script>
<script src="js/common.js"></script>
<script>
layui.config({
version: '1545041465443' //为了更新 js 缓存，可忽略
});
layui.use(['layer','code', 'layFilter'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var layfilter = layui.layFilter;
layui.code({skin: 'notepad'});
var dataSource1 =
[
{
"title": "手机品牌",
"name": "brand",
"type": "checkbox",
"allValue": "ALL",
"allName": "所有",
"data": [
{
"value": "huawei",
"name": "华为",
},
{
"value": "xiaomi",
"name": "小米",
},
{
"value": "meizu",
"name": "魅族",
},
{
"value": "huashuo",
"name": "华硕",
},
{
"value": "chuizi",
"name": "锤子",
},
{
"value": "yijia",
"name": "一加",
},
{
"value": "vivo",
"name": "vivo",
},
{
"value": "oppo",
"name": "oppo",
},
{
"value": "iphone",
"name": "iphone",
"disabled": true
}
]
},
{
"title": "UI系统",
"name": "os",
"type": "radio",
"data": [
{
"value": "Hongmeng",
"name": "鸿蒙OS",
"disabled": true
},
{
"value": "MIUI",
"name": "MIUI"
},
{
"value": "IOS",
"name": "IOS"
}
]
},
{
"title": "配送范围",
"name": "city",
"type": "checkbox",
"allName": "不限",
"data": [
{
"value": "129",
"name": "武汉"
},
{
"value": "130",
"name": "宜昌"
},
{
"value": "131",
"name": "黄冈"
},
{
"value": "132",
"name": "咸宁"
},
{
"value": "133",
"name": "孝感"
},
{
"value": "134",
"name": "恩施"
},
{
"value": "135",
"name": "荆门"
},
{
"value": "136",
"name": "荆州"
},
{
"value": "137",
"name": "黄石"
},
{
"value": "138",
"name": "襄阳"
},
{
"value": "139",
"name": "鄂州"
},
{
"value": "140",
"name": "随州"
},
{
"value": "141",
"name": "神农架",
"disabled": true
},
{
"value": "142",
"name": "潜江"
},
{
"value": "143",
"name": "仙桃"
},
{
"value": "144",
"name": "天门"
},
{
"value": "145",
"name": "十堰"
}
]
},
{
"title": "价格区间",
"name": "price",
"type": "radio",
"data": [
{
"value": "<1000",
"name": "1000以下",
"disabled": true
},
{
"value": "1000~1999",
"name": "1000~1999元"
},
{
"value": "2000~2999",
"name": "2000~2999元"
},
{
"value": "3000~3999",
"name": "3000~3999元"
},
{
"value": "4000~4999",
"name": "4000~4999元"
},
{
"value": "5000~5999",
"name": "5000~5999元"
},
{
"value": "6000~6999",
"name": "6000~6999元"
},
{
"value": "7000~9999",
"name": "7000~9999元"
},
{
"value": ">=10000",
"name": "一万元以上"
}
]
}
];
var dataSource2 = [
{
"title": "类型",
"name": "type",
"type": "checkbox",
"data": [
{
"value": "dianying",
"name": "电影",
},
{
"value": "dianshiju",
"name": "电视剧",
},
{
"value": "dongman",
"name": "动漫",
},
{
"value": "zongyi",
"name": "综艺",
},
{
"value": "yinyue",
"name": "音乐",
},
{
"value": "jilupian",
"name": "纪录片",
},
]
},
{
"title": "类别",
"name": "area",
"type": "radio",
"data": [
{
"value": "huayu",
"name": "华语",
},
{
"value": "xianggang",
"name": "香港地区",
},
{
"value": "meiguo",
"name": "美国",
},
{
"value": "ouzhou",
"name": "欧洲",
},
{
"value": "hanguo",
"name": "韩国",
},
{
"value": "riben",
"name": "日本",
},
{
"value": "taiguo",
"name": "泰国",
},
{
"value": "yindu",
"name": "印度",
},
{
"value": "other",
"name": "其他",
},
]
},
{
"title": "类别",
"name": "category",
"type": "checkbox",
"data": [
{
"value": "xiju",
"name": "喜剧",
},
{
"value": "dongzuo",
"name": "动作",
},
{
"value": "kongbu",
"name": "恐怖",
},
{
"value": "xuanyi",
"name": "悬疑",
},
{
"value": "fanzui",
"name": "犯罪",
},
{
"value": "jingsong",
"name": "惊悚",
},
{
"value": "zhanzheng",
"name": "战争",
},
{
"value": "juqing",
"name": "剧情",
},
{
"value": "aiqing",
"name": "爱情",
},
]
},
{
"title": "规格",
"name": "spec",
"type": "radio",
"data": [
{
"value": "juzhi",
"name": "巨制",
},
{
"value": "yuanxian",
"name": "院线",
},
{
"value": "dubo",
"name": "独播",
},
{
"value": "wangluodianying",
"name": "网络电影",
},
]
},
{
"title": "年代",
"name": "year",
"type": "radio",
"data": [
{
"value": "jinnian",
"name": "今年",
},
{
"value": "2020",
"name": "2020",
},
{
"value": "2019",
"name": "2019",
},
{
"value": "2018",
"name": "2019",
},
{
"value": "2017",
"name": "2017",
},
{
"value": "gengzao",
"name": "更早",
},
]
},
{
"title": "付费",
"name": "pay",
"type": "radio",
"data": [
{
"value": "mianfei",
"name": "免费",
"disabled": true
},
{
"value": "huiyuanmianfei",
"name": "会员免费",
},
{
"value": "yongquan",
"name": "用券",
},
]
}
]
var dataSource3 = [
{
"title": "性别",
"name": "gender",
"type": "radio",
"data": [
{
"value": "nan",
"name": "男",
},
{
"value": "nv",
"name": "女",
},
{
"value": "other",
"name": "第三性别",
"disabled": true
},
]
},
{
"title": "年龄范围",
"name": "old",
"type": "radio",
"data": [
{
"value": "18-20",
"name": "18-20岁",
},
{
"value": "20-22",
"name": "20-22岁",
},
{
"value": "22-24",
"name": "22-24岁",
},
{
"value": "24-30",
"name": "24-30岁",
},
{
"value": "30-40",
"name": "30-40岁",
},
{
"value": ">40",
"name": "40岁以上",
},
]
},
{
"title": "国家地区",
"name": "country",
"type": "checkbox",
"data": [
{
"value": "China",
"name": "中国",
},
{
"value": "eluosi",
"name": "俄罗斯",
},
{
"value": "hanguo",
"name": "韩国",
},
{
"value": "riben",
"name": "小日本",
},
{
"value": "laji",
"name": "美国",
},
]
}
]
$('.show-code span').click(function(){
var $code = $(this).parent().siblings('.layui-code');
$code.toggleClass('layui-hide');
$(this).html($code.hasClass('layui-hide') ? '<i class="layui-icon layui-icon-down"></i> 显示代码':'<i class="layui-icon layui-icon-up"></i> 隐藏代码')
})
var filter1 = layfilter.render({
elem: '#layfilter1',
itemWidth: 80 ,
labelWidth: 100,
dataSource:dataSource1,
color: "#FF5722",
success: (data)=>{
},
onChange: (status, data, dom)=>{
console.log("filter1 is change",status,data,dom);
}
});
var filter2 = layfilter.render({
elem: '#layfilter2',
labelWidth: 80,
dataSource:dataSource2,
color: "#009688",
success: (data)=>{
data.setValue('category','123')
data.setValue('day','137','138')
data.setDisabled('category','aiqing')
},
onChange: (status, data, dom)=>{
console.log("filter2 is change",status,data);
}
});
var filter3 = layfilter.render({
elem: '#layfilter3',
labelWidth: 180,
dataSource:dataSource3,
color: "#1E9FFF",
success: (data)=>{
},
onChange: (status, data, dom)=>{
console.log(status,data);
}
});
//获取选中值（直接获取）
$('#getValBtn1').click(function () {
layer.alert(JSON.stringify(filter1.getValue()));
});
//全部重置
$("#resetBtn1").click(function(){
filter1.resetFilter(function(){
layer.msg('重置了！');
})
});
//设置禁用
$("#setDisabledBtn1").click(function() {
filter1.setDisabled('brand','chuizi')
});
filter1.on('click(layfilter)', function (obj) {
console.log(obj);
})
//获取选中值（回调获取）
$('#getValBtn2').click(function () {
filter2.getValue(function (data) {
layer.alert(JSON.stringify(data));
})
});
//重置（指定类别）
$("#resetBtn2").click(function(){
filter2.resetFilter(function(){
layer.msg(`重置了[类别]！`);
},'category')
})
//设置禁用
$("#setDisabledBtn2").click(function() {
filter2.setDisabled('category','jingsong')
})
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手