Skip to content

Commit

Permalink
'boom!'
Browse files Browse the repository at this point in the history
  • Loading branch information
@EleanorMao
EleanorMao committed Sep 29, 2016
1 parent ba309e7 commit ffa5a1f
Show file tree
Hide file tree
Showing 12 changed files with 2,091 additions and 583 deletions.
358 changes: 218 additions & 140 deletions README.md
View file

Large diffs are not rendered by default.

1,100 changes: 1,100 additions & 0 deletions db.json
View file

Large diffs are not rendered by default.

143 changes: 102 additions & 41 deletions examples/src/index.js
View file
Expand Up @@ -4,7 +4,11 @@ import {
TreeTable,
TreeHeadCol
} from '../../lib/Index.js';
import {noKeyData, data, list} from './fackData';
import {
noKeyData,
data,
list
} from './fackData';

const Component = React.Component;

Expand All @@ -13,12 +17,24 @@ class Main extends Component {
super();
this.state = {
page: 1,
list: [],
length: 10,
data: data,
selected: [],
data: data
expandRowKeys: []
}
}

componentWillMount() {
fetch('http://localhost:3000/list').then(res => {
return res.json();
}).then(json => {
this.setState({
list: json
})
})
}

handleClick(display, data, callback) {
if (!display) {
fetch('http://localhost:3000/get?a=8').then(res => {
Expand All @@ -32,6 +48,70 @@ class Main extends Component {
}
}

handleArrowClick(display, data, cb) {
if (!display && data.chdatalist && !data.chdatalist.length) {
this.setState(old => {
old.loading = true;
return old;
});
fetch(`http://localhost:3000/detail?year=${data.year}&time=${data.time}&datatype=0`).then(res => {
return res.json();
}).then(json => {
data.chdatalist = json;
cb(data);
this.setState(old => {
old.loading = false;
old.expandRowKeys.push(data.uniqueKey);
return old;
});
});
} else {
cb(data);
if (display) {
this.setState(old => {
old.expandRowKeys.splice(old.expandRowKeys.indexOf(data.uniqueKey), 1);
return old;
});
} else {
this.setState(old => {
old.expandRowKeys.push(data.uniqueKey);
return old;
});
}
}
}

headRender() {
return [{
id: 'columnName',
name: ' '
}, {
id: 'rate',
name: '提货费率'
}, {
id: 'averageCost',
name: '提货单均成本'
}, {
id: 'cost',
name: '提货成本'
}, {
id: 'orderMoney',
name: '提货订单金额'
}, {
id: 'orderNum',
name: '提货订单量'
}, {
id: 'customerNum',
name: '提货客户数'
}, {
id: 'volume',
name: '提货体积'
}, {
id: 'weight',
name: '提货重量'
}];
}

showArrow(cell, level, row, index, col) {
if (row.a == 1) {
return false
Expand All @@ -42,11 +122,7 @@ class Main extends Component {
render() {
const dataFormat = {
"a": function (cell, level, row) {
if (level != 0) {
return '';
} else {
return cell + ' I am row a'
}
return cell + ' I am level ' + level
},
"b": function (cell, level, row, index, col) {
if (level != 0) {
Expand Down Expand Up @@ -74,12 +150,6 @@ class Main extends Component {
}
}
};
const nestedHead = [
['第一列', {
colspan: 2,
label: '喵呜'
}]
];
const options = {
page: 1,
sizePerPage: 1,
Expand All @@ -89,31 +159,13 @@ class Main extends Component {

}
};
const that = this;
const options2 = {
page: this.state.page,
sizePerPage: this.state.length,
sizePageList: [10, 20, 30],
paginationShowsTotal: true,
onPageChange: function (page, sizePerPage) {
fetch('http://localhost:3000/get').then(res => {
return res.json();
}).then(json => {
that.setState({
page: page,
data: json,
length: sizePerPage
})
})
}
};

const selectRow = {
mode: "checkbox",
bgColor: "rgb(238, 193, 213)",
selected: this.state.selected,
hideSelectRow: false,
onSelectAll: (checked, currentSelected)=> {
onSelectAll: (checked, currentSelected) => {
if (checked) {
let checkedList = currentSelected.map(item => {
return item.id;
Expand Down Expand Up @@ -153,22 +205,17 @@ class Main extends Component {
<TreeTable
iskey="a"
data={data}
dataSize={20}
remote={true}
nestedHead={[[{
label: '全国',
colspan: 4,
rowspan: 2
}, 'a', 'a', 'a', 'a'], ['b', 'b', 'b', 'b']]}
startArrowCol={1}
pagination={false}
arrowRender={(open)=>{return <a>{open ? '关闭' : '打开'}</a>}}
>
<TreeHeadCol width={200} dataField="a" dataFormat={dataFormat.a}>第一列</TreeHeadCol>
<TreeHeadCol dataField="b" dataSort={true} width={200}
dataFormat={dataFormat.b}>第二列</TreeHeadCol>
<TreeHeadCol width={200} dataField="c" dataSort={true} dataFormat={dataFormat.c}
>第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列</TreeHeadCol>
dataFormat={dataFormat.a}>第二列</TreeHeadCol>
<TreeHeadCol width={200} dataField="c" dataSort={true}
dataFormat={dataFormat.a}>第三列</TreeHeadCol>
<TreeHeadCol width={200} dataField="d" hidden={false}>第四列</TreeHeadCol>
<TreeHeadCol width={200} dataField="d" hidden={false}>第五列</TreeHeadCol>
<TreeHeadCol dataField="d" hidden={false}>第六列</TreeHeadCol>
Expand All @@ -185,8 +232,9 @@ class Main extends Component {
data={noKeyData}
pagination={true}
options={options}
onArrowClick={this.handleClick.bind(this)}
>
<TreeHeadCol dataField="a" dataAlign="center">第一列</TreeHeadCol>
<TreeHeadCol dataField="a">第一列</TreeHeadCol>
<TreeHeadCol dataField="b">第二列</TreeHeadCol>
<TreeHeadCol dataField="c">第三列</TreeHeadCol>
<TreeHeadCol dataField="d">第四列</TreeHeadCol>
Expand Down Expand Up @@ -231,6 +279,19 @@ class Main extends Component {
}}>操作</TreeHeadCol>
</TreeTable>
</div>
<div style={style}>
<TreeTable iskey='uniqueKey'
childrenPropertyName='chdatalist'
data={this.state.list} hover={false} onArrowClick={this.handleArrowClick.bind(this)}
>
{
this.headRender().map((item, index)=> {
return <TreeHeadCol key={index} dataAlign='center' showArrow={true}
dataField={item.id}>{item.name}</TreeHeadCol>
})
}
</TreeTable>
</div>
</div>
)
}
Expand Down
13 changes: 12 additions & 1 deletion lib/Component/Pagination/DropdownList.js
View file
Expand Up @@ -56,6 +56,16 @@ var DropdownList = function (_Component) {
}
}.bind(this));
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps() {
if (this.state.toggle) {
this.setState(function (old) {
old.toggle = false;
return old;
});
}
}
}, {
key: 'handleToggle',
value: function handleToggle() {
Expand Down Expand Up @@ -93,7 +103,8 @@ var DropdownList = function (_Component) {
'a',
{ href: '#',
onClick: function onClick(e) {
e.preventDefault();_onClick(item);
e.preventDefault();
_onClick(item);
} },
item
)
Expand Down
4 changes: 2 additions & 2 deletions lib/Component/TreeHeader.js
View file
Expand Up @@ -40,11 +40,11 @@ var TreeHeader = function (_Component) {
'th',
{ onClick: function onClick() {
return onSelectAll(!checked);
}, style: { textAlign: 'center', width: 30 } },
}, style: { textAlign: 'center', width: 30 }, 'data-input': mode },
_react2.default.createElement('input', { type: mode, checked: checked, readOnly: true })
);
} else if (mode === 'radio') {
return _react2.default.createElement('th', null);
return _react2.default.createElement('th', { 'data-input': mode });
} else {
return false;
}
Expand Down
79 changes: 36 additions & 43 deletions lib/Component/TreeRow.js
View file
Expand Up @@ -33,28 +33,22 @@ var TreeRow = function (_Component) {
function TreeRow(props) {
_classCallCheck(this, TreeRow);

var _this = _possibleConstructorReturn(this, (TreeRow.__proto__ || Object.getPrototypeOf(TreeRow)).call(this, props));

_this.state = {
open: props.open
};
return _this;
return _possibleConstructorReturn(this, (TreeRow.__proto__ || Object.getPrototypeOf(TreeRow)).call(this, props));
}

_createClass(TreeRow, [{
key: 'handleToggle',
value: function handleToggle(e) {
var _props = this.props;
var open = _props.open;
var data = _props.data;
var parent = _props.parent;

e.stopPropagation();
var data = (0, _Util.extend)({}, {
opened: this.state.open
}, {
data: this.props.data
});
this.setState(function (old) {
old.open = !old.open;
return old;
var options = (0, _Util.extend)({}, {
open: open, data: data, parent: parent
});
this.props.onClick(data);
this.props.onClick(options);
}
}, {
key: 'cellRender',
Expand All @@ -63,21 +57,21 @@ var TreeRow = function (_Component) {

var output = [];
var arrow = -1;
var _props = this.props;
var open = _props.open;
var data = _props.data;
var cols = _props.cols;
var iskey = _props.iskey;
var level = _props.level;
var isTree = _props.isTree;
var hashKey = _props.hashKey;
var checked = _props.checked;
var isSelect = _props.isSelect;
var arrowCol = _props.arrowCol;
var selectRow = _props.selectRow;
var arrowRender = _props.arrowRender;
var hideSelectRow = _props.hideSelectRow;
var childrenPropertyName = _props.childrenPropertyName;
var _props2 = this.props;
var open = _props2.open;
var data = _props2.data;
var cols = _props2.cols;
var iskey = _props2.iskey;
var level = _props2.level;
var isTree = _props2.isTree;
var hashKey = _props2.hashKey;
var checked = _props2.checked;
var isSelect = _props2.isSelect;
var arrowCol = _props2.arrowCol;
var selectRow = _props2.selectRow;
var arrowRender = _props2.arrowRender;
var hideSelectRow = _props2.hideSelectRow;
var childrenPropertyName = _props2.childrenPropertyName;


var _key = hashKey ? data.__uid : data[iskey];
Expand Down Expand Up @@ -119,11 +113,10 @@ var TreeRow = function (_Component) {
var type = _typeof(key.showArrow);

if (type === 'function') {
key.showArrow.call(null, data[key.id], level, data, i, col);
showArrow = key.showArrow.call(null, data[key.id], level, data, i, col);
} else if (type === 'boolean') {
showArrow = key.showArrow;
}

output.push(_react2.default.createElement(
'td',
{ style: style,
Expand All @@ -146,17 +139,17 @@ var TreeRow = function (_Component) {
}, {
key: 'render',
value: function render() {
var _props2 = this.props;
var data = _props2.data;
var level = _props2.level;
var hover = _props2.hover;
var isTree = _props2.isTree;
var checked = _props2.checked;
var isSelect = _props2.isSelect;
var selectRow = _props2.selectRow;
var hoverStyle = _props2.hoverStyle;
var onMouseOut = _props2.onMouseOut;
var onMouseOver = _props2.onMouseOver;
var _props3 = this.props;
var data = _props3.data;
var level = _props3.level;
var hover = _props3.hover;
var isTree = _props3.isTree;
var checked = _props3.checked;
var isSelect = _props3.isSelect;
var selectRow = _props3.selectRow;
var hoverStyle = _props3.hoverStyle;
var onMouseOut = _props3.onMouseOut;
var onMouseOver = _props3.onMouseOver;

return _react2.default.createElement(
'tr',
Expand Down

0 comments on commit ffa5a1f

Please sign in to comment.