ant table 添加双击展开扩展显示信息

来源：互联网发布：淘宝联盟验证失败编辑：程序博客网时间：2024/06/05 07:00

项目环境: nodejs+react+ant

table 列表中扩展信息默认掩藏,只有单击行前的 + 图标才可以展开关闭扩展信息.

鼠标在该行上双击就可以和 + 图标相同的效果.

总体思路:

默认只要table 中添加 expandedRowRender= {this.showhtml.bind(this)} 就可以使用默认的 + 图标展开关闭扩展信息。

我们添加双击function onRowDoubleClick={this.handelOnRowDoubleClick.bind(this)}

                    手动设置展开的行 expandedRowKeys={this.state.expandedRows}                    默认+号效果失效，添加加号操作   onExpand = {this.handleOnExpand.bind(this)}

import React from "react";import moment from 'moment';import {Table, Button, Form, Input, message, Select ,DatePicker} from "antd";import auth from "../common/auth.jsx";const createForm = Form.create;const FormItem = Form.Item;const { RangePicker } = DatePicker;const Option = Select.Option;let columns = [    {        title: '时间',        dataIndex: 'Time'    },{        title:'状态',        dataIndex: 'Desc'    }];class MessageList extends React.Component {    constructor(props) {        super(props);        this.state = {           expandedRows:[]//1、设置存储展开行的数组，默认ant自己维护，我们想要修改 所以手动维护        };    }     handelOnRowDoubleClick(record, index, event) {//添加双击执行发那个法 获取自己维护的 数组，判断数组中是否包含 这行key，相应添加或者删除        let expandedRows = this.state.expandedRows;        if(auth.arrayFind(record.id, expandedRows)){            auth.arraySplice(record.id, expandedRows);        }else{            expandedRows.push(record.id);        }               this.setState({            expandedRows: expandedRows        });            }        handleOnExpand(expanded, record){//修改图标点击默认执行方法  获取自己维护的 数组，判断数组中是否包含 这行key，相应添加或者删除        let expandedRows = this.state.expandedRows;        if(expanded){            expandedRows.push(record.id);        }else{            auth.arraySplice(record.id, expandedRows);        }       this.setState({            expandedRows: expandedRows        });    }    showhtml(record){//显示内容和样式的渲染        let html = {__html:record.message};        return <div dangerouslySetInnerHTML={html}></div> ;    }          componentDidMount() { //初始化        this.fetch();    }    render() {                return (            <div>                 <Table columns={columns} rowKey={record => record.id}                        dataSource={this.state.tableData}                       pagination={this.state.pagination}        loading={this.state.loading}                       onChange={this.handleTableChange.bind(this)}//                       expandedRowRender= {this.showhtml.bind(this)}   //设置展开页显示内容和样式                     onRowDoubleClick={this.handelOnRowDoubleClick.bind(this)}//添加单击方法                       expandedRowKeys={this.state.expandedRows}//添加 回设置 展开的数组                       onExpand = {this.handleOnExpand.bind(this)}//添加 默认点击 + 图标方法                        />            </div>        );    }}const messagelist = createForm()(MessageList);export default messagelist;

阅读全文

0 0