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

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

结合下拉菜单组件使用

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

关于筛选组件

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

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

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

GITHUB

组件配置

wxml

<ui-list wx:if="{{checkListConfig}}" class="{{checkListConfig.containerClass}}" list="{{checkListConfig}}" />

js

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示例

一、单行筛选列表(单选)

<!--index.wxml-->
<ui-list wx:if="{{checkListConfig}}" list="{{checkListConfig}}" />

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.wxml-->
<ui-list wx:if="{{checkListConfig}}" list="{{checkListConfig}}" />

/* index.js */
const Pager = require('../../components/aotoo/core/index')
const mkCheckList = require('../../components/modules/checklist')

const config = {
  id: 'xxx',
  checkedType: 2,  // 2 多选
  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)
  }
}

三、单行筛选列表(switch)

<!--index.wxml-->
<ui-list wx:if="{{checkListConfig}}" list="{{checkListConfig}}" />

/* 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.wxml-->
<ui-list wx:if="{{checkListConfig}}" list="{{checkListConfig}}" />

/* 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.wxml-->
<ui-list wx:if="{{checkListConfig}}" list="{{checkListConfig}}" />

/* 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