@clake/react-bootstrap4-window 1.1.6 → 1.1.8

package/lib/CTable.js

@@ -1,6 +1,6 @@
-/* @clake/react-bootstrap4-window v1.1.6 | by Clake
+/* @clake/react-bootstrap4-window v1.1.8 | by Clake
  * Copyright (c) 2024 Clake,
- * 2024-12-09T15:26:37+0800
+ * 2024-12-09T17:54:50+0800
  */
 "use strict";
 
@@ -387,6 +387,33 @@ function (_React$Component) {
     value: function componentDidMount() {
       this.bindSplit();
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState, snapshot) {
+      var _this2 = this;
+
+      if (this.table_head) {
+        this.table_body.style.width = this.width;
+        var list = this.table_head.querySelectorAll('th');
+        list.forEach(function (item) {
+          if (!item.id) return;
+
+          var td = _this2.table_body.querySelector("#".concat(item.id));
+
+          if (td) {
+            td.style.width = item.style.width;
+          }
+
+          if (_this2.table_total) {
+            var _td = _this2.table_total.querySelector("#".concat(item.id));
+
+            if (_td) {
+              _td.style.width = item.style.width;
+            }
+          }
+        });
+      }
+    }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
@@ -468,7 +495,7 @@ function (_React$Component) {
   }, {
     key: "initTableWidth",
     value: function initTableWidth() {
-      var _this2 = this;
+      var _this3 = this;
 
       if (this.props.width) {
         var width = 0;
@@ -481,10 +508,10 @@ function (_React$Component) {
             var _matchs = item.props.width.match(reg);
 
             width += parseInt(_matchs[1]);
-            _this2.headers[item.props.field] = item.props;
+            _this3.headers[item.props.field] = item.props;
 
             if (item.props.noClone) {
-              _this2.noClone[item.props.field] = "";
+              _this3.noClone[item.props.field] = "";
             }
           }
         });
@@ -500,7 +527,7 @@ function (_React$Component) {
   }, {
     key: "sourceLoad",
     value: function sourceLoad() {
-      var _this3 = this;
+      var _this4 = this;
 
       if (typeof this.props.sourceFunc !== 'function') return;
       this.props.sourceFunc({
@@ -508,7 +535,7 @@ function (_React$Component) {
         page: this.state.page,
         number: this.props.showNumbers
       }, function (res) {
-        _this3.setState({
+        _this4.setState({
           data: res.data,
           dataCount: res.count,
           page: res.page
@@ -562,24 +589,24 @@ function (_React$Component) {
   }, {
     key: "changeHandler",
     value: function changeHandler(row, i) {
-      var _this4 = this;
+      var _this5 = this;
 
       return function (checked, e) {
-        var selectRows = _this4.setRowCheck(checked, i);
+        var selectRows = _this5.setRowCheck(checked, i);
 
-        var _this4$checkAllCheckH = _this4.checkAllCheckHalf(selectRows),
-            _this4$checkAllCheckH2 = _slicedToArray(_this4$checkAllCheckH, 2),
-            allChecked = _this4$checkAllCheckH2[0],
-            half = _this4$checkAllCheckH2[1];
+        var _this5$checkAllCheckH = _this5.checkAllCheckHalf(selectRows),
+            _this5$checkAllCheckH2 = _slicedToArray(_this5$checkAllCheckH, 2),
+            allChecked = _this5$checkAllCheckH2[0],
+            half = _this5$checkAllCheckH2[1];
 
-        _this4.setState({
+        _this5.setState({
           selectRows: selectRows,
           selectAll: allChecked,
           selectHalf: half
         });
 
-        if (typeof _this4.props.onCheck === "function") {
-          _this4.props.onCheck(checked, row, _this4.props.jsxId);
+        if (typeof _this5.props.onCheck === "function") {
+          _this5.props.onCheck(checked, row, _this5.props.jsxId);
         }
       };
     }
@@ -622,24 +649,24 @@ function (_React$Component) {
   }, {
     key: "clickHandler",
     value: function clickHandler(row, i) {
-      var _this5 = this;
+      var _this6 = this;
 
       return function () {
-        if (typeof _this5.props.onClick === 'function') {
-          _this5.props.onClick(row, i, _this5.props.jsxId);
+        if (typeof _this6.props.onClick === 'function') {
+          _this6.props.onClick(row, i, _this6.props.jsxId);
         }
 
-        if (_this5.props.select && _this5.props.rowCheck) {
-          var _row = _this5.refs['row_' + i];
+        if (_this6.props.select && _this6.props.rowCheck) {
+          var _row = _this6.refs['row_' + i];
 
           _row.changeHandler(null); // this.setRowCheck(!row.getChecked(),i);
           // this.checkAllCheckHalf();
 
         }
 
-        if (_this5.props.focus) {
-          _this5.setState({
-            focus: i === _this5.state.focus ? -1 : i
+        if (_this6.props.focus) {
+          _this6.setState({
+            focus: i === _this6.state.focus ? -1 : i
           });
         }
       };
@@ -727,25 +754,25 @@ function (_React$Component) {
      * @param dataType
      */
     value: function menuContextHandler(dataType) {
-      var _this6 = this;
+      var _this7 = this;
 
       return function (e) {
         e.preventDefault();
         e.stopPropagation();
         var data = {
           field: e.currentTarget.dataset.field || '',
-          data: _this6.state.data[e.currentTarget.dataset.row],
+          data: _this7.state.data[e.currentTarget.dataset.row],
           index: e.currentTarget.dataset.row
         };
 
         if (dataType === "text") {
-          _this6.mainMenu.show({
+          _this7.mainMenu.show({
             evt: e,
             type: 'mouse',
             data: data
           });
         } else {
-          _this6.numMenu.show({
+          _this7.numMenu.show({
             evt: e,
             type: 'mouse',
             data: data
@@ -849,14 +876,14 @@ function (_React$Component) {
   }, {
     key: "filterChangeHandler",
     value: function filterChangeHandler(field) {
-      var _this7 = this;
+      var _this8 = this;
 
       return function (val) {
-        var filter = _objectSpread({}, _this7.state.filter);
+        var filter = _objectSpread({}, _this8.state.filter);
 
         filter[field] = val;
 
-        _this7.setState({
+        _this8.setState({
           filter: filter
         });
       };
@@ -924,7 +951,7 @@ function (_React$Component) {
   }, {
     key: "deleteRow",
     value: function deleteRow(row_index) {
-      var _this8 = this;
+      var _this9 = this;
 
       if (row_index < 0 || row_index >= this.state.data.length) {
         return;
@@ -939,7 +966,7 @@ function (_React$Component) {
 
       this.editRows.forEach(function (item, index) {
         if (item > row_index) {
-          _this8.editRows[index] = item - 1;
+          _this9.editRows[index] = item - 1;
         }
       });
       this.setState({
@@ -972,10 +999,10 @@ function (_React$Component) {
      * 得到所有选中的行
      */
     value: function getSelectRows() {
-      var _this9 = this;
+      var _this10 = this;
 
       return this.state.selectRows.map(function (item) {
-        return _this9.state.data[item];
+        return _this10.state.data[item];
       });
     }
     /**
@@ -1005,50 +1032,50 @@ function (_React$Component) {
   }, {
     key: "bindSplit",
     value: function bindSplit() {
-      var _this10 = this;
+      var _this11 = this;
 
       if (this.props.move) {
         this.headerSplits.forEach(function (split) {
-          if (!_this10.drag) {
-            _this10.dragColumnLeft = 0;
-            _this10.dragWidth = 0;
-            _this10.drag = new _Drag["default"](_this10.split, split, {
+          if (!_this11.drag) {
+            _this11.dragColumnLeft = 0;
+            _this11.dragWidth = 0;
+            _this11.drag = new _Drag["default"](_this11.split, split, {
               start: function start(dragDom, eventDom) {
-                var xy = _reactBootstrap.Common.GetDomXY(eventDom, _this10.mainDom);
+                var xy = _reactBootstrap.Common.GetDomXY(eventDom, _this11.mainDom);
 
-                _this10.dragWidth = parseInt((eventDom === null || eventDom === void 0 ? void 0 : eventDom.parentNode).style.width);
-                _this10.dragColumnLeft = xy.left - _this10.table_rows.scrollLeft;
-                dragDom.style.left = _this10.dragColumnLeft + 'px';
+                _this11.dragWidth = parseInt((eventDom === null || eventDom === void 0 ? void 0 : eventDom.parentNode).style.width);
+                _this11.dragColumnLeft = xy.left - _this11.table_rows.scrollLeft;
+                dragDom.style.left = _this11.dragColumnLeft + 'px';
                 dragDom.classList.remove('d-none');
                 return true;
               },
               move: function move(_move, dragDom, eventDom) {
-                if (_this10.dragWidth + (_move.x - _this10.dragColumnLeft) < 50) {
-                  _move.x = _this10.dragColumnLeft - _this10.dragWidth + 50;
+                if (_this11.dragWidth + (_move.x - _this11.dragColumnLeft) < 50) {
+                  _move.x = _this11.dragColumnLeft - _this11.dragWidth + 50;
                 }
               },
               end: function end(dragDom, eventDom) {
                 dragDom.classList.add('d-none');
                 var column_key = eventDom.dataset.key;
 
-                var diff = parseInt(dragDom.style.left) - _this10.dragColumnLeft;
+                var diff = parseInt(dragDom.style.left) - _this11.dragColumnLeft;
 
-                _this10.width = parseInt(_this10.width) + diff + 'px';
-                _this10.table_head.style.width = _this10.width;
-                _this10.table_body.style.width = _this10.width;
+                _this11.width = parseInt(_this11.width) + diff + 'px';
+                _this11.table_head.style.width = _this11.width;
+                _this11.table_body.style.width = _this11.width;
 
-                if (_this10.table_total) {
-                  _this10.table_total.style.width = _this10.width;
+                if (_this11.table_total) {
+                  _this11.table_total.style.width = _this11.width;
                 }
 
                 document.querySelectorAll("#".concat(column_key)).forEach(function (item) {
-                  item.style.width = "".concat(_this10.dragWidth + diff, "px");
+                  item.style.width = "".concat(_this11.dragWidth + diff, "px");
                 });
                 return true;
               }
             });
           } else {
-            _this10.drag.setEventDom(split);
+            _this11.drag.setEventDom(split);
           }
         });
       }
@@ -1187,20 +1214,20 @@ function (_React$Component) {
   }, {
     key: "calcLocalTotal",
     value: function calcLocalTotal(field) {
-      var _this11 = this;
+      var _this12 = this;
 
       return function (e) {
-        var list = _this11.state.data;
+        var list = _this12.state.data;
         var total = 0;
         list.forEach(function (item) {
           if (!!parseFloat(item[field])) {
             total += parseFloat(item[field]);
           }
         });
-        var totalData = Object.assign({}, _this11.state.total);
+        var totalData = Object.assign({}, _this12.state.total);
         totalData[field] = total.toFixed(2);
 
-        _this11.setState({
+        _this12.setState({
           total: totalData
         });
       };
@@ -1208,17 +1235,17 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this12 = this;
+      var _this13 = this;
 
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this12.mainDom = c;
+          return _this13.mainDom = c;
         },
         className: this.getMainClasses(),
         style: this.getStyles()
       }, _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this12.conDom = c;
+          return _this13.conDom = c;
         },
         className: this.getBodyClasses()
       }, this.renderHeader(), this.renderRows(), this.renderTotal(), _react["default"].createElement(_reactBootstrap.Scroll, {
@@ -1227,7 +1254,7 @@ function (_React$Component) {
         selector: "#table-body-com-".concat(this.domId)
       })), this.renderFoot(), _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this12.split = c;
+          return _this13.split = c;
         },
         className: "ck-split d-none"
       }));
@@ -1235,15 +1262,15 @@ function (_React$Component) {
   }, {
     key: "renderHeader",
     value: function renderHeader() {
-      var _this13 = this;
+      var _this14 = this;
 
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this13.tableHeader = c;
+          return _this14.tableHeader = c;
         }
       }, _react["default"].createElement("table", {
         ref: function ref(c) {
-          return _this13.table_head = c;
+          return _this14.table_head = c;
         },
         id: "table-head-".concat(this.domId),
         className: this.getClasses(''),
@@ -1259,7 +1286,7 @@ function (_React$Component) {
         icon: "list"
       }) : _react["default"].createElement(_reactBootstrap.CCheckbox, {
         ref: function ref(c) {
-          return _this13.allchk = c;
+          return _this14.allchk = c;
         },
         onChange: this.selectAll,
         checked: this.state.selectAll,
@@ -1272,7 +1299,7 @@ function (_React$Component) {
       }) : null, _react["default"].Children.map(this.props.children, function (item, key) {
         var _ref, _item$props;
 
-        _this13.cacheRow[item.props.field] = (_ref = (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.def) !== null && _ref !== void 0 ? _ref : '';
+        _this14.cacheRow[item.props.field] = (_ref = (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.def) !== null && _ref !== void 0 ? _ref : '';
 
         if (!item || item.props.hide) {
           return null;
@@ -1289,28 +1316,28 @@ function (_React$Component) {
 
         var sort_icon = '';
 
-        if (_this13.sortList[item.props.field]) {
-          sort_icon = 'sort-alpha-' + (_this13.sortList[item.props.field] === 'asc' ? 'down' : 'up');
+        if (_this14.sortList[item.props.field]) {
+          sort_icon = 'sort-alpha-' + (_this14.sortList[item.props.field] === 'asc' ? 'down' : 'up');
         }
 
         return _react["default"].createElement("th", {
-          onContextMenu: _this13.menuContextHandler(''),
-          id: _this13.domId + '-' + key,
+          onContextMenu: _this14.menuContextHandler(''),
+          id: _this14.domId + '-' + key,
           "data-key": 'head_' + key,
           style: style
-        }, _this13.is_sort ? _react["default"].createElement("a", {
+        }, _this14.is_sort ? _react["default"].createElement("a", {
           className: "ck-ctable-sort",
           href: "javascript://",
-          id: "".concat(_this13.domId, "-sort-").concat(item.props.field),
+          id: "".concat(_this14.domId, "-sort-").concat(item.props.field),
           "data-field": item.props.field,
-          onClick: _this13.sortHandler
+          onClick: _this14.sortHandler
         }, item.props.text, " ", _react["default"].createElement(_reactBootstrap.Icon, {
           icon: sort_icon
-        })) : item.props.text, _this13.props.move ? _react["default"].createElement("span", {
+        })) : item.props.text, _this14.props.move ? _react["default"].createElement("span", {
           ref: function ref(c) {
-            return _this13.headerSplits.push(c);
+            return _this14.headerSplits.push(c);
           },
-          "data-key": _this13.domId + '-' + key,
+          "data-key": _this14.domId + '-' + key,
           className: "ck-column-split"
         }) : null);
       })))));
@@ -1318,34 +1345,34 @@ function (_React$Component) {
   }, {
     key: "renderRows",
     value: function renderRows() {
-      var _this14 = this;
+      var _this15 = this;
 
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this14.table_rows = c;
+          return _this15.table_rows = c;
         },
         id: "table-body-com-".concat(this.domId),
         className: "flex-grow-1 rows",
         onScroll: this.scrollHandler
       }, _react["default"].createElement("table", {
         ref: function ref(c) {
-          return _this14.table_body = c;
+          return _this15.table_body = c;
         },
         id: "table-body-".concat(this.domId),
         className: this.getClasses(),
         style: this.getTableStyles()
       }, _react["default"].createElement("tbody", null, this.state.data.map(function (row, i) {
-        if (_this14.props.edit) {
-          return _this14.renderEditRow(row, i);
+        if (_this15.props.edit) {
+          return _this15.renderEditRow(row, i);
         }
 
-        return _this14.renderRow(row, i, null);
+        return _this15.renderRow(row, i, null);
       }), this.props.edit && this.props.newBar ? this.renderEditAddRow() : null)), this.props.menu ? this.renderMenu() : null, this.props.menu ? this.renderNumberMenu() : null);
     }
   }, {
     key: "renderRow",
     value: function renderRow(row, i, parentRow) {
-      var _this15 = this;
+      var _this16 = this;
 
       var checked = this.state.selectRows.indexOf(i) !== -1;
       var focus = i === this.state.focus && this.props.focus;
@@ -1368,9 +1395,9 @@ function (_React$Component) {
         } //set style
 
 
-        var style = _objectSpread({}, _this15.props.columnStyle);
+        var style = _objectSpread({}, _this16.props.columnStyle);
 
-        style.textAlign = item.props.align || _this15.props.align;
+        style.textAlign = item.props.align || _this16.props.align;
 
         if (item.props.width) {
           style.width = item.props.width;
@@ -1402,8 +1429,8 @@ function (_React$Component) {
 
         if (item.props.children) {
           return _react["default"].createElement("td", {
-            onContextMenu: _this15.menuContextHandler(dataType),
-            id: _this15.domId + '-' + key,
+            onContextMenu: _this16.menuContextHandler(dataType),
+            id: _this16.domId + '-' + key,
             "data-row": "".concat(i),
             "data-field": item.props.field,
             className: item.props.className,
@@ -1419,8 +1446,8 @@ function (_React$Component) {
           }
 
           return _react["default"].createElement("td", {
-            onContextMenu: _this15.menuContextHandler(dataType),
-            id: _this15.domId + '-' + key,
+            onContextMenu: _this16.menuContextHandler(dataType),
+            id: _this16.domId + '-' + key,
             "data-field": item.props.field,
             style: style,
             onClick: function onClick(e) {
@@ -1434,14 +1461,14 @@ function (_React$Component) {
               }
             },
             "data-row": "".concat(i)
-          }, item.props.type ? _this15.renderEditComponent(item.props, row, i) : item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field]);
+          }, item.props.type ? _this16.renderEditComponent(item.props, row, i) : item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field]);
         }
       })));
     }
   }, {
     key: "renderEditRow",
     value: function renderEditRow(row, i) {
-      var _this16 = this;
+      var _this17 = this;
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("tr", {
         className: this.props.onClick ? 'click-row' : undefined,
@@ -1466,7 +1493,7 @@ function (_React$Component) {
         className: this.props.disabled ? 'text-secondary' : 'text-danger',
         text: "delete",
         onClick: function onClick() {
-          _this16.deleteRowHandler(i);
+          _this17.deleteRowHandler(i);
         }
       })) : null, _react["default"].Children.map(this.props.children, function (item, key) {
         if (!item || item.props.hide) {
@@ -1474,9 +1501,9 @@ function (_React$Component) {
         } //set style
 
 
-        var style = _objectSpread({}, _this16.props.columnStyle);
+        var style = _objectSpread({}, _this17.props.columnStyle);
 
-        style.textAlign = item.props.align || _this16.props.align;
+        style.textAlign = item.props.align || _this17.props.align;
 
         if (item.props.width) {
           style.width = item.props.width;
@@ -1484,9 +1511,9 @@ function (_React$Component) {
 
         var dataType = 'text';
         return _react["default"].createElement("td", {
-          onContextMenu: _this16.menuContextHandler(dataType),
+          onContextMenu: _this17.menuContextHandler(dataType),
           className: item.props.disabled ? 'disabled' : '',
-          id: _this16.domId + '-' + key,
+          id: _this17.domId + '-' + key,
           "data-field": item.props.field,
           style: style,
           onClick: function onClick(e) {
@@ -1500,13 +1527,13 @@ function (_React$Component) {
             }
           },
           "data-row": "".concat(i)
-        }, item.props.disabled ? item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field] : _this16.renderEditComponent(item.props, row, i));
+        }, item.props.disabled ? item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field] : _this17.renderEditComponent(item.props, row, i));
       })));
     }
   }, {
     key: "renderEditAddRow",
     value: function renderEditAddRow() {
-      var _this17 = this;
+      var _this18 = this;
 
       if (this.props.disabled) {
         return null;
@@ -1535,9 +1562,10 @@ function (_React$Component) {
           width: item.props.width
         };
         return _react["default"].createElement("td", {
-          style: style
+          style: style,
+          id: _this18.domId + '-' + key
         }, _react["default"].createElement(_CTableInput["default"], {
-          onFocus: _this17.addNewHandler
+          onFocus: _this18.addNewHandler
         }));
       }));
     }
@@ -1546,7 +1574,7 @@ function (_React$Component) {
     value: function renderEditComponent(item, row, i) {
       var _item$disabled,
           _item$disabled2,
-          _this18 = this,
+          _this19 = this,
           _item$disabled3,
           _item$disabled4,
           _item$disabled5;
@@ -1581,7 +1609,7 @@ function (_React$Component) {
             className: "d-inline",
             width: "20px",
             onChange: function onChange(chk, e) {
-              _this18.editHandler(e, chk, 'chk');
+              _this19.editHandler(e, chk, 'chk');
             },
             "data-row": i,
             "data-field": item.field,
@@ -1618,7 +1646,7 @@ function (_React$Component) {
       var _this$props$showNumbe,
           _this$props$showPages,
           _this$props$edit,
-          _this19 = this;
+          _this20 = this;
 
       if (!this.props.foot) {
         return null;
@@ -1635,21 +1663,21 @@ function (_React$Component) {
         noPage: (_this$props$edit = this.props.edit) !== null && _this$props$edit !== void 0 ? _this$props$edit : false
       }), _react["default"].createElement("div", {
         ref: function ref(c) {
-          _this19.fullButton = c;
+          _this20.fullButton = c;
         },
         className: "full-btn align-self-center ms-auto pe-2 text-primary",
         onClick: function onClick() {
-          _this19.fullHandler();
+          _this20.fullHandler();
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         icon: "expand"
       })), _react["default"].createElement("div", {
         ref: function ref(c) {
-          _this19.fullButton2 = c;
+          _this20.fullButton2 = c;
         },
         className: "right-full-btn d-none",
         onClick: function onClick() {
-          _this19.fullHandler();
+          _this20.fullHandler();
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         icon: "times"
@@ -1658,7 +1686,7 @@ function (_React$Component) {
   }, {
     key: "renderTotal",
     value: function renderTotal() {
-      var _this20 = this;
+      var _this21 = this;
 
       if (!this.state.total) {
         return null;
@@ -1667,12 +1695,12 @@ function (_React$Component) {
       var total = this.state.total;
       return _react["default"].createElement("div", {
         ref: function ref(c) {
-          return _this20.tableTotal = c;
+          return _this21.tableTotal = c;
         },
         className: "ck-ctable-total"
       }, _react["default"].createElement("table", {
         ref: function ref(c) {
-          return _this20.table_total = c;
+          return _this21.table_total = c;
         },
         id: "table-total-".concat(this.domId),
         className: this.getClasses(),
@@ -1681,12 +1709,17 @@ function (_React$Component) {
         width: "20px"
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         icon: "chart-line"
-      })) : null, _react["default"].Children.map(this.props.children, function (item, key) {
+      })) : null, !this.props.nodel && this.props.edit ? _react["default"].createElement("td", {
+        style: {
+          width: '20px',
+          textAlign: 'center'
+        }
+      }) : null, _react["default"].Children.map(this.props.children, function (item, key) {
         if (!item || item.props.hide) {
           return null;
         }
 
-        var align = item.props.align || _this20.props.align;
+        var align = item.props.align || _this21.props.align;
         var style = {
           'textAlign': align
         };
@@ -1696,7 +1729,7 @@ function (_React$Component) {
         }
 
         return _react["default"].createElement("td", {
-          id: _this20.domId + '-' + key,
+          id: _this21.domId + '-' + key,
           "data-field": item.props.field,
           style: style
         }, item.props.onFormat ? item.props.onFormat(total[item.props.field], total, item.props.field) : total[item.props.field]);
@@ -1705,7 +1738,7 @@ function (_React$Component) {
   }, {
     key: "renderMenu",
     value: function renderMenu() {
-      var _this21 = this;
+      var _this22 = this;
 
       var lang;
 
@@ -1724,7 +1757,7 @@ function (_React$Component) {
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
         ref: function ref(c) {
-          return _this21.mainMenu = c;
+          return _this22.mainMenu = c;
         },
         onClick: this.menuClickHandler
       }, _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1744,7 +1777,7 @@ function (_React$Component) {
           var select = document.getSelection();
           if (!select) return;
 
-          _this21.filterHandler(select.toString(), data.field, 'contain');
+          _this22.filterHandler(select.toString(), data.field, 'contain');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "me-1",
@@ -1755,7 +1788,7 @@ function (_React$Component) {
           var select = document.getSelection();
           if (!select) return;
 
-          _this21.filterHandler(select.toString(), data.field, 'exclude');
+          _this22.filterHandler(select.toString(), data.field, 'exclude');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "me-1",
@@ -1763,7 +1796,7 @@ function (_React$Component) {
       }), lang['Filter Excluding Selection']) : null, this.is_filter || this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "clear_filter",
         onClick: function onClick() {
-          _this21.clearFilter();
+          _this22.clearFilter();
         }
       }, _react["default"].createElement("span", {
         className: "text-danger"
@@ -1780,7 +1813,7 @@ function (_React$Component) {
         style: inputStyle
       }, lang['Equal With']), _react["default"].createElement(_reactBootstrap.Input, {
         ref: function ref(c) {
-          return _this21.filter.equal = c;
+          return _this22.filter.equal = c;
         },
         className: "me-1",
         size: "xs",
@@ -1789,13 +1822,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('equal'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.equal, _this21.mainMenu.data.field, 'equal');
+          _this22.filterHandler(_this22.state.filter.equal, _this22.mainMenu.data.field, 'equal');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this21.filterHandler(_this21.state.filter.equal, _this21.mainMenu.data.field, 'equal');
+          _this22.filterHandler(_this22.state.filter.equal, _this22.mainMenu.data.field, 'equal');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1805,7 +1838,7 @@ function (_React$Component) {
         style: inputStyle
       }, lang['Start With']), _react["default"].createElement(_reactBootstrap.Input, {
         ref: function ref(c) {
-          return _this21.filter.start = c;
+          return _this22.filter.start = c;
         },
         className: "me-1",
         size: "xs",
@@ -1814,13 +1847,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('start'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.start, _this21.mainMenu.data.field, 'start');
+          _this22.filterHandler(_this22.state.filter.start, _this22.mainMenu.data.field, 'start');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this21.filterHandler(_this21.state.filter.start, _this21.mainMenu.data.field, 'start');
+          _this22.filterHandler(_this22.state.filter.start, _this22.mainMenu.data.field, 'start');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1830,7 +1863,7 @@ function (_React$Component) {
         style: inputStyle
       }, lang['End With']), _react["default"].createElement(_reactBootstrap.Input, {
         ref: function ref(c) {
-          return _this21.filter.end = c;
+          return _this22.filter.end = c;
         },
         className: "me-1",
         size: "xs",
@@ -1839,13 +1872,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('end'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.end, _this21.mainMenu.data.field, 'end');
+          _this22.filterHandler(_this22.state.filter.end, _this22.mainMenu.data.field, 'end');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this21.filterHandler(_this21.state.filter.end, _this21.mainMenu.data.field, 'end');
+          _this22.filterHandler(_this22.state.filter.end, _this22.mainMenu.data.field, 'end');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1855,7 +1888,7 @@ function (_React$Component) {
         style: inputStyle
       }, lang['Contain with']), _react["default"].createElement(_reactBootstrap.Input, {
         ref: function ref(c) {
-          return _this21.filter.contain = c;
+          return _this22.filter.contain = c;
         },
         className: "me-1",
         size: "xs",
@@ -1864,13 +1897,13 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('contain'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.contain, _this21.mainMenu.data.field, 'contain');
+          _this22.filterHandler(_this22.state.filter.contain, _this22.mainMenu.data.field, 'contain');
         }
       }), _react["default"].createElement(_reactBootstrap.Button, {
         size: "xs",
         onMouseDown: stopEvent,
         onClick: function onClick(e) {
-          _this21.filterHandler(_this21.state.filter.contain, _this21.mainMenu.data.field, 'contain');
+          _this22.filterHandler(_this22.state.filter.contain, _this22.mainMenu.data.field, 'contain');
         },
         icon: "search"
       })) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1888,7 +1921,7 @@ function (_React$Component) {
         onChange: this.filterChangeHandler('condition'),
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
-          _this21.filterHandler(_this21.state.filter.condition, _this21.mainMenu.data.field, 'condition');
+          _this22.filterHandler(_this22.state.filter.condition, _this22.mainMenu.data.field, 'condition');
         }
       })) : null, this.props.edit && (!this.props.nodel || this.props.newBar) ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "",
@@ -1901,14 +1934,14 @@ function (_React$Component) {
         field: "",
         step: true
       }) : null, this.props.customMenu ? this.props.customMenu.map(function (menu) {
-        return _this21.explainCustomMenu(menu);
+        return _this22.explainCustomMenu(menu);
       }) : null));
     } // MARK:-生成数字菜单
 
   }, {
     key: "renderNumberMenu",
     value: function renderNumberMenu() {
-      var _this22 = this;
+      var _this23 = this;
 
       var lang;
 
@@ -1927,7 +1960,7 @@ function (_React$Component) {
 
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
         ref: function ref(c) {
-          return _this22.numMenu = c;
+          return _this23.numMenu = c;
         },
         onClick: this.menuClickHandler
       }, _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -1947,7 +1980,7 @@ function (_React$Component) {
           var select = document.getSelection();
           if (!select) return;
 
-          _this22.filterHandler(select.toString(), data.field, 'contain');
+          _this23.filterHandler(select.toString(), data.field, 'contain');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "me-1",
@@ -1958,7 +1991,7 @@ function (_React$Component) {
           var select = document.getSelection();
           if (!select) return;
 
-          _this22.filterHandler(select.toString(), data.field, 'exclude');
+          _this23.filterHandler(select.toString(), data.field, 'exclude');
         }
       }, _react["default"].createElement(_reactBootstrap.Icon, {
         className: "me-1",
@@ -1966,7 +1999,7 @@ function (_React$Component) {
       }), lang['Filter Excluding Selection']) : null, this.is_filter || this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
         field: "clear_filter",
         onClick: function onClick() {
-          _this22.clearFilter();
+          _this23.clearFilter();
         }
       }, _react["default"].createElement("span", {
         className: "text-danger"
@@ -1989,12 +2022,12 @@ function (_React$Component) {
         onMouseDown: stopEvent,
         onEnter: function onEnter() {
           var reg = /(>=|<=|<|>|=|!=)+\s*(\d+)/i;
-          var m = String(_this22.state.filter.condition).match(reg);
+          var m = String(_this23.state.filter.condition).match(reg);
 
           if (m) {
-            _this22.filterHandler(m[2], _this22.numMenu.data.field, numberCondition[m[1]]);
+            _this23.filterHandler(m[2], _this23.numMenu.data.field, numberCondition[m[1]]);
           } else {
-            _this22.filterHandler(_this22.state.filter.condition, _this22.numMenu.data.field, 'condition');
+            _this23.filterHandler(_this23.state.filter.condition, _this23.numMenu.data.field, 'condition');
           }
         }
       }), _react["default"].createElement("div", null, "and,or,between,>,>=,<,<=,=")) : null));
@@ -2002,7 +2035,7 @@ function (_React$Component) {
   }, {
     key: "explainCustomMenu",
     value: function explainCustomMenu(menu) {
-      var _this23 = this;
+      var _this24 = this;
 
       if (menu.children && menu.children instanceof Array) {
         return _react["default"].createElement(_reactBootstrap.Menu.Item, {
@@ -2010,7 +2043,7 @@ function (_React$Component) {
           text: menu.text,
           child: true
         }, menu.children.map(function (item) {
-          return _this23.explainCustomMenu(item);
+          return _this24.explainCustomMenu(item);
         }));
       } else {
         return _react["default"].createElement(_reactBootstrap.Menu.Item, {