Browse Source

Merge branch 'master' of github.com:ant-design/ant-design

pull/76/head
yiminghe 9 years ago
parent
commit
cbf2681c9f
  1. 11
      .editorconfig
  2. 8
      components/table/demo/row-selection.md
  3. 19
      components/table/index.jsx
  4. 10
      scripts/demo.js
  5. 61
      static/style.css

11
.editorconfig

@ -0,0 +1,11 @@
# editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

8
components/table/demo/row-selection.md

@ -37,11 +37,11 @@ var data = [{
// 通过 rowSelection 对象表明需要行选择
var rowSelection = {
onSelect: function(record, selected) {
console.log(record, selected);
onSelect: function(record, selected, selectedRows) {
console.log(record, selected, selectedRows);
},
onSelectAll: function(selected) {
console.log(selected);
onSelectAll: function(selected, selectedRows) {
console.log(selected, selectedRows);
}
};

19
components/table/index.jsx

@ -104,7 +104,6 @@ let AntTable = React.createClass({
this.fetch();
},
handleSelect(rowIndex, checked) {
let selectedRow = this.state.data[rowIndex - 1];
if (checked) {
this.state.selectedRowKeys.push(rowIndex);
} else {
@ -116,17 +115,25 @@ let AntTable = React.createClass({
selectedRowKeys: this.state.selectedRowKeys
});
if (this.props.rowSelection.onSelect) {
this.props.rowSelection.onSelect(selectedRow, checked);
let currentRow = this.state.data[rowIndex - 1];
let selectedRows = this.state.data.filter((row, i) => {
return this.state.selectedRowKeys.indexOf(i + 1) >= 0;
});
this.props.rowSelection.onSelect(currentRow, checked, selectedRows);
}
},
handleSelectAllRow(checked) {
this.setState({
selectedRowKeys: checked ? this.state.data.map(function(item, i) {
var selectedRowKeys = checked ? this.state.data.map(function(item, i) {
return i + 1;
}) : []
}) : [];
this.setState({
selectedRowKeys: selectedRowKeys
});
if (this.props.rowSelection.onSelectAll) {
this.props.rowSelection.onSelectAll(checked);
let selectedRows = this.state.data.filter((row, i) => {
return selectedRowKeys.indexOf(i + 1) >= 0;
});
this.props.rowSelection.onSelectAll(checked, selectedRows);
}
},
handlePageChange: function(current) {

10
scripts/demo.js

@ -16,7 +16,7 @@ $(function () {
return searchData.map(function (s) {
return <Option sData={s} key={s.title}>
<strong>{s.title}</strong>
&nbsp;
&nbsp;
<span>{s.desc}</span>
</Option>;
});
@ -33,13 +33,11 @@ $(function () {
},
render() {
return <Select style={{width: 200}}
placeholder="Select Components"
onChange={this.handleSelect}
return <Select combobox style={{width: 200}}
onSelect={this.handleSelect}
dropdownMenuStyle={{maxHeight: 200, overflow: 'auto'}}
searchPlaceholder="Filter Components"
searchPlaceholder="搜索组件..."
renderDropdownToBody={true}
showSearch={true}
filterOption={this.filterOption}>{this.getOptions()}</Select>;
}
});

61
static/style.css

@ -163,71 +163,24 @@ a.logo {
position: relative;
}
.search input[type="text"] {
#autoComplete .ant-select-selection--single {
border: transparent;
outline: none;
width: 160px;
height: 22px;
padding: 0 0 0 20px;
height: 28px;
line-height: 28px;
color: #999;
transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1);
font-size: 14px;
box-shadow: none;
}
.search input::-webkit-input-placeholder,
.search input::-moz-placeholder,
.search input:-ms-input-placeholder {
#autoComplete input::-webkit-input-placeholder,
#autoComplete input::-moz-placeholder,
#autoComplete input:-ms-input-placeholder {
color: #CADCE3;
}
.search form .focus {
padding: 0 20px 0 0;
}
.search button {
position: absolute;
outline: none;
background: transparent;
border: transparent;
top: 5px;
width: 15px;
height: 15px;
padding: 0;
left: 30px;
cursor: pointer;
transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.search button:before,
.search button:after {
content: "";
display: block;
}
.search button:before {
width: 12px;
height: 12px;
border-radius: 6px;
border: 2px solid #CADCE3;
background: #ffffff;
position: absolute;
top: 0
}
.search button:after {
width: 2px;
height: 6px;
background: #CADCE3;
position: absolute;
transform: rotate(-45deg);
left: 10px;
top: 8px;
}
.search input:focus ~ button {
left: 170px;
}
.nav {
width: 30%;
height: 80px;

Loading…
Cancel
Save