小程序二级、三级筛选组件

2023-08-23 09:34| 来源: 网络整理| 查看: 265

小程序原生开发，多级列表筛选组件

结合下拉菜单组件使用

自定义筛选条件自定义筛选层级支持单选/复选/switch 独立组件，方便与其他组件融合简单的api调用无模板维护成本支持内嵌使用关于筛选组件

筛选组件系queryUI库开发而成，需要queryUI的环境支持，queryUI是一套我们内部项目孵化而出的小程序核心库(基于原生小程序)，我们糅合了一些jQuery特性及一些方便好用的特性，用于简化小程序开发成本及帮助后期能更好的维护项目

queryUI基于原生小程序开发，引入核心包既能快速应用于项目中，核心包现默认支持

markdown html from表单事件函数封装钩子方法小程序方法集 item list GITHUB 组件配置

wxml

const config = mkCheckList({ id: 'xxx', // 实例名称，在page中可以通过this.xxx获取该实例 mode: 1, // 指定筛选类型，默认1:单层筛选, 2:多层筛选 checkedType: 1, // 1: 单选， 2: 多选 onlyValid: false, // valid互斥关系 true为互斥， false不互斥 isSwitch: false, // 启用switch，checkedType=2时有效 value: [], // 配置默认值 data: [], // 数据配置 separator: '--', // allValue的分隔符，获取层级value之间的分隔符 maxCount: 9, // 块状筛选时，mode=3的时候有效，块状选择子元素超过9个隐藏多的选项同时显示展开按钮 selectAll: false, // 是否启用全选选项 tap: null, // 取值响应方法，叶子节点(无下级列表)响应方法，也可通过实例来指定 }) Pager({ data: { checkListConfig: config }, onReady(){ let instance = this.xxx //获取了筛选列表的实例 instance.tap = function(result){ console.log(result) } } }) 为筛选列表配置数据

下例代码片段是对配置中的data数据的描述

data: [ {title: '标题', value: '001', idf: 'x-1': checkListOption:{...}}, // 父级数据 {title: '标题', value: '0011', parent: 'x-1'}, // 子级数据 {title: '标题', value: '0012', parent: 'x-1'}, {title: '标题', value: '002', idf: 'x-2', checkListOption:{...}}, // 父级数据 {title: '标题', value: '0021', parent: 'x-2'}, // 子级数据 {title: '标题', value: '0022', parent: 'x-2' idf: 'y-1', checkListOption:{...}}, // 既是父级，也是子级 {title: '标题', value: '00y1', parent: 'y-1'}, // 子级数据 {title: '标题', value: '00y2', parent: 'y-1'}, ] idf 指定父级名的key parent 设置谁是父级的key checkListOption 子层筛选列表的参数配置，参考上述的组件配置

value, title, idf, parent必须为字符串数据

DEMO示例一、单行筛选列表(单选)

const Pager = require('../../components/aotoo/core/index') const mkCheckList = require('../../components/modules/checklist') const config = { id: 'xxx', checkedType: 1, // 1 单选 value: ['2'], data: [ {title: '111', value: '1'}, {title: '222', value: '2'}, {title: '333', value: '3'}, {title: '444', value: '4'}, ] } Pager({ data: { checkListConfig: mkCheckList(config) } } 二、单行筛选列表(多选)

/* index.js */ const Pager = require('../../components/aotoo/core/index') const mkCheckList = require('../../components/modules/checklist') const config = { id: 'xxx', checkedType: 2, // 2 多选 isSwitch: true, // 指定为switch value: ['2', '3', '4'], data: [ {title: '111', value: '1'}, {title: '222', value: '2'}, {title: '333', value: '3'}, {title: '444', value: '4'}, ] } Pager({ data: { checkListConfig: mkCheckList(config) } } 四、全选及分割符

/* index.js */ const Pager = require('../../components/aotoo/core/index') const mkCheckList = require('../../components/modules/checklist') const config = { id: 'xxx', checkedType: 2, // 2 多选 selectAll: true, // 是否包含全选选项 value: ['999',], data: [ {title: '111', value: '111'}, {title: '222', value: '222'}, '=====', {title: '333', value: '333'}, {title: '444', value: '444'}, ['=====', '分类分隔符'], {title: '555', value: '555'}, ] } Pager({ data: { checkListConfig: mkCheckList(config) } } 四、二层筛选

/* index.js */ const Pager = require('../../components/aotoo/core/index') const mkCheckList = require('../../components/modules/checklist') const config = { id: 'xxx', checkedType: 2, // 2 多选 value: ['111'], data: [ title: '111', value: '111', idf: 'aaa', checkListOption: {checkedType: 2, value: ['222']}}, {title: '222', value: '222', parent: 'aaa'}, {title: '333', value: '333', parent: 'aaa'}, {title: '444', value: '444', parent: 'aaa'}, {title: '555', value: '555', idf: 'bbb', checkListOption: {checkedType: 2, value: ['666', '777']}}, {title: '666', value: '666', parent: 'bbb'}, {title: '777', value: '777', parent: 'bbb'}, {title: '888', value: '888', parent: 'bbb'}, ] } Pager({ data: { checkListConfig: mkCheckList(config) } } 取值

以上例为说明，当叶子节点点击时会触发tap方法

/* index.js */ const Pager = require('../../components/aotoo/core/index') const mkCheckList = require('../../components/modules/checklist') config = { ... tap(allValue){ // 通过配置指定事件 console.log(allValue) } } Pager({ data: { checkListConfig: mkCheckList(config) }, onReady(){ // 也可以通过设置实例的tap事件来指定 let instance = this.xxx instance.tap = function(result){ console.log(result) } } }

结果如下图

混合筛选，包含二级、三级筛选

二级筛选

三级筛选

块筛选

API

getValue 获取当前值，截图如上图

setValue 回填数据，并设置筛选状态

clear 清除数据和状态，也可以指定清除

clearState 清除状态，不清除值

API的使用

清除所有的值

Pager({ data: { checkListConfig: mkCheckList(config) }, onReady(){ let instance = this.xxx setttimout(()=>{ instance.clear() }, 1000) } }

指定清除某一项值/状态(包含其所有的子项选中项) 某些场景中有复杂的互斥逻辑，如SKU，

const Pager = require('../../components/aotoo/core/index') const mkCheckList = require('../../components/modules/checklist') const config = { id: 'xxx', checkedType: 2, // 2 多选 value: ['111', '222'], data: [ {idf: 'aaa', value: '111', checkListOption:{value: [...]}}, {idf: 'bbb', value: '222', checkListOption:{value: [...]}}, {idf: 'ccc', value: '333', checkListOption:{value: [...]}}, ] } Pager({ data: { checkListConfig: mkCheckList(config) }, onReady(){ let instance = this.xxx instance.tap = function(res){ let allValue = res.allValue if (allValue[..].indexOf('333')>-1) { // 如果333或者其子项被选中，清除aaa项及其所有子项的value instance.clear('111') } } } }

GITHUB /pages/checklist

更多说明和DEMO

【本文地址】

小程序二级、三级筛选组件

小程序二级、三级筛选组件

今日新闻

推荐新闻