FilterCheckbox

多条件筛选组件

  • 可通过groupIndex设置主菜单索引值，默认0，即第一个。
  • 可通过choose设置初始选中的的id的字符串，以逗号隔开。
  • 可通过buttons设置底部按钮，以数组的格式传入，如[{text:'取消', phStyle:'info', onHandle:this.cancelChoose.bind(this), otherProps: {hollow:true}}]。

主要属性和接口：

  • groupIndex: 主菜单索引值。
  • choose: 选中id的字符串。
  • buttons: 底部按钮数组。 如：
    <FilterCheckbox choose={this.state.choose} groupIndex={2} buttons={buttons}>
   {
       this.state.filterData.map((cityShopList,index)=>{
           return (
               <ItemGroup key={cityShopList.cityId} mainKey={cityShopList.cityId} label={cityShopList.cityName}>
                   {
                       cityShopList.shopInfoDTOList.map((shopInfo)=>{
                           return  <Item disabled={shopInfo.status==1} key={shopInfo.shopId} itemKey={shopInfo.shopId}>{shopInfo.shopName}</Item>
                       })
                   }
               </ItemGroup>
           );
       })
   }
</FilterCheckbox>

方法

属性

事件

Extends Component
Defined in: src/ph-filter/components/FilterCheckbox.js:11
Module: 筛选控件

Available since 2.0.0

Constructor

FilterCheckbox

FilterCheckbox ()

Defined in src/ph-filter/components/FilterCheckbox.js:11

Available since 2.0.0

Example:

import React, { Component } from "react"
import {ajax} from "./utils/tool.js"

import PhFilter from "phoenix-ui/lib/ph-filter"
import List from "phoenix-ui/lib/list"
// import Code from "./code/code";

const CheckboxContainer = PhFilter.CheckboxContainer,
      Item = PhFilter.Item,
      ItemGroup = PhFilter.ItemGroup

export default class phFilterCheckbox extends Component {

    constructor(props,context){
        super(props,context)

        this.state = {
            filterData: [],
            choose: ''
        }

        this.getData("./data/shop-list.json", 'filterData');
        this.getData("./data/choose.json", 'choose');
    }

    getData(fileName, key){ // 获取数据方法，ajax方法在下面定义了
        ajax(fileName).then((json)=>{
            let o = {}
            o[key] = json

            this.setState(o)

        }, (error)=>{// 加载失败
            console.error("出错了", error)
        });
    }

    itemClickCallback(key, disabled){
        console.log(key)
        console.log(disabled)
    }

    onSubmit(choose){
        console.log(choose)
    }

    render(){
        let self = this;
        const buttons = [
            {onHandle: this.onSubmit.bind(this)}
        ]

        return(
            <div>
                <CheckboxContainer choose={this.state.choose} index={2} buttons={buttons} showExtra='已选择#家门店'>
                    {
                        this.state.filterData.map((cityShopList,index)=>{
                            return (
                                <ItemGroup key={cityShopList.cityId} mainKey={cityShopList.cityId} label={cityShopList.cityName}>
                                    {
                                        cityShopList.shopInfoDTOList.map((shopInfo)=>{
                                            return (
                                                <Item disabled={shopInfo.status==1} key={shopInfo.shopId} itemKey={shopInfo.shopId} clickCallback={self.itemClickCallback.bind(self)}>
                                                    {shopInfo.shopName}
                                                </Item>
                                            );
                                        })
                                    }
                                </ItemGroup>
                            );
                        })
                    }

                </CheckboxContainer>

                <a href="#/ph-filter-code" className="ph-filter-code">查看代码</a>
            </div>
        )
    }
}

属性

buttons

Array

Defined in src/ph-filter/components/FilterCheckbox.js:72

按钮数组

choose

String

Defined in src/ph-filter/components/FilterCheckbox.js:65

选中的id字符串，逗号隔开

Default:

-1

index

Number

Defined in src/ph-filter/components/FilterCheckbox.js:58

默认选中的侧边栏的索引值

Default:

0

showExtra

Array

Defined in src/ph-filter/components/FilterCheckbox.js:78

显示按钮额外文字的格式，目前仅支持文字

Default:

null