add:完善过滤列的示例,增加排除&全选组合.
This commit is contained in:
parent
2272b3865f
commit
af15dc9b61
|
@ -1,21 +1,34 @@
|
|||
/**
|
||||
*
|
||||
* @title 组合过滤和其他功能使用
|
||||
* @description 在过滤的基础上增加列拖拽、列排序等一系列功能
|
||||
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示等
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
import multiSelect from '../../src/lib/MultiSelect';
|
||||
import sort from '../../src/lib/sort';
|
||||
import Checkbox from 'bee-checkbox';
|
||||
import Icon from 'bee-icon';
|
||||
import Menu from 'bee-menus';
|
||||
import Dropdown from 'bee-dropdown';
|
||||
|
||||
|
||||
const columns27 = [
|
||||
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
|
||||
{ title: "年龄", width: 150, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
|
||||
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "show" },
|
||||
];
|
||||
const { Item } = Menu;
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
|
||||
|
||||
const dataList = [
|
||||
{ "key": "1", value: "库存明细", id: "a" },
|
||||
{ "key": "2", value: "订单明细", id: "v" },
|
||||
{ "key": "3", value: "发货明细", id: "c" }
|
||||
]
|
||||
|
||||
const data27 = [
|
||||
{
|
||||
|
@ -83,23 +96,65 @@ const data27 = [
|
|||
}
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
const ComplexTable = sort(MultiSelectTable, Icon);
|
||||
class Demo27 extends Component {
|
||||
handlerFilterRowsChange = (key, val) => {
|
||||
console.log('准备构建AJAX请求,接收参数:key=', key, ' value=', val);
|
||||
}
|
||||
|
||||
handlerFilterRowsDropChange = (key, val) => {
|
||||
console.log('过滤条件类型:', key, val);
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
}
|
||||
onClick = (item) => {
|
||||
console.log(item);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable
|
||||
const menu1 = (
|
||||
<Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
|
||||
<SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
|
||||
<MenuItemGroup title="Item 1">
|
||||
<Menu.Item key="1">选项 1</Menu.Item>
|
||||
<Menu.Item key="2">选项 2</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
<MenuItemGroup title="Iteom 2">
|
||||
<Menu.Item key="3">选项 3</Menu.Item>
|
||||
<Menu.Item key="4">选项 4</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
</SubMenu>
|
||||
</Menu>)
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let columns27 = [
|
||||
{
|
||||
title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
|
||||
return <Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon style={{ "visibility": "hidden" }} type="uf-eye" />
|
||||
</Dropdown>
|
||||
}
|
||||
},
|
||||
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
|
||||
{ title: "年龄", width: 150, sorter: (a, b) => a.age - b.age, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
|
||||
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "show" },
|
||||
];
|
||||
return <ComplexTable
|
||||
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterRowsChange={this.handlerFilterRowsChange}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数,默认300ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
bordered
|
||||
draggable={true}
|
||||
multiSelect={multiObj}
|
||||
columns={columns27}
|
||||
data={data27} />;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -2553,9 +2553,9 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
|||
|
||||
@font-face {
|
||||
font-family: "uf";
|
||||
src: url("../style/utils/iconfont.eot");
|
||||
src: url("../node_modules/tinper-bee-core/scss/iconfont.eot?t=1483429573920");
|
||||
/* IE9*/
|
||||
src: url("../style/utils/iconfont.eot") format("embedded-opentype"), url("../style/utils/iconfont.woff") format("woff"), url("../style/utils/iconfont.ttf") format("truetype"), url("../style/utils/iconfont.svg") format("svg");
|
||||
src: url("../node_modules/tinper-bee-core/scss/iconfont.eot?t=1483429573920#iefix") format("embedded-opentype"), url("../node_modules/tinper-bee-core/scss/iconfont.woff?t=1483429573920") format("woff"), url("../node_modules/tinper-bee-core/scss/iconfont.ttf?t=1483429573920") format("truetype"), url("../node_modules/tinper-bee-core/scss/iconfont.svg?t=1483429573920#uf") format("svg");
|
||||
/* iOS 4.1- */ }
|
||||
|
||||
.uf {
|
||||
|
@ -8436,6 +8436,8 @@ ul {
|
|||
transition: all 0.3s ease; }
|
||||
.u-table tr:hover {
|
||||
background: rgb(227,242,253); }
|
||||
.u-table tr:hover td .uf-eye {
|
||||
visibility: visible !important; }
|
||||
.u-table tr.tr-row-hover {
|
||||
background: rgb(227,242,253); }
|
||||
.u-table th,
|
||||
|
@ -8623,7 +8625,7 @@ ul {
|
|||
.u-table-thead th:hover .bee-table-column-sorter {
|
||||
display: inline-block; }
|
||||
.u-table-thead .th-drag {
|
||||
cursor: pointer; }
|
||||
cursor: move; }
|
||||
.u-table-thead .th-drag-hover {
|
||||
background: #ccc; }
|
||||
.u-table-thead-th {
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -57,6 +57,11 @@ $table-move-in-color: $bg-color-base;
|
|||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
background: $table-hover-color;
|
||||
td {
|
||||
.uf-eye{
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tr.tr-row-hover {
|
||||
|
@ -349,7 +354,7 @@ $table-move-in-color: $bg-color-base;
|
|||
}
|
||||
}
|
||||
.th-drag{
|
||||
cursor: pointer;
|
||||
cursor: move;
|
||||
}
|
||||
//为了区分是拖拽宽度还是交换列,先注释上面了
|
||||
// .th-drag:hover{
|
||||
|
|
|
@ -199,7 +199,7 @@ export default function multiSelect(Table, Checkbox) {
|
|||
),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
width: "100",
|
||||
width: "55",
|
||||
render: (text, record, index) => {
|
||||
let rowKey = record["key"] ? record["key"] : this.getRowKey(record,i);
|
||||
let bool = checkedObj.hasOwnProperty(rowKey);
|
||||
|
|
Loading…
Reference in New Issue