feat:行点击事件关联单选功能

build/lib/multiSelect.js

@@ -203,11 +203,6 @@ function multiSelect(Table, Checkbox) {
       if (checkedAll) {
         check = false;
       } else {
-        // if(indeterminate){
-        //   check = true;
-        // }else{
-        //   check = true;
-        // }
         check = true;
       }
       var selectList = [];
@@ -273,8 +268,6 @@ function multiSelect(Table, Checkbox) {
       return res;
     };
 
-    this.handleClick = function () {};
-
     this.onCheckboxChange = function (text, record, index) {
       return function () {
         var data = _this2.state.data;
@@ -340,7 +333,6 @@ function multiSelect(Table, Checkbox) {
             className: 'table-checkbox'
           }, attr, multiSelectConfig, {
             checked: record._checked,
-            onClick: _this2.handleClick,
             onChange: _this2.onCheckboxChange(text, record, index)
           }));
         }

build/lib/singleSelect.js

@@ -41,6 +41,10 @@ function singleSelect(Table, Radio) {
 
       var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
+      _this.handleRadioClick = function (e) {
+        e.stopPropagation();
+      };
+
       _this.onRadioChange = function (value, record, index) {
         var selectedRowIndex = _this.state.selectedRowIndex;
 
@@ -70,6 +74,7 @@ function singleSelect(Table, Radio) {
                 className: "table-radio",
                 name: "table-radio",
                 selectedValue: selectedRowIndex,
+                onClick: _this.handleRadioClick,
                 onChange: function onChange(value) {
                   return _this.onRadioChange(value, record, index);
                 },
@@ -81,6 +86,17 @@ function singleSelect(Table, Radio) {
         return _defaultColumns.concat(columns);
       };
 
+      _this.onRowClick = function (record, index, event) {
+        var _this$props = _this.props,
+            autoCheckedByClickRows = _this$props.autoCheckedByClickRows,
+            onRowClick = _this$props.onRowClick;
+
+        if (autoCheckedByClickRows) {
+          _this.onRadioChange('', record, index);
+        }
+        onRowClick && onRowClick(record, index, event);
+      };
+
       _this.state = {
         data: (0, _util.ObjectAssign)(props.data),
         selectedRowIndex: props.selectedRowIndex
@@ -110,6 +126,8 @@ function singleSelect(Table, Radio) {
     SingleSelect.prototype.isArray = function isArray(o) {
       return Object.prototype.toString.call(o) == '[object Array]';
     };
+    // 实现行点击时触发单选框勾选的需求
+
 
     SingleSelect.prototype.render = function render() {
       var columns = this.props.columns;
@@ -117,14 +135,18 @@ function singleSelect(Table, Radio) {
 
       return _react2["default"].createElement(Table, _extends({}, this.props, {
         columns: this.getDefaultColumns(columns),
-        data: data }));
+        data: data,
+        onRowClick: this.onRowClick }));
     };
 
     return SingleSelect;
-  }(_react.Component), _class.defaultProps = {
+  }(_react.Component), _class.propTypes = {
+    autoCheckedByClickRows: PropTypes.bool //行点击时，是否自动勾选单选框
+  }, _class.defaultProps = {
     prefixCls: "u-table-single-select",
     getSelectedDataFunc: function getSelectedDataFunc() {},
-    selectedRowIndex: ''
+    selectedRowIndex: '',
+    autoCheckedByClickRows: true
   }, _temp;
 }
 module.exports = exports["default"];

src/lib/multiSelect.js

@@ -133,11 +133,6 @@ export default function multiSelect(Table, Checkbox) {
       if(checkedAll){
         check = false;
       }else{
-        // if(indeterminate){
-        //   check = true;
-        // }else{
-        //   check = true;
-        // }
         check = true;
       }
       let selectList = [];
@@ -210,10 +205,6 @@ export default function multiSelect(Table, Checkbox) {
       return res;
     }
  
-    handleClick=()=>{
-      
-    }
- 
     onCheckboxChange = (text, record, index) => () => {
       let {data} = this.state;
       let selectList = [];
@@ -282,7 +273,6 @@ export default function multiSelect(Table, Checkbox) {
                 {...attr}
                 {...multiSelectConfig}
                 checked={record._checked}
-                onClick={this.handleClick}
                 onChange={this.onCheckboxChange(text, record, index)}
               />
           }

src/lib/singleSelect.js

@@ -9,10 +9,14 @@ import {ObjectAssign} from './util';
 export default function singleSelect(Table, Radio) {
 
   return class SingleSelect extends Component {
+    static propTypes = {
+      autoCheckedByClickRows: PropTypes.bool, //行点击时，是否自动勾选单选框
+    };
     static defaultProps = {
       prefixCls: "u-table-single-select",
       getSelectedDataFunc:()=>{},
-      selectedRowIndex: ''
+      selectedRowIndex: '',
+      autoCheckedByClickRows: true
     }
 
     constructor(props) {
@@ -44,6 +48,10 @@ export default function singleSelect(Table, Radio) {
         return Object.prototype.toString.call(o)=='[object Array]';
     }
 
+    handleRadioClick = (e) => {
+      e.stopPropagation();
+    }
+
     onRadioChange = (value, record, index) => {
       let { selectedRowIndex } = this.state;
       if(selectedRowIndex === index){
@@ -69,6 +77,7 @@ export default function singleSelect(Table, Radio) {
                     className="table-radio" 
                     name="table-radio" 
                     selectedValue={selectedRowIndex}
+                    onClick={this.handleRadioClick}
                     onChange={value => this.onRadioChange(value, record, index)}
                     style={{width:'14px', height:'14px', display:'block', marginLeft:'4px'}}>
                     <Radio value={index}/>
@@ -77,6 +86,14 @@ export default function singleSelect(Table, Radio) {
         }]
         return _defaultColumns.concat(columns);
     }
+    // 实现行点击时触发单选框勾选的需求
+    onRowClick = (record,index,event) =>{
+      let { autoCheckedByClickRows, onRowClick } = this.props;
+      if(autoCheckedByClickRows) {
+        this.onRadioChange('',record, index);
+      }
+      onRowClick && onRowClick(record,index,event);
+    }
 
     render() {
       const {columns} = this.props;
@@ -84,7 +101,8 @@ export default function singleSelect(Table, Radio) {
       return <Table 
               {...this.props} 
               columns={this.getDefaultColumns(columns)} 
-              data={data} />
+              data={data} 
+              onRowClick={this.onRowClick}/>
     }
   };
 }