JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

修改demo

This commit is contained in:
huyueb 2017-10-12 16:54:17 +08:00
parent 2646517633
commit f01b71bb97
20 changed files with 264 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/Table.css
View File

@ -50,6 +50,8 @@
.u-table-footer {
padding: 16px 8px;
border-bottom: 1px solid #e9e9e9; }
.u-table-footer .u-table {
margin: -16px -8px; }
.u-table-placeholder {
padding: 16px 8px;
background: #fff;
@ -61,6 +63,7 @@
.u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
cursor: pointer;
display: inline-block;
margin-right: 10px;
width: 16px;
height: 16px;
text-align: center;

34
build/lib/sort.js
View File

@ -1,4 +1,4 @@
'use strict';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
@ -8,11 +8,11 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
exports["default"] = sort;
var _react = require('react');
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _beeIcon = require('bee-icon');
var _beeIcon = require("bee-icon");
var _beeIcon2 = _interopRequireDefault(_beeIcon);
@ -92,7 +92,7 @@ function sort(Table) {
var sortOrder = this.state.sortOrder;
var prefixCls = this.props.prefixCls || 'bee-table';
var prefixCls = this.props.prefixCls || "bee-table";
return columns.map(function (originColumn) {
var column = _extends({}, originColumn);
var sortButton = void 0;
@ -100,34 +100,34 @@ function sort(Table) {
var isAscend = sortOrder === "ascend";
var isDescend = sortOrder === "descend";
sortButton = _react2["default"].createElement(
'div',
{ className: prefixCls + '-column-sorter' },
"div",
{ className: prefixCls + "-column-sorter" },
_react2["default"].createElement(
'span',
"span",
{
className: prefixCls + '-column-sorter-up ' + (isAscend ? "on" : "off"),
title: '\u2191',
className: prefixCls + "-column-sorter-up " + (isAscend ? "on" : "off"),
title: "\u2191",
onClick: function onClick() {
return _this2.toggleSortOrder("ascend", column);
}
},
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-triangle-up' })
_react2["default"].createElement(_beeIcon2["default"], { type: "uf-triangle-up" })
),
_react2["default"].createElement(
'span',
"span",
{
className: prefixCls + '-column-sorter-down ' + (isDescend ? "on" : "off"),
title: '\u2193',
className: prefixCls + "-column-sorter-down " + (isDescend ? "on" : "off"),
title: "\u2193",
onClick: function onClick() {
return _this2.toggleSortOrder("descend", column);
}
},
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-triangle-down' })
_react2["default"].createElement(_beeIcon2["default"], { type: "uf-triangle-down" })
)
);
}
column.title = _react2["default"].createElement(
'span',
"span",
null,
column.title,
sortButton
@ -137,11 +137,11 @@ function sort(Table) {
};
Demo11.prototype.render = function render() {
var columns = this.renderColumnsDropdown(this.props.columns).concat();
var columns = this.renderColumnsDropdown(this.props.columns.concat());
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data }));
};
return Demo11;
}(_react.Component);
}
module.exports = exports['default'];
module.exports = exports["default"];

145
build/lib/sum.js
View File

@ -1,16 +1,18 @@
'use strict';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
var _react = require('react');
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; };
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _src = require('../../src');
var _lodash = require("lodash.clonedeep");
var _src2 = _interopRequireDefault(_src);
var _lodash2 = _interopRequireDefault(_lodash);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@ -22,63 +24,80 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
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); }
exports["default"] = Sum = function Sum(Table) {
var SumTable = function (_React$Component) {
_inherits(SumTable, _React$Component);
function SumTable(props) {
var _temp, _this;
_classCallCheck(this, SumTable);
(_temp = (_this = _possibleConstructorReturn(this, _React$Component.call(this, props)), _this), _this.currentData = function (testTitle) {
return _react2["default"].createElement(
'div',
null,
testTitle
);
}, _this.currentData2 = function () {
data_2 = _this.state.data;
var obj = {};
if (data.isArray()) {
for (var i = 0; i < data_2.length; i++) {
for (var item in data[i]) {
if (obj[item] === 'undefined') {
obj[item] = data[i][item];
} else if (typeof data[i][item] == 'Number') {
obj[item] += data[i][item];
}
}
}
}
return _react2["default"].createElement(Table, {
showHeader: false,
columns: _this.props.columns,
data: obj,
heji: true
});
}, _temp), _this.state = {
data: _this.props.data
};
return _this;
}
SumTable.prototype.render = function render() {
var a = this.currentData;
var b = this.currentData2;
return _react2["default"].createElement(Table, {
columns: this.props.columns,
data: this.state.data,
heji: true,
title: a,
footer: b
});
};
return SumTable;
}(_react2["default"].Component);
return SumTable;
//创建新列存放 “合计” 字段
var columns2 = {
title: "合计",
key: "showSum",
dataIndex: "showSum"
};
module.exports = exports['default'];
var sum = function sum(Table) {
return function (_React$Component) {
_inherits(SumTable, _React$Component);
//无状态
function SumTable(props) {
_classCallCheck(this, SumTable);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.currentFooter = function () {
var data_2 = _this.props.data;
var columns_sum = (0, _lodash2["default"])(_this.props.columns);
var sumCol_index = void 0;
//用一个对象存储合计数据，这里合计对象的属性对应每列字段
for (var i = 0; i < columns_sum.length; i++) {
if (columns_sum[i].sumCol) {
sumCol_index = columns_sum[i].dataIndex;
break;
}
}
var obj = {};
obj[sumCol_index] = 0;
if (Array.isArray(data_2)) {
for (var _i = 0; _i < data_2.length; _i++) {
if (typeof data_2[_i][sumCol_index] == "number") {
obj[sumCol_index] += data_2[_i][sumCol_index];
} else {
obj[sumCol_index] = "";
}
}
}
obj.key = "sumData";
obj.showSum = "合计";
obj = [obj];
//将设置的和用户传入的合并属性
// if (columns_sum[0].dataIndex === "checkbox") {
// columns_sum[1] = Object.assign({}, columns_sum[1], columns2);
// } else {
columns_sum[0] = _extends({}, columns_sum[0], columns2);
// }
//除去列为特殊渲染的，避免像a标签这种html代码写入到合计中
columns_sum.map(function (item, index) {
if (typeof item.render == "function") {
item.render = "";
}
return item;
});
return _react2["default"].createElement(Table, { showHeader: false, columns: columns_sum, data: obj });
};
return _this;
}
//合计数字列,并将计算所得数据存储到一个obj对象中
SumTable.prototype.render = function render() {
return _react2["default"].createElement(Table, {
columns: this.props.columns,
data: this.props.data,
footer: this.currentFooter
});
};
return SumTable;
}(_react2["default"].Component);
};
exports["default"] = sum;
module.exports = exports["default"];

1
build/render/CheckboxRender.js
View File

@ -52,7 +52,6 @@ var CheckboxRender = function (_Component) {
}, _this.edit = function () {
_this.setState({ editable: true });
}, _this.handleKeydown = function (event) {
console.log(event.keyCode);
if (event.keyCode == 13) {
_this.check();
}

133
build/render/DateRender.js
View File

@ -1 +1,134 @@
"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; };
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _beeIcon = require("bee-icon");
var _beeIcon2 = _interopRequireDefault(_beeIcon);
var _beeDatepicker = require("bee-datepicker");
var _beeDatepicker2 = _interopRequireDefault(_beeDatepicker);
var _moment = require("moment");
var _moment2 = _interopRequireDefault(_moment);
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); }
var DateRender = function (_Component) {
_inherits(DateRender, _Component);
function DateRender() {
var _temp, _this, _ret;
_classCallCheck(this, DateRender);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
value: _this.props.value,
editable: false
}, _this.handleChange = function (e) {
var _ref = _this.props || "YYYY-MM-DD",
format = _ref.format;
var value = e.format(format);
_this.setState({ value: value, editable: false });
if (_this.props.onChange) {
_this.props.onChange(value);
}
}, _this.check = function () {
_this.setState({ editable: false });
if (_this.props.onChange) {
_this.props.onChange(_this.state.value);
}
}, _this.edit = function () {
_this.setState({ editable: true });
}, _this.handleKeydown = function (event) {
if (event.keyCode == 13) {
_this.check();
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
DateRender.prototype.render = function render() {
var _state = this.state,
value = _state.value,
editable = _state.editable;
var isclickTrigger = this.props.isclickTrigger;
var cellContent = "";
var date_value = (0, _moment2["default"])(value);
if (editable) {
cellContent = isclickTrigger ? _react2["default"].createElement(
"div",
{ className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, this.props, {
value: date_value,
onChange: this.handleChange
})),
_react2["default"].createElement(_beeIcon2["default"], {
type: "uf-correct",
className: "editable-cell-icon-check",
onClick: this.check
})
) : _react2["default"].createElement(
"div",
{ className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, this.props, {
value: date_value,
onChange: this.handleChange
})),
_react2["default"].createElement(_beeIcon2["default"], {
type: "uf-correct",
className: "editable-cell-icon-check",
onClick: this.check
})
);
} else {
cellContent = isclickTrigger ? _react2["default"].createElement(
"div",
{ className: "editable-cell-text-wrapper", onClick: this.edit },
value || " "
) : _react2["default"].createElement(
"div",
{ className: "editable-cell-text-wrapper" },
value || " ",
_react2["default"].createElement(_beeIcon2["default"], {
type: "uf-pencil",
className: "editable-cell-icon",
onClick: this.edit
})
);
}
return _react2["default"].createElement(
"div",
{ className: "editable-cell" },
cellContent
);
};
return DateRender;
}(_react.Component);
exports["default"] = DateRender;
module.exports = exports["default"];

3
build/render/InputRender.js
View File

@ -42,7 +42,7 @@ var InputRender = function (_Component) {
value: _this.props.value,
editable: false
}, _this.handleChange = function (e) {
var value = e.target.value;
var value = e;
_this.setState({ value: value });
}, _this.check = function () {
_this.setState({ editable: false });
@ -52,7 +52,6 @@ var InputRender = function (_Component) {
}, _this.edit = function () {
_this.setState({ editable: true });
}, _this.handleKeydown = function (event) {
console.log(event.keyCode);
if (event.keyCode == 13) {
_this.check();
}

7
build/render/SelectRender.js
View File

@ -45,13 +45,12 @@ var SelectRender = function (_Component) {
editable: false
}, _this.handleChange = function (e) {
var value = e;
var self = _this;
if (self.props.onChange) {
self.props.onChange(value);
if (_this.props.onChange) {
_this.props.onChange(value);
}
_this.setState({ value: value });
setTimeout(function () {
self.setState({ editable: false });
_this.setState({ editable: false });
}, 0);
}, _this.check = function () {
_this.setState({ editable: false });

2
demo/demolist/Demo10.js
View File

@ -1,7 +1,7 @@
/**
*
* @title 无数据时显示
* @description 无数据时显示效果展示
* @description 无数据时显示效果展示（可自定义）
*
* import {Table} from 'tinper-bee';
*/

2
demo/demolist/Demo11.js
View File

@ -1,7 +1,7 @@
/**
*
* @title 列排序
* @description 列排序
* @description 点击列的上下按钮即可排序
*
*/

2
demo/demolist/Demo12.js
View File

@ -1,7 +1,7 @@
/**
*
* @title 全选功能
* @description 全选功能
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）
*
*/

2
demo/demolist/Demo13.js
View File

@ -1,7 +1,7 @@
/**
*
* @title 列排序、全选功能、合计
* @description 列排序、全选功能、合计
* @description 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
*
*/

25
demo/demolist/Demo15.js → demo/demolist/Demo14.js
View File

@ -1,7 +1,7 @@
/**
*
* @title edittype表格
* @description 这是带有增删改功能的表格
* @title 编辑态表格
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
*
*/
@ -38,7 +38,7 @@ class Demo14 extends React.Component {
key: "0",
name: "沉鱼",
age: "y",
address: "96, 77, 89",
address: "111",
datepicker: "2017-06-12",
MonthPicker: "2017-02",
TimePicker: "2017-09-14 14:24:48"
@ -47,7 +47,7 @@ class Demo14 extends React.Component {
key: "1",
name: "落雁",
age: "y",
address: "90, 70, 80",
address: "lucy",
datepicker: "2017-06-12",
MonthPicker: "2017-02",
TimePicker: "2017-09-14 14:24:48"
@ -56,7 +56,7 @@ class Demo14 extends React.Component {
key: "2",
name: "闭月",
age: "n",
address: "80, 60, 80",
address: "lucy",
datepicker: "2017-06-12",
MonthPicker: "2017-02",
TimePicker: "2017-09-14 14:24:48"
@ -65,7 +65,7 @@ class Demo14 extends React.Component {
key: "3",
name: "羞花",
age: "y",
address: "120, 60, 90",
address: "lucy",
datepicker: "2017-06-12",
MonthPicker: "2017-02",
TimePicker: "2017-09-14 14:24:48"
@ -75,7 +75,7 @@ class Demo14 extends React.Component {
};
this.columns = [
{
title: "姓名",
title: "普通输入",
dataIndex: "name",
key: "name",
width: "100px",
@ -88,7 +88,7 @@ class Demo14 extends React.Component {
)
},
{
title: "年龄",
title: "复选",
dataIndex: "age",
key: "age",
width: "100px",
@ -100,7 +100,7 @@ class Demo14 extends React.Component {
)
},
{
title: "你懂的",
title: "下拉框",
dataIndex: "address",
key: "address",
width: "200px",
@ -108,7 +108,7 @@ class Demo14 extends React.Component {
return (
<SelectRender
isclickTrigger={true}
value="lucy"
value={text}
onChange={this.onSelectChange}
>
<Option value="jack">boyuzhou</Option>
@ -213,7 +213,10 @@ class Demo14 extends React.Component {
key: count,
name: `凤姐 ${count}`,
age: 32,
address: `100 100 100`
address: "jack",
datepicker: "2017-06-12",
MonthPicker: "2017-02",
TimePicker: "2017-09-14 14:24:48"
};
this.setState({
dataSource: [...dataSource, newData],

3
demo/demolist/Demo2.js
View File

@ -1,7 +1,7 @@
/**
*
* @title 增删改表格
* @description 这是带有增删改功能的表格
* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）
*
*/
@ -32,7 +32,6 @@ class EditableCell extends React.Component {
this.setState({ editable: true });
};
handleKeydown = event => {
console.log(event.keyCode);
if (event.keyCode == 13) {
this.check();
}

2
demo/demolist/Demo4.js
View File

@ -1,7 +1,7 @@
/**
*
* @title 树形数据展示
* @description 手写表格的头组件来达到更灵活的配置表格
* @description 通过在data中配置children数据，来自动生成树形数据
*
*/

2
demo/demolist/Demo5.js
View File

@ -60,7 +60,7 @@ const data5 = [
class Demo5 extends Component {
render() {
return <Table columns={columns5} data={data5} scroll={{ x: 1500 }} />;
return <Table columns={columns5} data={data5}/>;
}
}

2
demo/demolist/Demo6.js
View File

@ -1,7 +1,7 @@
/**
*
* @title 固定表头
* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。
* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)
*
*/

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

1
src/lib/sum.js
View File

@ -26,7 +26,6 @@ let sum = Table => {
break;
}
}
debugger;
let obj = {};
obj[sumCol_index] = 0;
if (Array.isArray(data_2)) {

1
src/render/CheckboxRender.js
View File

@ -21,7 +21,6 @@ export default class CheckboxRender extends Component {
this.setState({ editable: true });
};
handleKeydown = event => {
console.log(event.keyCode);
if (event.keyCode == 13) {
this.check();
}

6
src/render/DateRender.js
View File

@ -11,13 +11,10 @@ export default class DateRender extends Component {
handleChange = e => {
let { format } = this.props || "YYYY-MM-DD";
const value = e.format(format);
this.setState({ value });
this.setState({ value, editable: false });
if (this.props.onChange) {
this.props.onChange(value);
}
setTimeout(() => {
this.setState({ editable: false });
}, 0);
};
check = () => {
this.setState({ editable: false });
@ -29,7 +26,6 @@ export default class DateRender extends Component {
this.setState({ editable: true });
};
handleKeydown = event => {
console.log(event.keyCode);
if (event.keyCode == 13) {
this.check();
}