This commit is contained in:
jonyshi
commit
c550eed127
47
CHANGELOG.md
47
CHANGELOG.md
|
|
@ -1,3 +1,43 @@
|
|||
<a name="1.5.8"></a>
|
||||
## [1.5.8](https://github.com/tinper-bee/bee-table/compare/v1.5.7...v1.5.8) (2018-11-22)
|
||||
|
||||
|
||||
|
||||
<a name="1.5.7"></a>
|
||||
## [1.5.7](https://github.com/tinper-bee/bee-table/compare/v1.5.6...v1.5.7) (2018-11-21)
|
||||
|
||||
|
||||
|
||||
<a name="1.5.6"></a>
|
||||
## [1.5.6](https://github.com/tinper-bee/bee-table/compare/v1.5.5...v1.5.6) (2018-11-21)
|
||||
|
||||
|
||||
|
||||
<a name="1.5.5"></a>
|
||||
## [1.5.5](https://github.com/tinper-bee/bee-table/compare/v1.5.4...v1.5.5) (2018-11-20)
|
||||
|
||||
|
||||
|
||||
<a name="1.5.4"></a>
|
||||
## [1.5.4](https://github.com/tinper-bee/bee-table/compare/v1.5.3...v1.5.4) (2018-11-19)
|
||||
|
||||
|
||||
|
||||
<a name="1.5.3"></a>
|
||||
## [1.5.3](https://github.com/tinper-bee/bee-table/compare/v1.5.2...v1.5.3) (2018-11-19)
|
||||
|
||||
|
||||
|
||||
<a name="1.5.2"></a>
|
||||
## [1.5.2](https://github.com/tinper-bee/bee-table/compare/v1.5.1...v1.5.2) (2018-11-19)
|
||||
|
||||
|
||||
|
||||
<a name="1.5.1"></a>
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
|
||||
|
||||
|
||||
|
||||
<a name="1.5.0"></a>
|
||||
# [1.5.0](https://github.com/tinper-bee/bee-table/compare/v1.4.39...v1.5.0) (2018-11-16)
|
||||
|
||||
|
|
@ -279,12 +319,7 @@
|
|||
|
||||
|
||||
<a name="1.2.9"></a>
|
||||
## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.8...v1.2.9) (2018-07-16)
|
||||
|
||||
|
||||
|
||||
<a name="1.2.8"></a>
|
||||
## [1.2.8](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.8) (2018-07-06)
|
||||
## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.9) (2018-07-16)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -278,9 +278,7 @@ var Table = function (_Component) {
|
|||
|
||||
//如果用户传了scroll.x按用户传的为主
|
||||
var setWidthParam = this.props.scroll.x;
|
||||
var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
|
||||
var lastShowIndex = computeObj.lastShowIndex;
|
||||
this.computeWidth = computeObj.computeWidth;
|
||||
|
||||
if (typeof setWidthParam == 'number') {
|
||||
var numSetWidthParam = parseInt(setWidthParam);
|
||||
this.contentWidth = numSetWidthParam;
|
||||
|
|
@ -290,10 +288,15 @@ var Table = function (_Component) {
|
|||
this.contentDomWidth = this.contentTable.getBoundingClientRect().width; //表格容器宽度
|
||||
|
||||
this.contentWidth = this.contentDomWidth; //默认与容器宽度一样
|
||||
this.domWidthDiff = this.contentDomWidth - this.computeWidth;
|
||||
if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
|
||||
this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
|
||||
}
|
||||
}
|
||||
var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
|
||||
var lastShowIndex = computeObj.lastShowIndex;
|
||||
this.computeWidth = computeObj.computeWidth;
|
||||
|
||||
this.domWidthDiff = this.contentDomWidth - this.computeWidth;
|
||||
if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
|
||||
this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
|
||||
this.domWidthDiff = this.contentDomWidth - this.contentWidth;
|
||||
}
|
||||
|
||||
if (this.computeWidth < this.contentWidth) {
|
||||
|
|
@ -380,7 +383,9 @@ var Table = function (_Component) {
|
|||
dragborderKey = _props.dragborderKey,
|
||||
minColumnWidth = _props.minColumnWidth,
|
||||
headerHeight = _props.headerHeight,
|
||||
afterDragColWidth = _props.afterDragColWidth;
|
||||
afterDragColWidth = _props.afterDragColWidth,
|
||||
headerScroll = _props.headerScroll,
|
||||
bordered = _props.bordered;
|
||||
|
||||
var rows = this.getHeaderRows(columns);
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
|
|
@ -415,7 +420,11 @@ var Table = function (_Component) {
|
|||
onFilterRowsChange: onFilterRowsChange,
|
||||
onFilterRowsDropChange: onFilterRowsDropChange,
|
||||
filterDelay: filterDelay,
|
||||
afterDragColWidth: afterDragColWidth
|
||||
afterDragColWidth: afterDragColWidth,
|
||||
contentDomWidth: this.contentDomWidth,
|
||||
scrollbarWidth: this.scrollbarWidth,
|
||||
headerScroll: headerScroll,
|
||||
bordered: bordered
|
||||
})) : null;
|
||||
};
|
||||
|
||||
|
|
@ -682,7 +691,7 @@ var Table = function (_Component) {
|
|||
} else if (width) {
|
||||
width = parseInt(width);
|
||||
}
|
||||
if (lastShowIndex == i) {
|
||||
if (lastShowIndex == i && width) {
|
||||
width = width + contentWidthDiff;
|
||||
}
|
||||
|
||||
|
|
@ -799,8 +808,8 @@ var Table = function (_Component) {
|
|||
}
|
||||
}
|
||||
// 自动出现滚动条
|
||||
if (_this3.contentDomWidth > _this3.contentWidth) {
|
||||
tableStyle.width = _this3.contentDomWidth;
|
||||
if (!fixed && _this3.contentDomWidth < _this3.contentWidth) {
|
||||
tableStyle.width = _this3.contentWidth;
|
||||
}
|
||||
var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
|
||||
'tbody',
|
||||
|
|
|
|||
|
|
@ -198,7 +198,11 @@ var TableHeader = function (_Component) {
|
|||
|
||||
var _this$props3 = _this.props,
|
||||
dragborderKey = _this$props3.dragborderKey,
|
||||
contentTable = _this$props3.contentTable;
|
||||
contentTable = _this$props3.contentTable,
|
||||
headerScroll = _this$props3.headerScroll,
|
||||
contentDomWidth = _this$props3.contentDomWidth,
|
||||
scrollbarWidth = _this$props3.scrollbarWidth,
|
||||
bordered = _this$props3.bordered;
|
||||
|
||||
var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
|
||||
var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
|
||||
|
|
@ -262,6 +266,26 @@ var TableHeader = function (_Component) {
|
|||
colDomArr[_this.drag.currIndex].style.width = newWidth + "px";
|
||||
//4、设置overflow属性
|
||||
}
|
||||
|
||||
//表头需要显示滚动条时，需兼容含有固定列
|
||||
if (headerScroll) {
|
||||
|
||||
var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
|
||||
if (bordered) {
|
||||
showScroll = showScroll - 1;
|
||||
}
|
||||
var fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
|
||||
var fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
|
||||
if (showScroll < 0) {
|
||||
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
|
||||
|
||||
fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
|
||||
fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
|
||||
} else {
|
||||
fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
|
||||
fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_this.handlerFilterTextChange = function (key, val) {
|
||||
|
|
@ -434,7 +458,8 @@ var TableHeader = function (_Component) {
|
|||
onMouseOut = _props.onMouseOut,
|
||||
contentWidthDiff = _props.contentWidthDiff,
|
||||
fixed = _props.fixed,
|
||||
lastShowIndex = _props.lastShowIndex;
|
||||
lastShowIndex = _props.lastShowIndex,
|
||||
contentTable = _props.contentTable;
|
||||
|
||||
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
|
||||
|
||||
|
|
@ -491,6 +516,17 @@ var TableHeader = function (_Component) {
|
|||
_this2.ableOnMouseMove(e, da);
|
||||
},
|
||||
onMouseDown: function onMouseDown(e) {
|
||||
//避免表头其他元素对其影响
|
||||
var filterDom = contentTable.querySelector('.filterable');
|
||||
//是否是过滤行元素，是的话不触发
|
||||
var isFilterDom = filterDom ? filterDom.contains(e.target) : false;
|
||||
|
||||
if (e.target.classList.contains('uf') || isFilterDom) {
|
||||
return;
|
||||
}
|
||||
if (e.target.classList.contains('uf')) {
|
||||
return;
|
||||
}
|
||||
var _state2 = _this2.state,
|
||||
dragAbleOrBord = _state2.dragAbleOrBord,
|
||||
dragAbleOrBordStart = _state2.dragAbleOrBordStart;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,195 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports["default"] = newMultiSelect;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _beeCheckbox = require('bee-checkbox');
|
||||
|
||||
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
|
||||
|
||||
var _util = require('./util');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
/**
|
||||
* 参数: 过滤表头
|
||||
* @param {*} Table
|
||||
* @param {*} Checkbox
|
||||
* @param {*} Popover
|
||||
* @param {*} Icon
|
||||
*/
|
||||
|
||||
function newMultiSelect(Table, Checkbox) {
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
return _temp = _class = function (_Component) {
|
||||
_inherits(NewMultiSelect, _Component);
|
||||
|
||||
function NewMultiSelect(props) {
|
||||
_classCallCheck(this, NewMultiSelect);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_initialiseProps.call(_this);
|
||||
|
||||
var checkedAll = _this.setChecked(props.data);
|
||||
_this.state = {
|
||||
checkedAll: checkedAll,
|
||||
data: (0, _util.ObjectAssign)(props.data)
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (this.props.data != nextProps.data) {
|
||||
this.setState({
|
||||
data: (0, _util.ObjectAssign)(nextProps.data),
|
||||
checkedAll: this.setChecked(nextProps.data)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
NewMultiSelect.prototype.setChecked = function setChecked(data) {
|
||||
var allCheck = true;
|
||||
if (data) {
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var da = _step.value;
|
||||
|
||||
if (!da._checked) {
|
||||
allCheck = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator["return"]) {
|
||||
_iterator["return"]();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return allCheck;
|
||||
};
|
||||
|
||||
NewMultiSelect.prototype.render = function render() {
|
||||
var columns = this.props.columns;
|
||||
var data = this.state.data;
|
||||
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
|
||||
};
|
||||
|
||||
return NewMultiSelect;
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
prefixCls: "u-table-mult-select"
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
|
||||
this.onAllCheckChange = function () {
|
||||
var _state = _this2.state,
|
||||
data = _state.data,
|
||||
checkedAll = _state.checkedAll;
|
||||
|
||||
var selectList = [];
|
||||
var check = checkedAll ? false : true;
|
||||
data.forEach(function (item) {
|
||||
item._checked = check;
|
||||
if (item._checked) {
|
||||
selectList.push(item);
|
||||
}
|
||||
});
|
||||
_this2.setState({
|
||||
checkedAll: check
|
||||
});
|
||||
_this2.props.getSelectedDataFunc(selectList);
|
||||
};
|
||||
|
||||
this.handleClick = function () {};
|
||||
|
||||
this.onCheckboxChange = function (text, record, index) {
|
||||
return function () {
|
||||
var data = _this2.state.data;
|
||||
|
||||
var selectList = [];
|
||||
record._checked = record._checked ? false : true;
|
||||
var checkedAll = true;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var item = data[i];
|
||||
if (!item._checked || item._checked == false) {
|
||||
checkedAll = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
_this2.setState(_extends({}, _this2.state, {
|
||||
checkedAll: checkedAll
|
||||
}));
|
||||
data.forEach(function (da) {
|
||||
if (da._checked) {
|
||||
selectList.push(da);
|
||||
}
|
||||
});
|
||||
_this2.props.getSelectedDataFunc(selectList, record, index);
|
||||
};
|
||||
};
|
||||
|
||||
this.getDefaultColumns = function (columns) {
|
||||
// let checkedAll = init?false:this.state.checkedAll;
|
||||
var checkedAll = _this2.state.checkedAll;
|
||||
|
||||
var _defaultColumns = [{
|
||||
title: _react2["default"].createElement(Checkbox, {
|
||||
className: 'table-checkbox',
|
||||
checked: checkedAll
|
||||
// indeterminate={indeterminate_bool && !this.state.checkedAll}
|
||||
, onChange: _this2.onAllCheckChange
|
||||
}),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
fixed: "left",
|
||||
width: 50,
|
||||
render: function render(text, record, index) {
|
||||
var attr = {};
|
||||
record._disabled ? attr.disabled = record._disabled : "";
|
||||
return _react2["default"].createElement(Checkbox, _extends({
|
||||
key: index,
|
||||
className: 'table-checkbox'
|
||||
}, attr, {
|
||||
checked: record._checked,
|
||||
onClick: _this2.handleClick,
|
||||
onChange: _this2.onCheckboxChange(text, record, index)
|
||||
}));
|
||||
}
|
||||
}];
|
||||
return _defaultColumns.concat(columns);
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||
@import "../node_modules/bee-message/build/Message.css";
|
||||
@import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||
@import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||
@import "../src/Table.scss";
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -149,15 +149,31 @@ class Demo27 extends Component {
|
|||
</Dropdown>
|
||||
}
|
||||
},
|
||||
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
|
||||
{
|
||||
title: "姓名",
|
||||
width: 180,
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
filterType: "text",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "string"//字符条件
|
||||
},
|
||||
{
|
||||
title: "区间",
|
||||
width: 200,
|
||||
dataIndex: "mark",
|
||||
key: "mark",
|
||||
filterType: "number",//输入框类型
|
||||
filterDropdownType: "number"//数值类条件
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
width: 150,
|
||||
width: 180,
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
filterType: "dropdown",
|
||||
filterDropdown: "hide",
|
||||
filterDropdown: "hide",//不显示条件
|
||||
filterDropdownAuto: "manual",//切换手动传入模式
|
||||
filterDropdownData: this.state.dropdownvalue,
|
||||
filterDropdownFocus: () => {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,7 @@
|
|||
/* Navlayout */
|
||||
@import url(../node_modules/bee-message/build/Message.css);
|
||||
@import url(../node_modules/bee-dropdown/build/Dropdown.css);
|
||||
@import url(../node_modules/bee-input-number/build/InputNumber.css);
|
||||
.red {
|
||||
color: rgb(244,67,54) !important; }
|
||||
|
||||
|
|
@ -8598,10 +8599,7 @@ ul {
|
|||
.u-table-thead .filter-wrap .filter-btns {
|
||||
min-width: 58px; }
|
||||
.u-table-thead th {
|
||||
background: #f7f7f7;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis; }
|
||||
background: #f7f7f7; }
|
||||
.u-table-thead th .bee-table-column-sorter {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
|
|
@ -8651,16 +8649,26 @@ ul {
|
|||
.u-table-thead-th-drag-gap {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
right: -10px;
|
||||
top: 0;
|
||||
background: #ccc;
|
||||
width: 2px;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; }
|
||||
.u-table-thead-th-drag-gap .online {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: transparent;
|
||||
margin: 0 auto; }
|
||||
.u-table-thead-th-drag-gap .online-hover {
|
||||
background: #000000; }
|
||||
.u-table-thead-th .th-drag-gap {
|
||||
background: transparent; }
|
||||
.u-table-thead-th .th-drag-gap-hover {
|
||||
cursor: col-resize; }
|
||||
.u-table-thead-th .th-drag-gap > div {
|
||||
background: transparent; }
|
||||
.u-table-thead-th .th-drag-gap-hover > div {
|
||||
background: #000000; }
|
||||
.u-table-thead-th:last-child-drag-gap {
|
||||
border: none; }
|
||||
.u-table-filter-column-pop-cont {
|
||||
|
|
|
|||
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
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.5.1",
|
||||
"version": "1.5.8",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -52,6 +52,7 @@
|
|||
"bee-dropdown": "^1.0.1",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "^1.0.5",
|
||||
"bee-input-number": "^1.1.14",
|
||||
"bee-loading": "^1.0.3",
|
||||
"bee-locale": "0.0.11",
|
||||
"bee-menus": "^1.0.7",
|
||||
|
|
@ -92,4 +93,4 @@
|
|||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^15.5.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
/**
|
||||
* 过滤行功能内的下拉条件
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Dropdown from 'bee-dropdown';
|
||||
import Menu from 'bee-menus';
|
||||
import Button from 'bee-button';
|
||||
|
|
@ -7,13 +12,19 @@ import i18n from './i18n';
|
|||
import { getComponentLocale } from 'bee-locale/build/tool';
|
||||
const { Item } = Menu;
|
||||
|
||||
|
||||
class FilterDropDown extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
selectValue: []
|
||||
selectValue: []//选择的条件的值
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 点击下拉菜单
|
||||
*
|
||||
* @param {*} s 选中的selectRecord
|
||||
*/
|
||||
onSelectDropdown = (s) => {
|
||||
let { onSelectDropdown } = this.props;
|
||||
if (onSelectDropdown) {
|
||||
|
|
@ -24,6 +35,11 @@ class FilterDropDown extends Component {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除事件
|
||||
*
|
||||
*/
|
||||
onClickClear = () => {
|
||||
let { onClickClear } = this.props;
|
||||
if (onClickClear) {
|
||||
|
|
@ -34,36 +50,81 @@ class FilterDropDown extends Component {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据props来获得指定的Menu,分为String和Number
|
||||
*
|
||||
* @returns JSX Menu
|
||||
*/
|
||||
getMenu = () => {
|
||||
let { selectValue } = this.state;
|
||||
let { filterDropdownType } = this.props;
|
||||
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectValue}
|
||||
>
|
||||
<Item key="2">{locale['include']}</Item>
|
||||
<Item key="6">{locale['exclusive']}</Item>
|
||||
<Item key="1">{locale['equal']}</Item>
|
||||
<Item key="5">{locale['unequal']}</Item>
|
||||
<Item key="7">{locale['begin']}</Item>
|
||||
<Item key="3">{locale['end']}</Item>
|
||||
</Menu>
|
||||
case 'number':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectValue}
|
||||
>
|
||||
<Item key="1">{locale['greater_than']}</Item>
|
||||
<Item key="2">{locale['great_than_equal_to']}</Item>
|
||||
<Item key="3">{locale['less_than']}</Item>
|
||||
<Item key="4">{locale['less_than_equal_to']}</Item>
|
||||
<Item key="5">{locale['be_equal_to']}</Item>
|
||||
<Item key="6">{locale['not_equal_to']}</Item>
|
||||
</Menu>
|
||||
default:
|
||||
return <div></div>;
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let { isShowCondition } = this.props;
|
||||
|
||||
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
|
||||
|
||||
let dropmenu = (
|
||||
<Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={this.state.selectValue}
|
||||
>
|
||||
<Item key="2">{locale['include']}</Item>
|
||||
<Item key="6">{locale['exclusive']}</Item>
|
||||
<Item key="1">{locale['equal']}</Item>
|
||||
<Item key="5">{locale['unequal']}</Item>
|
||||
<Item key="7">{locale['begin']}</Item>
|
||||
<Item key="3">{locale['end']}</Item>
|
||||
</Menu>
|
||||
);
|
||||
return (<div className="filter-btns">
|
||||
{isShowCondition == 'show' && <Dropdown
|
||||
trigger={['click']}
|
||||
overlay={dropmenu}
|
||||
overlay={this.getMenu()}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Button shape="border" style={{ marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }}><Icon style={{ padding: 0 }} type="uf-filter" /></Button>
|
||||
<Button
|
||||
shape="border"
|
||||
style={{ marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }}
|
||||
>
|
||||
<Icon style={{ padding: 0, color: '#585858' }} type="uf-filter" />
|
||||
</Button>
|
||||
</Dropdown>}
|
||||
<Button onClick={this.onClickClear} shape="border" style={{ marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }}><Icon style={{ padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }} type="uf-filterno" /></Button>
|
||||
<Button
|
||||
onClick={this.onClickClear}
|
||||
shape="border"
|
||||
style={{ marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }}
|
||||
>
|
||||
<Icon style={{ padding: 0, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }} type="uf-filterno" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FilterDropDown.propTypes = {
|
||||
isShowCondition: PropTypes.string,
|
||||
filterDropdownType: PropTypes.oneOf(['string', 'number'])
|
||||
}
|
||||
|
||||
FilterDropDown.defaultProps = {
|
||||
isShowCondition: 'show',
|
||||
filterDropdownType: 'string'
|
||||
}
|
||||
|
||||
export default FilterDropDown;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import FormControl from 'bee-form-control';
|
||||
import Select from 'bee-select';
|
||||
import InputNumber from 'bee-input-number';
|
||||
import DatePicker from 'bee-datepicker';
|
||||
import FilterDropDown from './FilterDropDown';
|
||||
|
||||
|
|
@ -16,7 +17,8 @@ class FilterType extends Component {
|
|||
text: "",
|
||||
selectValue: "",
|
||||
dateValue: "",
|
||||
open: false
|
||||
open: false,
|
||||
number: 0
|
||||
}
|
||||
}
|
||||
//清除文本
|
||||
|
|
@ -27,7 +29,22 @@ class FilterType extends Component {
|
|||
let { onChange } = this.props;
|
||||
onChange && onChange("");
|
||||
}
|
||||
|
||||
//设置数值
|
||||
changeNumber = (number) => {
|
||||
let { onChange } = this.props;
|
||||
onChange && onChange(number);
|
||||
this.setState({
|
||||
number
|
||||
});
|
||||
}
|
||||
//清除数值
|
||||
clearNumber = () => {
|
||||
let { onChange } = this.props;
|
||||
onChange && onChange("");
|
||||
this.setState({
|
||||
number: ""
|
||||
});
|
||||
}
|
||||
//设置文本
|
||||
changeText = (eve) => {
|
||||
this.setState({
|
||||
|
|
@ -84,8 +101,14 @@ class FilterType extends Component {
|
|||
}
|
||||
}
|
||||
//组件渲染
|
||||
/**
|
||||
* 根据不同的类型生成对应的组件类型包含一些参数的适应
|
||||
*
|
||||
* @param {*} rendertype 参数类型，包括['text','dropdown','date','daterange','number']
|
||||
* @returns
|
||||
*/
|
||||
renderControl = (rendertype) => {
|
||||
let { filterDropdown, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
||||
let { filterDropdown, filterDropdownType, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
||||
switch (rendertype) {
|
||||
case 'text':
|
||||
return <div className={`${clsPrefix} filter-wrap`}><FormControl
|
||||
|
|
@ -102,6 +125,24 @@ class FilterType extends Component {
|
|||
onClickClear={this.clearText}
|
||||
isShowClear={this.state.text}
|
||||
isShowCondition={filterDropdown}
|
||||
filterDropdownType={filterDropdownType}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
case 'number':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<InputNumber
|
||||
className={className}
|
||||
value={this.state.number}
|
||||
onChange={this.changeNumber}
|
||||
/>
|
||||
<FilterDropDown
|
||||
locale={locale}
|
||||
onSelectDropdown={onSelectDropdown}
|
||||
onClickClear={this.clearNumber}
|
||||
isShowClear={this.state.number}
|
||||
isShowCondition={filterDropdown}
|
||||
filterDropdownType={filterDropdownType}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
@ -144,7 +185,7 @@ class FilterType extends Component {
|
|||
</FilterDropDown>}
|
||||
</div>
|
||||
default:
|
||||
break;
|
||||
return <div></div>;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
43
src/Table.js
43
src/Table.js
|
|
@ -203,9 +203,7 @@ class Table extends Component {
|
|||
|
||||
//如果用户传了scroll.x按用户传的为主
|
||||
let setWidthParam = this.props.scroll.x
|
||||
const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
|
||||
let lastShowIndex = computeObj.lastShowIndex;
|
||||
this.computeWidth = computeObj.computeWidth;
|
||||
|
||||
if (typeof (setWidthParam) == 'number') {
|
||||
let numSetWidthParam = parseInt(setWidthParam);
|
||||
this.contentWidth = numSetWidthParam;
|
||||
|
|
@ -215,10 +213,16 @@ class Table extends Component {
|
|||
this.contentDomWidth = this.contentTable.getBoundingClientRect().width//表格容器宽度
|
||||
|
||||
this.contentWidth = this.contentDomWidth;//默认与容器宽度一样
|
||||
this.domWidthDiff = this.contentDomWidth - this.computeWidth;
|
||||
if (typeof (setWidthParam) == 'string' && setWidthParam.indexOf('%')) {
|
||||
this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100
|
||||
}
|
||||
|
||||
}
|
||||
const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
|
||||
let lastShowIndex = computeObj.lastShowIndex;
|
||||
this.computeWidth = computeObj.computeWidth;
|
||||
|
||||
this.domWidthDiff = this.contentDomWidth - this.computeWidth;
|
||||
if (typeof (setWidthParam) == 'string' && setWidthParam.indexOf('%')) {
|
||||
this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
|
||||
this.domWidthDiff = this.contentDomWidth - this.contentWidth;
|
||||
}
|
||||
|
||||
if (this.computeWidth < this.contentWidth) {
|
||||
|
|
@ -290,7 +294,7 @@ class Table extends Component {
|
|||
|
||||
getHeader(columns, fixed) {
|
||||
const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
|
||||
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth } = this.props;
|
||||
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered} = this.props;
|
||||
const rows = this.getHeaderRows(columns);
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
rows[0].unshift({
|
||||
|
|
@ -328,6 +332,10 @@ class Table extends Component {
|
|||
onFilterRowsDropChange={onFilterRowsDropChange}
|
||||
filterDelay={filterDelay}
|
||||
afterDragColWidth = {afterDragColWidth}
|
||||
contentDomWidth={this.contentDomWidth}
|
||||
scrollbarWidth = {this.scrollbarWidth}
|
||||
headerScroll = {headerScroll}
|
||||
bordered = {bordered}
|
||||
/>
|
||||
) : null;
|
||||
}
|
||||
|
|
@ -374,14 +382,15 @@ class Table extends Component {
|
|||
key: column.key,
|
||||
children: "过滤渲染",
|
||||
width: column.width,
|
||||
filtertype: column.filterType,
|
||||
dataindex: column.dataIndex,
|
||||
datasource: this.props.data,
|
||||
format: column.format,
|
||||
filterdropdown: column.filterDropdown,
|
||||
filtertype: column.filterType,//下拉的类型 包括['text','dropdown','date','daterange','number']
|
||||
dataindex: column.dataIndex,//field
|
||||
datasource: this.props.data,//需要单独拿到数据处理
|
||||
format: column.format,//设置日期的格式
|
||||
filterdropdown: column.filterDropdown,//是否显示 show hide
|
||||
filterdropdownauto: column.filterDropdownAuto,//是否自定义数据
|
||||
filterdropdowndata: column.filterDropdownData,//自定义数据格式
|
||||
filterdropdownfocus: column.filterDropdownFocus//焦点触发函数回调
|
||||
filterdropdownfocus: column.filterDropdownFocus,//焦点触发函数回调
|
||||
filterdropdowntype: column.filterDropdownType//下拉的类型分为 String,Number 默认是String
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -588,7 +597,7 @@ class Table extends Component {
|
|||
} else if (width) {
|
||||
width = parseInt(width);
|
||||
}
|
||||
if (lastShowIndex == i) {
|
||||
if (lastShowIndex == i && width) {
|
||||
width = width + contentWidthDiff;
|
||||
}
|
||||
|
||||
|
|
@ -703,8 +712,8 @@ class Table extends Component {
|
|||
}
|
||||
}
|
||||
// 自动出现滚动条
|
||||
if (this.contentDomWidth > this.contentWidth) {
|
||||
tableStyle.width = this.contentDomWidth;
|
||||
if ( !fixed && this.contentDomWidth < this.contentWidth) {
|
||||
tableStyle.width = this.contentWidth;
|
||||
}
|
||||
const tableBody = hasBody ? getBodyWrapper(
|
||||
<tbody className={`${clsPrefix}-tbody`}>
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@ class TableHeader extends Component {
|
|||
if (!this.border) return;
|
||||
//固定表头拖拽
|
||||
|
||||
const { dragborderKey, contentTable } = this.props;
|
||||
const { dragborderKey, contentTable,headerScroll ,contentDomWidth,scrollbarWidth,bordered} = this.props;
|
||||
let x = event.pageX - this.drag.initPageLeftX + this.drag.initLeft - 0;
|
||||
let contentTableDom = document.getElementById(
|
||||
"u-table-drag-thead-" + this.theadKey
|
||||
|
|
@ -280,6 +280,26 @@ class TableHeader extends Component {
|
|||
colDomArr[this.drag.currIndex].style.width = newWidth + "px";
|
||||
//4、设置overflow属性
|
||||
}
|
||||
|
||||
//表头需要显示滚动条时，需兼容含有固定列
|
||||
if(headerScroll){
|
||||
|
||||
let showScroll = contentDomWidth - newTableWidth - scrollbarWidth ;
|
||||
if(bordered){
|
||||
showScroll = showScroll -1;
|
||||
}
|
||||
const fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
|
||||
const fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
|
||||
if(showScroll < 0){
|
||||
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
|
||||
|
||||
fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
|
||||
fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
|
||||
}else{
|
||||
fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
|
||||
fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -324,6 +344,27 @@ class TableHeader extends Component {
|
|||
dataIndex
|
||||
)}
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
/>
|
||||
);
|
||||
//数值输入
|
||||
case "number":
|
||||
return (
|
||||
<FilterType
|
||||
locale={locale}
|
||||
rendertype={type}
|
||||
clsPrefix={clsPrefix}
|
||||
className={`${clsPrefix} filter-text`}
|
||||
onChange={debounce(
|
||||
filterDelay || 300,
|
||||
this.handlerFilterTextChange.bind(this, dataIndex)
|
||||
)}
|
||||
onSelectDropdown={this.handlerFilterDropChange.bind(
|
||||
this,
|
||||
dataIndex
|
||||
)}
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
/>
|
||||
);
|
||||
//下拉框选择
|
||||
|
|
@ -359,6 +400,7 @@ class TableHeader extends Component {
|
|||
)}
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
onFocus={rows[1][index]["filterdropdownfocus"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
/>
|
||||
);
|
||||
//日期
|
||||
|
|
@ -376,6 +418,7 @@ class TableHeader extends Component {
|
|||
dataIndex
|
||||
)}
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
/>
|
||||
);
|
||||
default:
|
||||
|
|
@ -403,7 +446,8 @@ class TableHeader extends Component {
|
|||
onMouseOut,
|
||||
contentWidthDiff,
|
||||
fixed,
|
||||
lastShowIndex
|
||||
lastShowIndex,
|
||||
contentTable
|
||||
} = this.props;
|
||||
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
|
||||
|
||||
|
|
@ -457,6 +501,17 @@ class TableHeader extends Component {
|
|||
onDragEnter:(e)=>{this.onDragEnter(e, da)},
|
||||
onMouseMove:(e)=>{this.ableOnMouseMove(e, da)},
|
||||
onMouseDown:(e)=>{
|
||||
//避免表头其他元素对其影响
|
||||
const filterDom = contentTable.querySelector('.filterable');
|
||||
//是否是过滤行元素，是的话不触发
|
||||
const isFilterDom =filterDom ?filterDom.contains(e.target):false;
|
||||
|
||||
if(e.target.classList.contains('uf') ||isFilterDom){
|
||||
return;
|
||||
}
|
||||
if(e.target.classList.contains('uf')){
|
||||
return;
|
||||
}
|
||||
let {dragAbleOrBord,dragAbleOrBordStart} = this.state;
|
||||
this.setState({
|
||||
dragAbleOrBordStart:dragAbleOrBord==="able"?"ableStart":""
|
||||
|
|
|
|||
18
src/i18n.js
18
src/i18n.js
|
|
@ -7,6 +7,12 @@ module.exports = {
|
|||
'unequal':'不等于',
|
||||
'begin':'以开始',
|
||||
'end':'以结尾',
|
||||
'greater_than':'大于',
|
||||
'great_than_equal_to':'大于等于',
|
||||
'less_than':'小于',
|
||||
'less_than_equal_to':'小于等于',
|
||||
'be_equal_to':'等于',
|
||||
'not_equal_to':'不等于',
|
||||
'en-us': {
|
||||
'resetSettings': 'reset settings',
|
||||
'include': 'include',
|
||||
|
|
@ -15,6 +21,12 @@ module.exports = {
|
|||
'unequal':'unequal',
|
||||
'begin':'begin',
|
||||
'end':'end',
|
||||
'greater_than':'greater than',
|
||||
'great_than_equal_to':'great than equal to',
|
||||
'less_than':'less than',
|
||||
'less_than_equal_to':'less than equal to',
|
||||
'be_equal_to':'be equal to',
|
||||
'not_equal_to':'not equal to',
|
||||
},
|
||||
'zh-tw': {
|
||||
'resetSettings': '還原設置',
|
||||
|
|
@ -24,5 +36,11 @@ module.exports = {
|
|||
'unequal':'不等於',
|
||||
'begin':'以開始',
|
||||
'end':'以結尾',
|
||||
'greater_than':'大於',
|
||||
'great_than_equal_to':'大於等於',
|
||||
'less_than':'小於',
|
||||
'less_than_equal to':'小於等於',
|
||||
'be_equal_to':'等於',
|
||||
'not_equal_to':'不等於'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
import React, { Component } from "react";
|
||||
import Checkbox from 'bee-checkbox';
|
||||
import {ObjectAssign} from './util';
|
||||
/**
|
||||
* 参数: 过滤表头
|
||||
* @param {*} Table
|
||||
* @param {*} Checkbox
|
||||
* @param {*} Popover
|
||||
* @param {*} Icon
|
||||
*/
|
||||
|
||||
export default function newMultiSelect(Table, Checkbox) {
|
||||
|
||||
return class NewMultiSelect extends Component {
|
||||
static defaultProps = {
|
||||
prefixCls: "u-table-mult-select"
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
let checkedAll = this.setChecked(props.data);
|
||||
this.state = {
|
||||
checkedAll,
|
||||
data:ObjectAssign(props.data),
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
if(this.props.data != nextProps.data){
|
||||
this.setState({
|
||||
data:ObjectAssign(nextProps.data),
|
||||
checkedAll:this.setChecked(nextProps.data),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
setChecked(data){
|
||||
let allCheck = true;
|
||||
if(data){
|
||||
for (const da of data) {
|
||||
if(!da._checked){
|
||||
allCheck = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return allCheck;
|
||||
}
|
||||
|
||||
onAllCheckChange=()=>{
|
||||
let {data,checkedAll} = this.state;
|
||||
let selectList = [];
|
||||
let check = checkedAll?false:true;
|
||||
data.forEach(item => {
|
||||
item._checked = check;
|
||||
if(item._checked){
|
||||
selectList.push(item);
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
checkedAll:check
|
||||
});
|
||||
this.props.getSelectedDataFunc(selectList);
|
||||
}
|
||||
|
||||
handleClick=()=>{
|
||||
|
||||
}
|
||||
|
||||
onCheckboxChange = (text, record, index) => () => {
|
||||
let {data} = this.state;
|
||||
let selectList = [];
|
||||
record._checked = record._checked?false:true;
|
||||
let checkedAll = true;
|
||||
for(let i=0;i<data.length;i++){
|
||||
let item = data[i];
|
||||
if(!item._checked || item._checked == false){
|
||||
checkedAll = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
...this.state,
|
||||
checkedAll
|
||||
})
|
||||
data.forEach((da)=>{
|
||||
if(da._checked){
|
||||
selectList.push(da);
|
||||
}
|
||||
})
|
||||
this.props.getSelectedDataFunc(selectList,record,index);
|
||||
};
|
||||
|
||||
|
||||
|
||||
getDefaultColumns=(columns)=>{
|
||||
// let checkedAll = init?false:this.state.checkedAll;
|
||||
let {checkedAll} = this.state;
|
||||
let _defaultColumns =[{
|
||||
title: (
|
||||
<Checkbox
|
||||
className="table-checkbox"
|
||||
checked={checkedAll}
|
||||
// indeterminate={indeterminate_bool && !this.state.checkedAll}
|
||||
onChange={this.onAllCheckChange}
|
||||
/>
|
||||
),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
fixed:"left",
|
||||
width: 50,
|
||||
render: (text, record, index) => {
|
||||
let attr = {};
|
||||
record._disabled?attr.disabled = record._disabled:"";
|
||||
return <Checkbox
|
||||
key={index}
|
||||
className="table-checkbox"
|
||||
{...attr}
|
||||
checked={record._checked}
|
||||
onClick={this.handleClick}
|
||||
onChange={this.onCheckboxChange(text, record, index)}
|
||||
></Checkbox>
|
||||
}
|
||||
}]
|
||||
return _defaultColumns.concat(columns);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {columns} = this.props;
|
||||
const {data} = this.state;
|
||||
return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} />
|
||||
}
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue