Skip to content

Commit 227fbd1

Browse files
committed
Merge branch 'bennnjamin-master'
2 parents e8c25fd + 22c2584 commit 227fbd1

File tree

8 files changed

+742
-564
lines changed

8 files changed

+742
-564
lines changed

.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@ node_modules
77
*.iml
88
lib/
99
npm-debug.log
10-
.vscode
10+
.vscode

dist/react-bootstrap-table-all.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/react-bootstrap-table.js

Lines changed: 639 additions & 555 deletions
Large diffs are not rendered by default.

dist/react-bootstrap-table.js.map

Lines changed: 5 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/react-bootstrap-table.min.js

Lines changed: 18 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

examples/js/advance/demo.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import AutoRowKeyTable from './auto-rowkey-table';
66
import ValidatorTable from './validator-table';
77
import HideOnInsertTable from './hide-on-insert-table';
88
import DisableToastrTable from './disable-toastr-table';
9+
import EditTypeReadOnlyTable from './validator-table-read-only';
910

1011
import renderLinks from '../utils';
1112

@@ -40,6 +41,10 @@ class Demo extends React.Component {
4041
{ renderLinks('advance/disable-toastr-table.js') }
4142
<DisableToastrTable/>
4243
</Panel>
44+
<Panel header={ 'Custom Display Validating Message(Job Name column is read only)' }>
45+
{ renderLinks('advance/validator-table-read-only.js') }
46+
<EditTypeReadOnlyTable/>
47+
</Panel>
4348
</Col>
4449
);
4550
}
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/* eslint max-len: 0 */
2+
/* eslint no-unused-vars: 0 */
3+
import React from 'react';
4+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
5+
6+
7+
const jobs = [];
8+
const jobTypes = [ 'A', 'B', 'C', 'D' ];
9+
10+
function addJobs(quantity) {
11+
const startId = jobs.length;
12+
for (let i = 0; i < quantity; i++) {
13+
const id = startId + i;
14+
jobs.push({
15+
id: id,
16+
status: '200',
17+
name: 'Item name ' + id,
18+
type: 'B',
19+
active: i % 2 === 0 ? 'Y' : 'N'
20+
});
21+
}
22+
}
23+
24+
addJobs(5);
25+
26+
const cellEditProp = {
27+
mode: 'click',
28+
blurToSave: true
29+
};
30+
31+
// validator function pass the user input value and row object. In addition, a bool return value is expected
32+
function jobNameValidator(value, row) {
33+
const response = { isValid: true, notification: { type: 'success', msg: '', title: '' } };
34+
if (!value) {
35+
response.isValid = false;
36+
response.notification.type = 'error';
37+
response.notification.msg = 'Value must be inserted';
38+
response.notification.title = 'Requested Value';
39+
} else if (value.length < 10) {
40+
response.isValid = false;
41+
response.notification.type = 'error';
42+
response.notification.msg = 'Value must have 10+ characters';
43+
response.notification.title = 'Invalid Value';
44+
}
45+
return response;
46+
}
47+
48+
function jobStatusValidator(value, row) {
49+
const nan = isNaN(parseInt(value, 10));
50+
if (nan) {
51+
return 'Job Status must be a integer!';
52+
}
53+
return true;
54+
}
55+
56+
export default class EditTypeReadOnlyTable extends React.Component {
57+
render() {
58+
return (
59+
<BootstrapTable data={ jobs } cellEdit={ cellEditProp } insertRow={ true }>
60+
<TableHeaderColumn dataField='id' isKey={ true }>Job ID</TableHeaderColumn>
61+
<TableHeaderColumn dataField='status' editable={ { validator: jobStatusValidator } }>Job Status</TableHeaderColumn>
62+
<TableHeaderColumn dataField='name' editable={ { type: 'textarea', validator: jobNameValidator, readOnly: true } }>Job Name</TableHeaderColumn>
63+
<TableHeaderColumn dataField='type' editable={ { type: 'select', options: { values: jobTypes } } }>Job Type</TableHeaderColumn>
64+
<TableHeaderColumn dataField='active' editable={ { type: 'checkbox', options: { values: 'Y:N' } } }>Active</TableHeaderColumn>
65+
</BootstrapTable>
66+
);
67+
}
68+
}

src/TableBody.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ class TableBody extends Component {
5858
const isFocusCell = r === y && i === x;
5959
if (column.name !== this.props.keyField && // Key field can't be edit
6060
column.editable && // column is editable? default is true, user can set it false
61+
column.editable.readOnly !== true &&
6162
this.state.currEditCell !== null &&
6263
this.state.currEditCell.rid === r &&
6364
this.state.currEditCell.cid === i &&
@@ -386,8 +387,10 @@ class TableBody extends Component {
386387
if (isFun(column.editable)) {
387388
editable = column.editable(column, row, nextRIndex, nextCIndex);
388389
}
389-
if (editable && !column.hidden && keyField !== column.name) break;
390-
else {
390+
if (editable && editable.readOnly !== true &&
391+
!column.hidden && keyField !== column.name) {
392+
break;
393+
} else {
391394
nextCIndex++;
392395
}
393396
} while (row);

0 commit comments

Comments
 (0)