add:完善过滤列的示例,增加排除&全选组合.

This commit is contained in:
kvkens 2018-10-09 19:56:19 +08:00
parent 2272b3865f
commit af15dc9b61
8 changed files with 1386 additions and 1425 deletions

View File

@ -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

8
dist/demo.css vendored
View File

@ -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 {

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

2713
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -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{

View File

@ -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);