LAYUI - LAYFILTER

layfilter一般用户查询数据列表的时候,如淘宝的搜索商品,中关村在线搜索电子产品等
核心方法和参数

layfilter最核心的一个方法就是 layfilter.render(options)

			//1、加载CSS
				 
			//2、定义layui组件 得到 layfilter 对象
			var layfilter = layui.layfilter;
				 
			//3、定义一个layfilter 挂载到 div 上
			layfilter.render({
			    'elem' : '#localtable',//table的选择器
			    itemWidth:[100],//数组 如[80,100,100],各元素的宽度默认80
			    url:'json/filter.json',  //异步请求地址,目前只支持get请求
                //dataSource:dataSource, //数据源
			})
				
			

options参数说明

参数选项 说明 类型 示例值
elem 指定filter容器的选择器。 string "#layfilter"
itemWidth 各元素宽度
为数组,当数组长度小于data的长度的时候,后面使用最后一个长度
Array [80,80,100]
url 各元素宽度
  • code 返货码为0成功
  • msg 错误提示信息
  • data 自定义过滤,组件将不做处理,仅仅将过滤值放在 done回调中
  • 参数说明:title左边显示的文本
  • name或取值时的key
  • type单选或复选不传则默认单选
  • data=>value各元素的value值
  • data=>name各元素的显示的文本
  • data=>checked是否默认选中,'true'选中
  • data=>disabled是否默禁用,'true'禁用
							{
							    "code": 0",msg": "","data": [
							        "title": "类别",
						            "name": "category",
						            "type": "checbox",
						            "data": [
						                {
						                    "value": "1212",
						                    "name": "儿童",
						                    "checked": "true"
						                },
						                {
						                    "value": "1212",
						                    "name": "生活",
						                    "disabled": "true"
						                }]
							        }
							    ]
							}
							
string '/demo/item/list.json'
dataSource 数据源 Object 参考url

方法说明

1.事件监听

			layfilter.on('click(layfilter)',function(obj){
              console.log(obj);//监控点击事件
            })
			

2.获取选中的值

			layfilter.getValue(function(data){
		      layer.alert(JSON.stringify(data));
		    })
			
更新日志
  • 2019/02/24 完成初初始版本