p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(multiSelect.js): 新增selectedRow参数来控制某一行数据是否选中

This commit is contained in:
huyueb 2018-01-03 14:19:24 +08:00
parent b9de7de510
commit 3f0c3be121
15 changed files with 5784 additions and 3390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -131,6 +131,7 @@ import multiSelect from "bee-table/build/lib/multiSelect.js"
| multiSelect.param | 通过设置该参数来设计获取的数据数组，默认返还所有数据 | string | '' |
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
| selectDisabled | 设置某一行数据无法被选中，使用类似于rowClassName | Function(record, index):bool | 无 |
| selectedRow | 设置某一行数据是否被选中，使用类似于rowClassName | Function(record, index):bool | 无 |

12
build/Table.css
View File

@ -46,9 +46,11 @@
.u-table-fixed-header .u-table-body {
background: #fff;
position: relative; }
.u-table-fixed-left .u-table-body-inner {
margin-right: -20px; }
.u-table-fixed-header .u-table-body-inner {
height: 100%;
overflow-y: hidden; }
overflow: scroll; }
.u-table-fixed-header .u-table-scroll .u-table-header {
overflow-x: scroll;
padding-bottom: 20px;
@ -63,6 +65,8 @@
.u-table-footer {
padding: 16px 8px;
border-bottom: 1px solid #e9e9e9; }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
margin: -16px -8px; }
.u-table-placeholder {
@ -128,7 +132,7 @@
.u-table-fixed-left {
left: 0;
box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1); }
.u-table-fixed-left .u-table-fixed-left-body-inner {
.u-table-fixed-left-body-inner {
margin-right: -20px;
padding-right: 20px; }
.u-table-fixed-left-fixed-header .u-table-fixed-left .u-table-fixed-left-body-inner {
@ -139,9 +143,9 @@
.u-table-fixed-right-expanded-row {
color: transparent;
pointer-events: none; }
.u-table .u-table-scroll-position-left .u-table-fixed-left {
.u-table-scroll-position-left .u-table-fixed-left {
box-shadow: none; }
.u-table .u-table-scroll-position-right .u-table-fixed-right {
.u-table-scroll-position-right .u-table-fixed-right {
box-shadow: none; }
.u-table.bordered table {

9
build/Table.js
View File

@ -519,7 +519,8 @@ var Table = function (_Component) {
clsPrefix = _props3.clsPrefix,
_props3$scroll = _props3.scroll,
scroll = _props3$scroll === undefined ? {} : _props3$scroll,
getBodyWrapper = _props3.getBodyWrapper;
getBodyWrapper = _props3.getBodyWrapper,
footerScroll = _props3.footerScroll;
var useFixedHeader = this.props.useFixedHeader;
var bodyStyle = _extends({}, this.props.bodyStyle);
@ -528,7 +529,9 @@ var Table = function (_Component) {
var tableClassName = '';
if (scroll.x || fixed) {
tableClassName = clsPrefix + '-fixed';
bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
if (!footerScroll) {
bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
}
}
if (scroll.y) {
@ -544,7 +547,7 @@ var Table = function (_Component) {
// Add negative margin bottom for scroll bar overflow bug
var scrollbarWidth = (0, _utils.measureScrollbar)();
if (scrollbarWidth > 0) {
if (scrollbarWidth >= 0) {
(fixed ? bodyStyle : headStyle).marginBottom = '-' + scrollbarWidth + 'px';
(fixed ? bodyStyle : headStyle).paddingBottom = '0px';
}

194
build/lib/multiSelect.js
View File

@ -35,6 +35,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
* 使用全选时得注意，data中的key值一定要是唯一值
*/
function multiSelect(Table) {
var _class, _temp, _initialiseProps;
Array.prototype.indexOf = function (val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
@ -47,86 +49,47 @@ function multiSelect(Table) {
this.splice(index, 1);
}
};
return function (_Component) {
_inherits(BookLoader, _Component);
return _temp = _class = function (_Component) {
_inherits(multiSelect, _Component);
function BookLoader(props) {
_classCallCheck(this, BookLoader);
function multiSelect(props) {
_classCallCheck(this, multiSelect);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.onAllCheckChange = function () {
var self = _this;
var listData = self.state.data.concat();
var checkedObj = _extends({}, self.state.checkedObj);
var data = self.props.data;
var selIds = [];
var id = self.props.multiSelect.param;
for (var i = 0; i < data.length; i++) {
checkedObj[data[i]["key"]] = !self.state.checkedAll;
}
if (self.state.checkedAll) {
selIds = [];
} else {
for (var i = 0; i < listData.length; i++) {
if (id) {
selIds[i] = listData[i][id];
} else {
selIds[i] = listData[i];
}
}
}
self.setState({
checkedAll: !self.state.checkedAll,
checkedObj: checkedObj,
selIds: selIds
});
self.props.getSelectedDataFunc(selIds);
};
_initialiseProps.call(_this);
_this.onCheckboxChange = function (text, record, index) {
var self = _this;
var allFlag = false;
var selIds = self.state.selIds;
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
var checkedObj = _extends({}, self.state.checkedObj);
var checkedArray = Object.keys(checkedObj);
var getSelectedDataFunc = self.props.getSelectedDataFunc;
if (checkedObj[record["key"]]) {
selIds.remove(id);
} else {
selIds.push(id);
}
checkedObj[record["key"]] = !checkedObj[record["key"]];
for (var i = 0; i < checkedArray.length; i++) {
if (!checkedObj[checkedArray[i]]) {
allFlag = false;
break;
} else {
allFlag = true;
}
}
self.setState({
checkedAll: allFlag,
checkedObj: checkedObj,
selIds: selIds
});
if (typeof getSelectedDataFunc === "function") {
getSelectedDataFunc(selIds);
}
};
var data = props.data,
checkedObj = _this.initCheckedObj(props);
_this.state = {
checkedAll: false,
checkedObj: {},
checkedObj: checkedObj,
selIds: [],
data: _this.props.data
};
return _this;
}
BookLoader.prototype.renderColumnsMultiSelect = function renderColumnsMultiSelect(columns) {
multiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var props = this.props,
selectDisabled = props.selectDisabled,
selectedRow = props.selectedRow,
data = props.data,
checkedObj = {};
if (nextProps.data !== data || nextProps.selectDisabled !== selectDisabled || nextProps.selectedRow !== selectedRow) {
checkedObj = this.initCheckedObj(nextProps);
this.setState({
checkedAll: false,
checkedObj: checkedObj,
selIds: [],
data: nextProps.data
});
}
};
multiSelect.prototype.renderColumnsMultiSelect = function renderColumnsMultiSelect(columns) {
var _this2 = this;
var data = this.state.data;
@ -157,11 +120,13 @@ function multiSelect(Table) {
}),
key: "checkbox",
dataIndex: "checkbox",
width: "5%",
width: "100px",
render: function render(text, record, index) {
var bool = checkedObj.hasOwnProperty(record["key"]);
return _react2["default"].createElement(_beeCheckbox2["default"], {
className: "table-checkbox",
checked: checkedObj[record.key],
disabled: !bool,
onChange: _this2.onCheckboxChange.bind(_this2, text, record, index)
});
}
@ -171,12 +136,101 @@ function multiSelect(Table) {
return columns;
};
BookLoader.prototype.render = function render() {
multiSelect.prototype.render = function render() {
var columns = this.renderColumnsMultiSelect(this.props.columns).concat();
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns }));
};
return BookLoader;
}(_react.Component);
return multiSelect;
}(_react.Component), _initialiseProps = function _initialiseProps() {
var _this3 = this;
this.initCheckedObj = function (props) {
var checkedObj = {},
selectDisabled = props.selectDisabled,
selectedRow = props.selectedRow,
data = props.data;
for (var i = 0; i < data.length; i++) {
var bool = selectDisabled(data[i], i);
if (!bool) {
if (selectedRow && selectedRow(data[i], i)) {
checkedObj[data[i]["key"]] = true;
} else {
checkedObj[data[i]["key"]] = false;
}
}
}
return checkedObj;
};
this.onAllCheckChange = function () {
var self = _this3;
var listData = self.state.data.concat();
var checkedObj = _extends({}, self.state.checkedObj);
var data = self.props.data;
var selIds = [];
var id = self.props.multiSelect.param;
if (self.state.checkedAll) {
selIds = [];
} else {
for (var i = 0; i < listData.length; i++) {
if (id) {
selIds[i] = listData[i][id];
} else {
selIds[i] = listData[i];
}
}
}
for (var i = 0; i < data.length; i++) {
var bool = checkedObj.hasOwnProperty(data[i]["key"]);
if (!bool) {
selIds.splice(i, 1);
} else {
checkedObj[data[i]["key"]] = !self.state.checkedAll;
}
}
self.setState({
checkedAll: !self.state.checkedAll,
checkedObj: checkedObj,
selIds: selIds
});
self.props.getSelectedDataFunc(selIds);
};
this.onCheckboxChange = function (text, record, index) {
var self = _this3;
var allFlag = false;
var selIds = self.state.selIds;
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
var checkedObj = _extends({}, self.state.checkedObj);
var checkedArray = Object.keys(checkedObj);
var getSelectedDataFunc = self.props.getSelectedDataFunc;
if (checkedObj[record["key"]]) {
selIds.remove(id);
} else {
selIds.push(id);
}
checkedObj[record["key"]] = !checkedObj[record["key"]];
for (var i = 0; i < checkedArray.length; i++) {
if (!checkedObj[checkedArray[i]]) {
allFlag = false;
break;
} else {
allFlag = true;
}
}
self.setState({
checkedAll: allFlag,
checkedObj: checkedObj,
selIds: selIds
});
if (typeof getSelectedDataFunc === "function") {
getSelectedDataFunc(selIds);
}
};
}, _temp;
}
module.exports = exports["default"];

10
build/lib/sort.js
View File

@ -87,6 +87,16 @@ function sort(Table) {
return _this;
}
Demo11.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) {
this.setState({
sortOrder: "",
data: nextProps.data,
oldData: nextProps.data.concat()
});
}
};
Demo11.prototype.renderColumnsDropdown = function renderColumnsDropdown(columns) {
var _this2 = this;

3
build/lib/sum.js
View File

@ -73,7 +73,7 @@ function sum(Table) {
}
return item;
});
return _react2["default"].createElement(Table, { showHeader: false, columns: columns_sum, data: obj });
return _react2["default"].createElement(Table, _extends({}, _this.props, { footerScroll: true, showHeader: false, columns: columns_sum, data: obj }));
};
return _this;
@ -83,6 +83,7 @@ function sum(Table) {
SumTable.prototype.render = function render() {
return _react2["default"].createElement(Table, _extends({}, this.props, {
footerScroll: true,
columns: this.props.columns,
data: this.props.data,
footer: this.currentFooter

54
demo/demolist/Demo13.js
View File

@ -8,6 +8,7 @@
import React, { Component } from "react";
import Table from "../../src";
import Checkbox from "bee-checkbox";
import Button from "bee-button";
import multiSelect from "../../src/lib/multiSelect.js";
import sort from "../../src/lib/sort.js";
import sum from "../../src/lib/sum.js";
@ -46,10 +47,25 @@ const data13 = [
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
];
const data13_1 = [
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
{ a: "杨过", b: "男", c: 30, d: "内行", key: "22" },
{ a: "杨过", b: "男", c: 30, d: "内行", key: "222" },
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
];
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
let ComplexTable = multiSelect(sum(sort(Table)));
class Demo13 extends Component {
constructor(props) {
super(props);
this.state = {
data13: data13,
selectedRow: this.selectedRow,
selectDisabled: this.selectDisabled
};
}
getSelectedDataFunc = data => {
console.log(data);
};
@ -60,16 +76,50 @@ class Demo13 extends Component {
}
return false;
};
selectedRow = (record, index) => {
console.log(record);
if (index === 0) {
return true;
}
return false;
};
onClick = () => {
this.setState({
selectedRow: function() {}
});
};
onClick1 = () => {
this.setState({
selectDisabled: (record, index) => {
console.log(record);
if (index === 2) {
return true;
}
return false;
}
});
};
render() {
let multiObj = {
type: "checkbox"
};
return (
<div>
<Button className="editable-add-btn" onClick={this.onClick}>
change selectedRow
</Button>
<Button
className="editable-add-btn"
style={{ marginLeft: "5px" }}
onClick={this.onClick1}
>
change selectDisabled
</Button>
<ComplexTable
selectDisabled={this.selectDisabled}
selectDisabled={this.state.selectDisabled}
selectedRow={this.state.selectedRow}
columns={columns13}
data={data13}
data={this.state.data13}
multiSelect={multiObj}
getSelectedDataFunc={this.getSelectedDataFunc}
/>

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

142
dist/demo.css vendored
View File

@ -6437,6 +6437,8 @@ input.u-button[type="submit"] {
top: 2px;
height: 18px;
width: 18px; }
.u-checkbox input[disabled] {
cursor: not-allowed; }
.u-checkbox.is-checked .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(30,136,229);
border-color: rgb(30,136,229); }
@ -7458,9 +7460,40 @@ ul {
.u-form .u-row .u-label {
line-height: 40px; }
.u-form-item .u-input-group-outer .u-input-group .u-form-control:last-child, .u-form-item .u-input-group-outer .u-input-group .u-form-control:first-child {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px; }
.u-form-item.u-form-inline .u-input-group-outer {
display: inline-block; }
.u-form-item .u-input-group-outer .u-input-before, .u-form-item .u-input-group-outer .u-input-after {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid #bdbdbd;
background: #eee;
float: left; }
.u-form-item .u-input-group-outer .u-input-inner {
float: left; }
.u-form-item .u-input-group-outer .u-input-before {
border-right: none;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px; }
.u-form-item .u-input-group-outer .u-input-before + .u-form-control {
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important; }
.u-form-item .u-input-group-outer .u-input-after {
border-left: none;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px; }
.u-mast {
color: #F22C1D;
position: relative;
@ -7626,9 +7659,11 @@ ul {
.u-table-fixed-header .u-table-body {
background: #fff;
position: relative; }
.u-table-fixed-left .u-table-body-inner {
margin-right: -20px; }
.u-table-fixed-header .u-table-body-inner {
height: 100%;
overflow-y: hidden; }
overflow: scroll; }
.u-table-fixed-header .u-table-scroll .u-table-header {
overflow-x: scroll;
padding-bottom: 20px;
@ -7643,6 +7678,8 @@ ul {
.u-table-footer {
padding: 16px 8px;
border-bottom: 1px solid #e9e9e9; }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
margin: -16px -8px; }
.u-table-placeholder {
@ -7711,7 +7748,7 @@ ul {
.u-table-fixed-left {
left: 0;
box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1); }
.u-table-fixed-left .u-table-fixed-left-body-inner {
.u-table-fixed-left-body-inner {
margin-right: -20px;
padding-right: 20px; }
.u-table-fixed-left-fixed-header .u-table-fixed-left .u-table-fixed-left-body-inner {
@ -7722,9 +7759,9 @@ ul {
.u-table-fixed-right-expanded-row {
color: transparent;
pointer-events: none; }
.u-table .u-table-scroll-position-left .u-table-fixed-left {
.u-table-scroll-position-left .u-table-fixed-left {
box-shadow: none; }
.u-table .u-table-scroll-position-right .u-table-fixed-right {
.u-table-scroll-position-right .u-table-fixed-right {
box-shadow: none; }
.u-table.bordered table {
@ -7979,6 +8016,97 @@ ul {
right: 7px;
color: rgba(0, 0, 0, 0.65); }
/* FormGroup */
/* Navlayout */
/* FormGroup */
/* Navlayout */
.u-input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 4px;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell; }
.u-input-group-addon:last-child {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.u-input-group-addon:first-child {
border-right: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0; }
/* FormGroup */
/* Navlayout */
.u-input-group-btn {
font-size: 0;
white-space: nowrap;
position: relative;
width: 1%;
vertical-align: middle;
display: table-cell; }
.u-input-group-btn .u-button {
position: relative; }
.u-input-group-btn:first-child > button, .u-input-group-btn:first-child > .btn-group > button, .u-input-group-btn:first-child > .dropdown-toggle, .u-input-group-btn:last-child > .btn-group:not(:last-child) > button, .u-input-group-btn:last-child > button:not(:last-child):not(.dropdown-toggle) {
border-bottom-right-radius: 0;
border-top-right-radius: 0; }
.u-input-group-btn:first-child > .btn-group:not(:first-child) > button, .u-input-group-btn:first-child > button:not(:first-child), .u-input-group-btn:last-child > button, .u-input-group-btn:last-child > .btn-group > button, .u-input-group-btn:last-child > .dropdown-toggle {
border-bottom-left-radius: 0;
border-top-left-radius: 0; }
.u-input-group-btn:last-child > button, .u-input-group-btn:last-child > .btn-group {
z-index: 2;
margin-left: -1px; }
.u-input-group-btn:first-child > button, .u-input-group-btn:first-child > .btn-group {
margin-right: -1px; }
.u-input-group-btn > button:active, .u-input-group-btn > .btn:focus, .u-input-group-btn > button:hover {
z-index: 2; }
.u-input-group {
position: relative;
display: table;
border-collapse: separate; }
.u-input-group .u-input-group-btn .u-button {
border: 1px solid #ccc;
height: 30px;
line-height: 1.3; }
.u-input-group .u-form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
display: table-cell; }
.u-input-group .u-form-control:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0; }
.u-input-group .u-form-control:last-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0; }
.u-input-group .u-form-control:not(:first-child):not(:last-child) {
border-radius: 0; }
.u-input-group.simple .u-form-control {
border-radius: 3px; }
.u-input-group.simple .u-input-group-btn {
position: absolute;
top: 2px;
bottom: 0;
z-index: 2;
right: 20px; }
.u-input-group.simple .u-form-control:not(:last-child) {
padding-right: 23px; }
.rc-calendar {
box-sizing: border-box; }
@ -9223,4 +9351,10 @@ li.rc-time-picker-panel-select-option-disabled:hover {
.calendar-picker {
width: 300px; }
.icon-container {
position: relative; }
.datepicker-input-group.u-input-group {
display: block; }
/*# sourceMappingURL=demo.css.map */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

8704
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
docs/mixin.md
View File

@ -22,6 +22,7 @@ import multiSelect from "bee-table/build/lib/multiSelect.js"
| multiSelect.param | 通过设置该参数来设计获取的数据数组，默认返还所有数据 | string | '' |
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
| selectDisabled | 设置某一行数据无法被选中，使用类似于rowClassName | Function(record, index):bool | 无 |
| selectedRow | 设置某一行数据是否被选中，使用类似于rowClassName | Function(record, index):bool | 无 |

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "1.0.8",
"version": "1.0.9",
"description": "Table ui component for react",
"keywords": [
"react",

36
src/lib/multiSelect.js
View File

@ -24,14 +24,8 @@ export default function multiSelect(Table) {
return class multiSelect extends Component {
constructor(props) {
super(props);
let { selectDisabled, data } = props,
checkedObj = {};
for (var i = 0; i < data.length; i++) {
let bool = selectDisabled(data[i], i);
if (!bool) {
checkedObj[data[i]["key"]] = false;
}
}
let { data } = props,
checkedObj = this.initCheckedObj(props);
this.state = {
checkedAll: false,
checkedObj: checkedObj,
@ -41,15 +35,10 @@ export default function multiSelect(Table) {
}
componentWillReceiveProps(nextProps) {
let props = this.props,
{ selectDisabled, data } = props,
{ selectDisabled, selectedRow, data } = props,
checkedObj = {};
if (nextProps.data !== data) {
for (var i = 0; i < nextProps.data.length; i++) {
let bool = selectDisabled(nextProps.data[i], i);
if (!bool) {
checkedObj[nextProps.data[i]["key"]] = false;
}
}
if (nextProps.data !== data || nextProps.selectDisabled !== selectDisabled || nextProps.selectedRow !== selectedRow) {
checkedObj = this.initCheckedObj(nextProps);
this.setState({
checkedAll: false,
checkedObj: checkedObj,
@ -58,6 +47,21 @@ export default function multiSelect(Table) {
});
}
}
initCheckedObj = props => {
let checkedObj = {},
{ selectDisabled, selectedRow, data } = props;
for (var i = 0; i < data.length; i++) {
let bool = selectDisabled(data[i], i);
if (!bool) {
if(selectedRow&&selectedRow(data[i], i)){
checkedObj[data[i]["key"]] = true;
}else{
checkedObj[data[i]["key"]] = false;
}
}
}
return checkedObj;
};
onAllCheckChange = () => {
let self = this;
let listData = self.state.data.concat();