add:表格过滤行数据以及下拉、日期、文本输入类型条件.

demo/demolist/Demo26.js

@@ -0,0 +1,99 @@
+/**
+*
+* @title 按条件和值过滤
+* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+
+
+const columns26 = [
+  { title: "姓名", width: 150, dataIndex: "name", key: "name", filterType: "text" },
+  { title: "年龄", width: 100, dataIndex: "age", key: "age", filterType: "dropdown" },
+  { title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date" },
+  { title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "text" },
+  { title: "备注", dataIndex: "mark", key: "mark" }
+];
+
+const data26 = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    date: "2018-09-18 09:46:44",
+    address: "朝阳区",
+    mark: "无"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18 09:46:44",
+    address: "朝阳区",
+    mark: "无"
+  },
+  {
+    key: "3",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18 09:46:44",
+    address: "东城区",
+    mark: "无"
+  },
+  {
+    key: "4",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18 09:46:44",
+    address: "东城区",
+    mark: "无"
+  }, {
+    key: "5",
+    name: "John Brown",
+    age: 32,
+    date: "2018-09-18 09:46:44",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "6",
+    name: "Jim Green",
+    age: 48,
+    date: "2018-09-18 09:46:44",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "7",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18 09:46:44",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "8",
+    name: "Jim Green",
+    age: 38,
+    date: "2018-09-18 09:46:44",
+    address: "海淀区",
+    mark: "无"
+  }
+];
+
+class Demo6 extends Component {
+  handlerFilterRowsChange = (key, val) => {
+    console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
+  }
+  handlerFilterRowsDropChange = (key, val) => {
+    console.log('过滤条件类型:', key, val);
+  }
+  render() {
+    return <Table onFilterRowsDropChange={this.handlerFilterRowsDropChange} onFilterRowsChange={this.handlerFilterRowsChange} filterable={true} bordered columns={columns26} data={data26} />;
+  }
+}
+
+export default Demo6;

dist/demo.css

@@ -8545,6 +8545,8 @@ ul {
     box-shadow: none; }
   .u-table-scroll-position-right .u-table-fixed-right {
     box-shadow: none; }
+  .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
+    font-weight: normal; }
   .u-table-thead th {
     background: #f7f7f7;
     overflow: hidden;

package.json

@@ -47,13 +47,16 @@
  },
  "dependencies": {
   "bee-dnd": "^1.0.2",
+  "bee-dropdown": "^1.0.1",
   "bee-loading": "^1.0.3",
+  "bee-menus": "^1.0.7",
   "bee-popover": "^1.0.2",
   "bee-select": "^1.0.8",
   "classnames": "^2.2.5",
   "lodash.clonedeep": "^4.5.0",
   "object-path": "^0.11.3",
   "shallowequal": "^1.0.2",
+  "throttle-debounce": "^2.0.1",
   "tinper-bee-core": "latest",
   "warning": "^3.0.0"
  },

src/FilterType.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import FormControl from 'bee-form-control';
+import Button from 'bee-button';
+import Icon from 'bee-icon';
+import Select from 'bee-select';
+import DatePicker from 'bee-datepicker';
+import Menu from 'bee-menus';
+import Dropdown from 'bee-dropdown';
+const { Item } = Menu;
+const format = "YYYY-MM-DD dddd";
+
+class FilterType extends Component {
+    renderControl = (rendertype) => {
+        switch (rendertype) {
+            case 'text':
+                const dropmenu = (
+                    <Menu
+                        onSelect={this.props.onSelectDropdown}
+                    >
+                        <Item key="1">等于</Item>
+                        <Item key="2">包含</Item>
+                        <Item key="3">以结尾</Item>
+                        <Item key="4">空</Item>
+                        <Item key="5">不等于</Item>
+                        <Item key="6">不包含</Item>
+                        <Item key="7">以开始</Item>
+                    </Menu>
+                );
+                return <div><FormControl
+                    className={this.props.className}
+                    onChange={this.props.onChange}
+                    style={{ width: "70%" }}
+                />
+                    <Dropdown
+                        trigger={['click']}
+                        overlay={dropmenu}
+                        animation="slide-up"
+                    >
+                        <Button shape="border" style={{ marginLeft: "5px", minWidth: "26px", width: "26px", padding: 0, marginBottom: "4px" }}><Icon style={{ padding: 0 }} type="uf-arrow-c-o-down" /></Button>
+                    </Dropdown>
+                </div>
+            case 'dropdown':
+                return <Select
+                    {...this.props}
+                />
+            case 'date':
+                return <DatePicker
+                    {...this.props}
+                />
+            default:
+                break;
+        }
+
+    }
+    render() {
+        let { rendertype } = this.props;
+        return (
+            this.renderControl(rendertype)
+        );
+    }
+}
+
+export default FilterType;

src/Table.js

@@ -256,7 +256,7 @@ class Table extends Component{
   }
 
   getHeader(columns, fixed) {
-    const { showHeader, expandIconAsCell, clsPrefix ,onDragStart,onDragEnter,onDragOver,onDrop,draggable,
+    const { onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
       onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight } = this.props;
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
@@ -288,11 +288,15 @@ class Table extends Component{
         contentTable={this.contentTable}
         rowStyle={trStyle}
         fixed={fixed}
+        filterable={filterable}
+        onFilterRowsChange={onFilterRowsChange}
+        onFilterRowsDropChange={onFilterRowsDropChange}
       />
     ) : null;
   }
 
   getHeaderRows(columns, currentRow = 0, rows) {
+    let filterCol = [];
     rows = rows || [];
     rows[currentRow] = rows[currentRow] || [];
 
@@ -325,7 +329,22 @@ class Table extends Component{
       if (cell.colSpan !== 0) {
         rows[currentRow].push(cell);
       }
+      //判断是否启用过滤
+      if (this.props.filterable) {
+        //组装Filter需要的Col
+        filterCol.push({
+          key: column.key,
+          children: "过滤渲染",
+          width: column.width,
+          filtertype: column.filterType,
+          dataindex: column.dataIndex,
+          datasource: this.props.data
         });
+      }
+    });
+    if (this.props.filterable) {
+      rows.push(filterCol);
+    }
     return rows.filter(row => row.length > 0);
   }
 

src/Table.scss

@@ -272,7 +272,9 @@ $table-move-in-color: $bg-color-base;
   }
 
   &-thead{
-
+    .filter-text,.filter-dropdown,.filter-date {
+      font-weight: normal;
+    }
     th{
       background: $table-head-background-color;
       overflow: hidden;

src/TableHeader.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import shallowequal from 'shallowequal';
+import { throttle, debounce } from 'throttle-debounce';
 import { tryParseInt, ObjectAssign } from './utils';
+import FilterType from './FilterType';
 
 const propTypes = {
   clsPrefix: PropTypes.string,
@@ -197,12 +199,74 @@ class TableHeader extends Component{
       //4、设置overflow属性
 
     }
+  }
 
-
+  /**
+   * @description 过滤输入后的回调函数
+   */
+  handlerFilterTextChange = (key, val) => {
+    let { onFilterRowsChange } = this.props;
+    if (onFilterRowsChange) {
+      onFilterRowsChange(key, val);
+    }
+  }
+  /**
+   * @description 过滤输入后的回调函数
+   */
+  handlerFilterDropChange = (key, val) => {
+    let { onFilterRowsDropChange } = this.props;
+    if (onFilterRowsDropChange) {
+      onFilterRowsDropChange(key, val.key);
+    }
+  }
+  /**
+   * @description 过滤渲染的组件类型
+   */
+  filterRenderType = (type, dataIndex, index) => {
+    const { clsPrefix, rows } = this.props;
+    switch (type) {
+      //文本输入
+      case 'text':
+        return <FilterType
+          rendertype={type}
+          className={`${clsPrefix} filter-text`}
+          onChange={debounce(500, this.handlerFilterTextChange.bind(this, dataIndex))}
+          onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
+        />
+      //下拉框选择
+      case 'dropdown':
+        let selectDataSource = [];
+        if (rows.length > 0) {
+          let hash = {};
+          //处理下拉重复对象组装dropdown
+          selectDataSource = Array.from(rows[1][0].datasource, x => ({ key: x[dataIndex], value: x[dataIndex] }));
+          selectDataSource = selectDataSource.reduceRight((item, next) => {
+            hash[next.key] ? '' : hash[next.key] = true && item.push(next);
+            return item
+          }, []);
+        }
+        return <FilterType
+          rendertype={type}
+          className={`${clsPrefix} filter-dropdown`}
+          data={selectDataSource}
+          onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
+        />
+      //日期
+      case 'date':
+        return <FilterType
+          rendertype={type}
+          className={`${clsPrefix} filter-date`}
+          onClick={() => { }}
+          onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
+        />
+      default:
+        //不匹配类型默认文本输入
+        return <div></div>
+    }
   }
 
   render() {
-    const { clsPrefix, rowStyle ,onDragStart,onDragOver,onDrop,draggable,rows,
+    const { clsPrefix, rowStyle, onDragStart, onDragOver, onDrop, draggable, rows, filterable, onFilterRowsChange,
       onMouseDown, onMouseMove, onMouseUp, dragborder, onMouseOut, contentWidthDiff, fixed, lastShowIndex
     } = this.props;
     let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {}
@@ -248,7 +312,13 @@ class TableHeader extends Component{
                       className={`${clsPrefix}-thead-th-drag-gap `}></div>
                   </th>)
                 } else {
-                  let th = da.onClick?(<th {...da} className={` ${fixedStyle}`} key={i} onClick={(event)=>{da.onClick(da,event)}}/>):(<th {...da} key={i} className={` ${fixedStyle}`} />);
+                  let th;
+                  if (filterable && index == rows.length - 1) {
+                    da.children = this.filterRenderType(da['filtertype'], da.dataindex, i);
+                    th = <th {...da} key={i} className={` ${fixedStyle}`} />;
+                  } else {
+                    th = da.onClick ? (<th {...da} className={` ${fixedStyle}`} key={i} onClick={(event) => { da.onClick(da, event) }} />) : (<th {...da} key={i} className={` ${fixedStyle}`} />);
+                  }
                   return (th);
                 }
               })}