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:
Module: 筛选控件
src/ph-filter/components/FilterCheckbox.js:11
Available since 2.0.0
Constructor
FilterCheckbox
FilterCheckbox
()
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>
)
}
}
属性
choose
String
选中的id字符串,逗号隔开
Default:
-1
index
Number
默认选中的侧边栏的索引值
Default:
0
showExtra
Array
显示按钮额外文字的格式,目前仅支持文字
Default:
null