fix #1181

Author: AllenFang

src/BootstrapTable.js

@@ -1025,7 +1025,7 @@ class BootstrapTable extends Component {
   }
 
   renderToolBar() {
-    const { exportCSV, selectRow, insertRow, deleteRow, search, children } = this.props;
+    const { exportCSV, selectRow, insertRow, deleteRow, search, children, keyField } = this.props;
     const enableShowOnlySelected = selectRow && selectRow.showOnlySelected;
     const print = typeof this.props.options.printToolBar === 'undefined' ?
       true : this.props.options.printToolBar;
@@ -1041,10 +1041,13 @@ class BootstrapTable extends Component {
       if (Array.isArray(children)) {
         columns = children.map((column, r) => {
           const { props } = column;
+          const isKey = props.isKey || keyField === props.dataField;
           return {
+            isKey,
             name: props.headerText || props.children,
             field: props.dataField,
             hiddenOnInsert: props.hiddenOnInsert,
+            keyValidator: props.keyValidator,
             // when you want same auto generate value and not allow edit, example ID field
             autoValue: props.autoValue || false,
             // for create editor, no params for column.editable() indicate that editor for new row
@@ -1059,7 +1062,8 @@ class BootstrapTable extends Component {
           name: children.props.headerText || children.props.children,
           field: children.props.dataField,
           editable: children.props.editable,
-          hiddenOnInsert: children.props.hiddenOnInsert
+          hiddenOnInsert: children.props.hiddenOnInsert,
+          keyValidator: children.props.keyValidator
         } ];
       }
       return (
@@ -1101,7 +1105,8 @@ class BootstrapTable extends Component {
             searchPanel={ this.props.options.searchPanel }
             btnGroup={ this.props.options.btnGroup }
             toolBar={ this.props.options.toolBar }
-            reset={ this.state.reset } />
+            reset={ this.state.reset }
+            isValidKey={ this.store.isValidKey } />
         </div>
       );
     } else {

src/TableHeaderColumn.js

@@ -269,7 +269,8 @@ TableHeaderColumn.propTypes = {
   expandable: PropTypes.bool,
   tdAttr: PropTypes.object,
   tdStyle: PropTypes.object,
-  thStyle: PropTypes.object
+  thStyle: PropTypes.object,
+  keyValidator: PropTypes.bool
 };
 
 TableHeaderColumn.defaultProps = {
@@ -303,7 +304,8 @@ TableHeaderColumn.defaultProps = {
   expandable: true,
   tdAttr: undefined,
   tdStyle: undefined,
-  thStyle: undefined
+  thStyle: undefined,
+  keyValidator: false
 };
 
 export default TableHeaderColumn;

src/store/TableDataStore.js

@@ -216,23 +216,26 @@ export class TableDataStore {
   }
 
   add(newObj) {
-    if (!newObj[this.keyField] || newObj[this.keyField].toString() === '') {
-      throw new Error(`${this.keyField} can't be empty value.`);
-    }
-    const currentDisplayData = this.getCurrentDisplayData();
-    currentDisplayData.forEach(function(row) {
-      if (row[this.keyField].toString() === newObj[this.keyField].toString()) {
-        throw new Error(`${this.keyField} ${newObj[this.keyField]} already exists`);
-      }
-    }, this);
+    const e = this.isValidKey(newObj[this.keyField]);
+    if (e) throw new Error(e);
 
+    const currentDisplayData = this.getCurrentDisplayData();
     currentDisplayData.push(newObj);
     if (this.isOnFilter) {
       this.data.push(newObj);
     }
     this._refresh(false);
   }
 
+  isValidKey = key => {
+    if (!key || key.toString() === '') {
+      return `${this.keyField} can't be empty value.`;
+    }
+    const currentDisplayData = this.getCurrentDisplayData();
+    const exist = currentDisplayData.find(row => row[this.keyField].toString() === key.toString());
+    if (exist) return `${this.keyField} ${key} already exists`;
+  }
+
   remove(rowKey) {
     const currentDisplayData = this.getCurrentDisplayData();
     const result = currentDisplayData.filter(row => {

src/toolbar/ToolBar.js

@@ -64,21 +64,32 @@ class ToolBar extends Component {
     }
   }
 
+  displayCommonMessage = () => {
+    this.refs.notifier.notice(
+      'error',
+      'Form validate errors, please checking!',
+      'Pressed ESC can cancel');
+  }
+
   validateNewRow(newRow) {
     const validateState = {};
     let isValid = true;
     let tempMsg;
     let responseType;
 
     this.props.columns.forEach(column => {
-      if (column.editable && column.editable.validator) { // process validate
+      if (column.isKey && column.keyValidator) { // key validator for checking exist key
+        tempMsg = this.props.isValidKey(newRow[column.field]);
+        if (tempMsg) {
+          this.displayCommonMessage();
+          isValid = false;
+          validateState[column.field] = tempMsg;
+        }
+      } else if (column.editable && column.editable.validator) { // process validate
         tempMsg = column.editable.validator(newRow[column.field]);
         responseType = typeof tempMsg;
         if (responseType !== 'object' && tempMsg !== true) {
-          this.refs.notifier.notice(
-              'error',
-              'Form validate errors, please checking!',
-              'Pressed ESC can cancel');
+          this.displayCommonMessage();
           isValid = false;
           validateState[column.field] = tempMsg;
         } else if (responseType === 'object' && tempMsg.isValid !== true) {
@@ -469,7 +480,8 @@ ToolBar.propTypes = {
   btnGroup: PropTypes.func,
   toolBar: PropTypes.func,
   searchPosition: PropTypes.string,
-  reset: PropTypes.bool
+  reset: PropTypes.bool,
+  isValidKey: PropTypes.func
 };
 
 ToolBar.defaultProps = {