+ this.handleRowCheckForChildTable(rows, row.rowIndex)}
+ ref={innerTable => { this.innerTable = innerTable; }} />);
+ }
+ handleItemClick1 = (item) => {
+ let res = [];
+ if (item.value === 1) {
+ rows.forEach((_, index) => res.push(index));
+ } else if (item.value === 2) {
+ rows.forEach((_, index) => {
+ (index + 1) % 2 !== 0 && res.push(index);
+ });
+ } else if (item.value === 3) {
+ rows.forEach((_, index) => {
+ (index + 1) % 2 === 0 && res.push(index);
+ });
+ }
+ this.setState({ checkedRows: res})
+ };
+ renderStateColumn(cell) {
+ if (cell === 'TO BE') {
+ return (
+
+
+ GetCheckedRowsData：
+
+ {rows + .map(row => `[${row.map(v => v.toString()).join(',')}]`) + .join(',')} +
+ ),
+ });
+ };
+ handleRowTrigerCHeckBox = () => {
+ this.rowClickFlag = !this.rowClickFlag;
+ };
+ handleMouseMoveTrigerCHeckBox = () => {
+ if (this.state.slidingMultipleSelected) {
+ this.setState({slidingMultipleSelected: false});
+ } else {
+ this.setState({slidingMultipleSelected: true});
+ }
+ let checkedRows = this.table1.getCheckedRowsIndexes();
+ let start = (this.state.currentPage - 1) * this.state.pageSize;
+ //选中
+ for (let position = start; position < start + this.state.pageSize; position++) {
+ let rowId = position - start;
+ if (checkedRows.indexOf(rowId) != -1) {
+ this.state.rows[position].check = true;
+ } else {
+ this.state.rows[position].check = false;
+ }
+ }
+ };
+ onHeaderColumnSortFunc = (e, sort) => {
+ console.log("sort type: " + sort);
+ };
+
+ render() {
+ const [version, theme] = getDemoVersion();
+ let buttonStyle = {marginRight: "5px"};
+ const rowsdata = [];
+ let toIndex = this.state.currentPage * this.state.pageSize;
+
+ if (toIndex > this.state.recordCount) {
+ toIndex = this.state.recordCount;
+ }
+
+ let start = (this.state.currentPage - 1) * this.state.pageSize;
+
+ if (start > toIndex) {
+ start = toIndex - this.state.pageSize;
+ this.setState({currentPage: this.state.recordCount / this.state.pageSize});
+ }
+
+ let checkedRows = [];
+ for (let i = start; i < toIndex; i++) {
+ rowsdata.push(this.state.rows[i]);
+ if (this.state.rows[i].check) {
+ checkedRows.push(i - start);
+ }
+ }
+ return (
+ // 【重要】业务中使用当前组件不需要添加引用ConfigProvider组件的代码（ConfigProvider是全局组件,当前demo引用ConfigProvider仅用作ICT 3.0 组件样式演示使用）
+ + {rows + .map(row => `[${row.map(v => v.toString()).join(',')}]`) + .join(',')} +
+
+
+
+
+
+ {
+ this.table1 = table1;
+ }}
+ />
+
+
+
+ }
+}
+
+class MainTable extends React.Component {
+ constructor(props) {
+ super(props);
+ this.selectedName = '';
+ }
+ state = {
+ isMenuOpen: false,
+ X: 100,
+ Y: 100,
+ offset: {
+ X: 100,
+ Y: 100
+ },
+ parentId: "",
+ selectOptions: [],
+ columnName: '',
+ isOpen: false,
+ value: undefined,
+ }
+
+ handleCustomSort = (key, aValue, bValue) => {
+ console.log("handleCustomSort: ", key, aValue, bValue);
+ if(typeof(aValue) === "object") {
+ aValue = aValue.value;
+ }
+ if(typeof(bValue) === "object") {
+ bValue = bValue.value;
+ }
+ if (aValue > bValue) {
+ return -1;
+ } else if (aValue < bValue) {
+ return 1;
+ }
+ return 0;
+ };
+
+ onRowRightClick = (e, cbData) => {
+ console.log("Table onRowRightClick cbData : ", cbData, e);
+
+ this.setState({
+ isMenuOpen: true,
+ X: e.pageX,
+ Y: e.pageY,
+ offset: {
+ X: e.offsetX, Y: e.offsetY
+ },
+ parentId: cbData.id,
+ columnName: this.selectedName,
+ })
+ }
+
+ handleMenuClick = (evt) => {
+ console.log("Popup menu onClick : ", evt);
+ }
+ handleToSetFocus = (e) => {
+ let columnsIfo = this.props.columns;
+ let columnOptions = [];
+ for (let i = 0; i < columnsIfo.length; i++) {
+ columnOptions.push({ text: columnsIfo[i].title, value: i + 1, key: { i } })
+ }
+ this.setState({ iframeOpen: true, selectOptions: columnOptions, isMenuOpen: false });
+ }
+ hanleIframeClose = (e) => {
+ this.setState({ iframeOpen: false, isMenuOpen: false });
+ }
+ handleSelectChange = (value, oldValue, text, oldText) => {
+ this.selectedName = text;
+ }
+ handleClickOkButton = (e) => {
+
+ if (this.table) {
+ this.table.setScrollPositionToColumn(this.selectedName);
+ }
+ this.setState({ iframeOpen: false, isMenuOpen: false });
+
+ }
+
+ handleCellClick = (cell, row, e) => {
+ const cellValue = cell.value;
+ this.setState({ isOpen: true, value: cellValue instanceof Object ? cellValue.value : cellValue });
+ }
+
+ handleClick = ()=>{
+ this.setState({isOpen:false});
+ }
+
+ render() {
+
+ const [version, theme] = getDemoVersion();
+ const rows = [];
+ rows.push([{ value: "AV&Pn", cellClassName: 'eui_cell_table_bgColor0', key: '0' }, '3', 'ICMP Echo', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
+ rows.push([{ value: "Shop Storage", cellClassName: 'eui_cell_table_bgColor1', key: '1' }, '3', 'ICMP Echo ', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
+ rows.push([{ value: "ITLink", cellClassName: 'eui_cell_table_bgColor2', key: '2' }, '7', 'ICMP Echo', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
+ rows.push([{ value: "R&D VPN4", cellClassName: 'eui_cell_table_bgColor3', key: '3' }, '3', 'ICMP Echo', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
+ rows.push([{ value: "R&D VPN6", cellClassName: 'eui_cell_table_bgColor4', key: '4' }, '5', 'ICMP Echo', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
+ rows.push([{ value: "R&D VPN2", cellClassName: 'eui_cell_table_bgColor2', key: '5' }, '7', 'ICMP Echo', '1', 'info', 'warn', '08/07/2019', '08/07/2019', '08/07/2019', 1000, 0, 100, 0, 50, 20, "Remark"]);
+
+ let PopUpMenuOptions = [
+ {
+ text: "FocusToSelectedColumn", serialno: 1, onClick: this.handleToSetFocus,
+ },
+
+ ];
+
+ return (
+
+ { this.table = table; }}
+ onCellClick={this.handleCellClick}
+ key={this.props.columns}
+ />
+
{cell.value}
;
+ },
+ },
+ {
+ title: 'Site',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'Site_ID',
+ width: '120',
+ },
+ {
+ title: 'Alarm',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'Alarm_ID',
+ width: '120',
+ },
+ {
+ title: 'Error',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'Error_ID',
+ width: '120',
+ },
+ {
+ title: 'Information',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'Information_ID',
+ width: '120',
+ },
+ {
+ title: 'Warn',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'Warn_ID',
+ width: '120',
+ },
+ {
+ title: 'CreateTime',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'CreateTime_ID',
+ width: '120',
+ },
+ {
+ title: 'DeleteTime',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'DeleteTime_ID',
+ width: '220',
+ },
+ {
+ title: 'ModifyTime',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'ModifyTime_ID',
+ width: '220',
+ },
+ {
+ title: 'MaxVal',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'MaxVal_ID',
+ width: '240',
+ },
+ {
+ title: 'MinVal',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'MinVal_ID',
+ width: '240',
+ },
+ {
+ title: 'ClearenceMaxval',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'ClearenceMaxval_ID',
+ width: '240',
+ },
+ {
+ title: 'ClearenceMinval',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'ClearenceMinval_ID',
+ width: '240',
+ },
+ {
+ title: 'ThresholdMaxVal',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'ThresholdMaxVal_ID',
+ width: '240',
+ },
+ {
+ title: 'ThresholdMinVal',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'ThresholdMinVal_ID',
+ width: '240',
+ },
+ {
+ title: 'Remark',
+ dataType: Table.ColumnRenderType.TEXT_FIELD,
+ key: 'Remark_ID',
+ width: '200',
+ },
+
+];
+
+export default class TableCellUpdate extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ columns:[],
+ }
+ }
+ componentDidMount(){
+ setTimeout(()=>{
+ this.setState({columns:[...columns]}); // 模拟接口请求columns，初始值columns为空 ,渲染子table组件
+ })
+ }
+
+ render() {
+ return