diff --git a/demo/demolist/Demo21.js b/demo/demolist/Demo21.js index 25701f2..4a9c22a 100644 --- a/demo/demolist/Demo21.js +++ b/demo/demolist/Demo21.js @@ -9,6 +9,7 @@ import React, { Component } from 'react'; import Table from '../../src'; import filterColumn from '../../src/lib/filterColumn'; +import sum from '../../src/lib/sum'; import Icon from "bee-icon"; const columns21 = [ @@ -29,6 +30,7 @@ const columns21 = [ dataIndex: "c", key: "c", width: 200, + sumCol: true, sorter: (a, b) => a.c - b.c }, { @@ -44,7 +46,7 @@ const data21 = [ { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" } ]; -const FilterColumnTable = filterColumn(Table); +const FilterColumnTable = filterColumn(sum(Table)); const defaultProps21 = { prefixCls: "bee-table" diff --git a/package.json b/package.json index 84010eb..46af7e9 100644 --- a/package.json +++ b/package.json @@ -47,9 +47,8 @@ }, "dependencies": { "bee-loading": "^1.0.3", - "bee-popconfirm": "^1.0.2", "bee-popover": "^1.0.2", - "bee-select": "file:///Users/jony/workspaces/yonyou/component/bee-select", + "bee-select": "^1.0.8", "classnames": "^2.2.5", "object-path": "^0.11.3", "shallowequal": "^1.0.2", diff --git a/src/Table.scss b/src/Table.scss index 5d7522d..2abb981 100644 --- a/src/Table.scss +++ b/src/Table.scss @@ -469,4 +469,29 @@ $table-move-in-color: $bg-color-base; right: 3px; width: 30px; height: 30px; +} + +.pop .u-modal-dialog{ + border: 1px solid #ccc; + background: #fff; +} +.clear-setting{ + border-bottom: 1px solid #ccc; + cursor: pointer; +} +.pop-cont{ + margin: 10px; + margin-top: 0px; +} +.item{ + margin-top: 10px; + line-height: 30px; + cursor: pointer; +} +.item>span{ + margin-left: 5px; + width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } \ No newline at end of file diff --git a/src/lib/filterColumn.js b/src/lib/filterColumn.js index a00b583..48438b8 100644 --- a/src/lib/filterColumn.js +++ b/src/lib/filterColumn.js @@ -1,58 +1,111 @@ import React, { Component } from "react"; -import Icon from "bee-icon"; -import Popconfirm from "bee-popconfirm"; +import Icon from "bee-icon"; import Checkbox from "bee-checkbox"; +import ReactDOM from 'react-dom'; +import Popover from 'bee-popover'; /** * 参数: 过滤表头 * @param {*} Table */ + + export default function filterColumn(Table) { return class filterColumn extends Component { - // static propTypes = { - // showFilterColumn:PropTypes.boolen,//是否需要过滤表头 - // } - constructor(props) { super(props); - // this.state = { - // sortOrder: "", - // data: this.props.data - // }; - } - // componentWillReceiveProps(nextProps){ - // if(nextProps.data !== this.props.data){ - // this.setState({ - // sortOrder: "", - // data: nextProps.data, - // oldData: nextProps.data.concat(), - // }); - // } - // } - - getColumItem=()=>{ - const {columns,data} = this.props; - debugger; - columns.map((da,i)=>(
-
-
111
-
)); + const {columns} = props; + let _column = []; + Object.assign(_column,columns); + _column.forEach(da => { + da.checked = true; + da.disable = true; + }); + this.state = { + columns:_column, + showModal:false, + width:props.width?props.width:150, + screenX:0, + screenY:0 + }; } + getShowModal=(event)=>{ + let {showModal} = this.state; + if(showModal){ + this.setState({ + showModal:false + }) + } + } + + checkedColumItemClick = (da)=>{ + let {columns} = this.state; + da.checked = da.checked?false:true; + da.disable = da.checked?true:false; + this.setState({ + ...this.state + }) + } + + openCloumList = (ev)=>{ + let oEvent=ev||event; + this.setState({ + screenX:oEvent.clientX, + screenY:oEvent.clientY, + showModal:true + }); + } + + getCloumItem=()=>{ + const {columns} = this.state; + return columns.map((da,i)=> (
{this.checkedColumItemClick(da)}}> + + {da.title} +
)) + } + + clear=()=>{ + const {columns} = this.state; + // let _chek = columns[0].checked?false:true; + columns.forEach(da => { + da.checked = true; + da.disable = true; + }); + this.setState({ + ...this.state + }) + } render() { - const {columns,data} = this.props; - return
- -
+ const {data} = this.props; + const {columns,showModal,width,screenX,screenY} = this.state; + let _columns = []; + columns.forEach((da)=>{ + if(da.disable){ + _columns.push(da); + } + }); - - 清除设置 -
- ssss -
-
+ let content = ( +
+ 清除设置 +
+ { + this.getCloumItem() + } +
+
); + + return
+
+ +
+
; } };