xgqfrms commented 6 years ago

table multi cols

bug


const cols = [
    {
        "key": "name",
        "title": "Name",
        "colspan": 1,
        "rowspan": 3,
        "children": null,
    },
    {
        "key": "addreess",
        "title": "Addreess",
        "colspan": 4,
        "rowspan": 1,
        "children": [
            {
                "key": "country",
                "title": "Country",
                "colspan": 2,
                "rowspan": 1,
                "children": [
                    {
                        "key": "language",
                        "title": "Language",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                    {
                        "key": "population",
                        "title": "Population",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                ],
            },
            {
                "key": "city",
                "title": "City",
                "colspan": 2,
                "rowspan": 1,
                "children": [
                    {
                        "key": "code",
                        "title": "Code",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                    {
                        "key": "rank",
                        "title": "Rank",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                ],
            },
        ],
    },
    {
        "key": "age",
        "title": "Age",
        "colspan": 1,
        "rowspan": 3,
        "children": null,
    }
];

const datas = [
    {
        "key": "001",
        "name": "xgqfrms",
        "age": 23,
        "country": "China",
        "city": "shanghai"
    },
    {
        "key": "002",
        "name": "Jackson",
        "age": 17,
        "country": "USA",
        "city": "LA"
    },
    {
        "key": "003",
        "name": "king",
        "age": 27,
        "country": "Korea",
        "city": "Seoul"
    },
];

const recursiveTrs = (cols = []) => {
    let trs = ``,
        newTr = ``,
        ths = ``;
    const delayTest = (children = []) => {
        newTr += recursiveTrs(children);
    };
    cols.forEach(
        (col, i) => {
            let {
                key,
                title,
                children,
                colspan,
                rowspan
            } = {...col};
            ths += `
                <th colspan="${colspan}" rowspan="${rowspan}" data-key="key">
                    ${title}
                </th>
            `;
            console.log(`${i} ths =`, ths);
            if(children !== null) {
                // console.log(`${i} new trs =`, trs);
                // trs += recursiveTrs(children);
                delayTest(children);
            }
        }
    );
    trs += `
        <tr>
            ${ths}
        </tr>
    `;
    trs += newTr;
    console.log(`return trs =`, trs);
    return trs;
};

recursiveTrs(cols);


const cols = [
    {
        "key": "name",
        "title": "Name",
        "colspan": 1,
        "rowspan": 2,
        "children": null,
    },
    {
        "key": "age",
        "title": "Age",
        "colspan": 1,
        "rowspan": 2,
        "children": null,
    },
    {
        "key": "addreess",
        "title": "Addreess",
        "colspan": 2,
        "rowspan": 1,
        "children": [
            {
                "key": "country",
                "title": "Country",
                "colspan": 1,
                "rowspan": 1,
                "children": null,
            },
            {
                "key": "city",
                "title": "City",
                "colspan": 1,
                "rowspan": 1,
                "children": null,
            },
        ],
    },
];

xgqfrms commented 6 years ago

https://www.cnblogs.com/xgqfrms/p/8999252.html

xgqfrms commented 6 years ago

https://gist.github.com/xgqfrms/6a6d8c77f05e23fdbe0a87dde97693b8

xgqfrms commented 6 years ago

refs

https://ant.design/components/table-cn/#components-table-demo-grouping-columns

https://github.com/ant-design/ant-design/tree/master/components/table

xgqfrms commented 6 years ago

https://www.w3.org/

fixed header table

http://salzerdesign.com/test/fixedTable.html http://salzerdesign.com/blog/?p=191

https://github.com/xyz-data/excellentexport/blob/master/excellentexport.js

xgqfrms commented 6 years ago

how to realize multi level table header in js

https://segmentfault.com/q/1010000012551764?sort=created https://segmentfault.com/q/1010000011776820/revision

xgqfrms commented 6 years ago

test level 3

OK


const  columns = [
    {
        "key": "name",
        "title": "Name",
        "colspan": 1,
        "rowspan": 3,
        "children": null,
    },
    {
        "key": "addreess",
        "title": "Addreess",
        "colspan": 4,
        "rowspan": 1,
        "children": [
            {
                "key": "country",
                "title": "Country",
                "colspan": 1,
                "rowspan": 2,
                "children": null,
            },
            {
                "key": "city",
                "title": "City",
                "colspan": 3,
                "rowspan": 1,
                "children": [
                    {
                        "key": "code",
                        "title": "Code",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                    {
                        "key": "language",
                        "title": "Language",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                    {
                        "key": "population",
                        "title": "Population",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                ],
            },
        ],
    },
    {
        "key": "age",
        "title": "Age",
        "colspan": 1,
        "rowspan": 3,
        "children": null,
    }
];

const recursiveTrs = (cols = []) => {
    let trs = ``,
        newTr = ``,
        ths = ``;
    const delayTest = (children = []) => {
        newTr += recursiveTrs(children);
    };
    cols.forEach(
        (col, i) => {
            let {
                key,
                title,
                children,
                colspan,
                rowspan
            } = {...col};
            ths += `
                <th colspan="${colspan}" rowspan="${rowspan}" data-key="key">
                    ${title}
                </th>
            `;
            console.log(`${i} ths =`, ths);
            if(children !== null) {
                // console.log(`${i} new trs =`, trs);
                // trs += recursiveTrs(children);
                delayTest(children);
            }
        }
    );
    trs += `
        <tr>
            ${ths}
        </tr>
    `;
    trs += newTr;
    console.log(`return trs =`, trs);
    return trs;
};

// recursiveTrs(columns);

xgqfrms commented 6 years ago

test level 4

OK


const  columns = [
    {
        "key": "name",
        "title": "Name",
        "colspan": 1,
        "rowspan": 4,
        "children": null,
    },
    {
        "key": "addreess",
        "title": "Addreess",
        "colspan": 4,
        "rowspan": 1,
        "children": [
            {
                "key": "country",
                "title": "Country",
                "colspan": 1,
                "rowspan": 3,
                "children": null,
            },
            {
                "key": "city",
                "title": "City",
                "colspan": 3,
                "rowspan": 1,
                "children": [
                    {
                        "key": "Street",
                        "title": "street",
                        "colspan": 1,
                        "rowspan": 2,
                        "children": null,
                    },
                    {
                        "key": "code",
                        "title": "Code",
                        "colspan": 2,
                        "rowspan": 1,
                        "children": [
                            {
                                "key": "language",
                                "title": "Language",
                                "colspan": 1,
                                "rowspan": 1,
                                "children": null,
                            },
                            {
                                "key": "population",
                                "title": "Population",
                                "colspan": 1,
                                "rowspan": 1,
                                "children": null,
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        "key": "age",
        "title": "Age",
        "colspan": 1,
        "rowspan": 4,
        "children": null,
    }
];

// recursiveTrs(columns);

xgqfrms commented 6 years ago

4 level

https://codepen.io/xgqfrms-xyzdata/pen/RyjwJY


const {Table} = antd;

const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        width: 100,
        fixed: 'left',
        filters: [
            {
                text: 'Joe',
                value: 'Joe'
            }, {
                text: 'John',
                value: 'John'
            }
        ],
        onFilter: (value, record) => record
            .name
            .indexOf(value) === 0
    }, {
        title: 'Other',
        children: [
            {
                title: 'Age',
                dataIndex: 'age',
                key: 'age',
                width: 200,
                sorter: (a, b) => a.age - b.age
            }, {
                title: 'Address',
                children: [
                    {
                        title: 'Street',
                        children: [
                            {
                                title: 'AAA',
                                dataIndex: 'aaa',
                                key: 'aaa',
                                width: 100
                            }, {
                                title: 'BBB',
                                dataIndex: 'bbb',
                                key: 'bbb',
                                width: 100
                            }
                        ]
                    }, {
                        title: 'Block',
                        children: [
                            {
                                title: 'Building',
                                dataIndex: 'building',
                                key: 'building',
                                width: 100
                            }, {
                                title: 'Door No.',
                                dataIndex: 'number',
                                key: 'number',
                                width: 100
                            }
                        ]
                    }
                ]
            }
        ]
    }, {
        title: 'Company',
        children: [
            {
                title: 'Company Address',
                dataIndex: 'companyAddress',
                key: 'companyAddress'
            }, {
                title: 'Company Name',
                dataIndex: 'companyName',
                key: 'companyName'
            }
        ]
    }, {
        title: 'Gender',
        dataIndex: 'gender',
        key: 'gender',
        width: 60,
        fixed: 'right'
    }
];

const data = [];
for (let i = 0; i < 100; i++) {
    data.push({
        key: i,
        name: 'John Brown',
        age: i + 1,
        aaa: 'AAAAAAAAAAAAA',
        bbb: 'BBBBBBBBBB',
        building: 'C',
        number: 2035,
        companyAddress: 'Lake Street 42',
        companyName: 'SoftLake Co',
        gender: 'M'
    });
}

ReactDOM.render(
    <Table
        columns={columns}
        dataSource={data}
        bordered
        size="middle"
        scroll={{
            x: '130%',
            y: 240
        }}
    />,
    mountNode
);

xgqfrms commented 6 years ago

still bug

peer deep bug?


const getDeepth = (cols = [], deep = 1) => {
    let newDeep = 1;
    cols.forEach(
        (col, i) => {
            let {
                children,
            } = {...col};
            if(children !== null) {
                newDeep += getDeepth(children, deep);
            }
        }
    );
    return newDeep;
};

// getDeepth(columns, 1);
// 4

const recursiveTrs = (cols = []) => {
    // let deeps = getDeepth(cols, 1);
    let trs = ``,
        newTr = ``,
        ths = ``;
    cols.forEach(
        (col, i) => {
            let {
                key,
                title,
                children,
                colspan,
                rowspan
            } = {...col};
            ths += `
                <th colspan="${colspan}" rowspan="${rowspan}" data-key="key">
                    ${title}
                </th>
            `;
            if(children !== null) {
                newTr += recursiveTrs(children);
            }
        }
    );
    trs += `
        <tr>
            ${ths}
        </tr>
    `;
    trs += newTr;
    console.log(`return trs =`, trs);
    return trs;
};

xgqfrms commented 6 years ago

Maximum call stack size exceeded.

https://stackoverflow.com/questions/6095530/maximum-call-stack-size-exceeded-error%5D

https://stackoverflow.com/questions/8731840/maximum-call-stack-size-exceeded-during-a-settimeout-call

https://www.sitepoint.com/community/t/uncaught-rangeerror-maximum-call-stack-size-exceeded/212748

https://stackoverflow.com/a/6095695 https://stackoverflow.com/questions/6095530/maximum-call-stack-size-exceeded-error/6095695#6095695

This is almost always because of a recursive function with a base case that isn't being met.

It means that somewhere in your code, you are calling a function which in turn calls another function and so forth, until you hit the call stack limit.

xgqfrms commented 6 years ago

OK


<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Multi Header Table Components</title>
    <style>
        @charset "UTf-8";
        /* table.css */
        /* @import url("./reset.css") all and (orientation:landscape); */
        /* @import "./reset.css"; */

         :root {
            --cololr: #000;
            --default-cololr: #fff;
            --new-cololr: #0f0;
        }

        * {
            box-sizing: border-box;
        }

        .xyzdata-table {
            box-sizing: border-box;
            display: table;
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #e6e6e6;
            background-color: #fff;
            color: #666;
        }

        .xyzdata-table-margin {
            margin: 10px 0;
        }

        .xyzdata-thead {
            background-color: #f2f2f2;
        }

        .xyzdata-tbody {
            background-color: #fff;
        }

        .xyzdata-tr {
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .xyzdata-tr:hover {
            background-color: #f2f2f2;
        }

        th,
        td {
            position: relative;
            padding: 9px 15px;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
            border: 1px solid #e6e6e6;
            min-width: 50px;
        }

        .th-max100,
        .td-max100 {
            max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        colgroup {
            display: table-column-group;
        }
    </style>
</head>

<body>
    <section>
        <table class="xyzdata-table">
            <caption>caption</caption>
            <colgroup>
                <col width="10%" style="background-color:#0f0;">
                <!-- <col width="60%" span="4" style="background-color:red;"> -->
                <col width="20%" span="1" style="background-color:red;">
                <col width="20%" span="1" style="background-color:#ccc;">
                <col width="20%" span="1" style="background-color:#fff;">
                <col width="20%" span="1" style="background-color:#0ff;">
                <col width="10%" style="background-color:green;">
            </colgroup>
            <thead>
                <tr>
                    <th colspan="1" rowspan="3" data-key="key">
                        Name
                    </th>
                    <th colspan="4" rowspan="1" data-key="key">
                        Addreess
                    </th>
                    <th colspan="1" rowspan="3" data-key="key">
                        Age
                    </th>
                </tr>
                <tr>
                    <th colspan="2" rowspan="1" data-key="key">
                        Country
                    </th>
                    <th colspan="2" rowspan="1" data-key="key">
                        City
                    </th>
                </tr>
                <tr>
                    <th colspan="1" rowspan="1" data-key="key">
                        Language
                    </th>
                    <th colspan="1" rowspan="1" data-key="key">
                        Population
                    </th>
                </tr>
                <tr>
                    <th colspan="1" rowspan="1" data-key="key">
                        Code
                    </th>
                    <th colspan="1" rowspan="1" data-key="key">
                        Rank
                    </th>
                </tr>
            </thead>
            <tbody class="xyzdata-tbody">
                <tr class="xyzdata-tr">
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
                <tr class="xyzdata-tr">
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
                <tr class="xyzdata-tr">
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
            </tbody>
        </table>
    </section>
    <!-- js -->
    <script src="./same-level-bug.js"></script>
</body>

</html>


"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright
 * @description
 * @augments
 * @example
 *
 */
const columns = [
    {
        "key": "name",
        "title": "Name",
        "colspan": 1,
        "rowspan": 4,
        "children": null
    },
    {
        "key": "addreess",
        "title": "Addreess",
        "colspan": 4,
        "rowspan": 1,
        "children": [
            {
                "key": "country",
                "title": "Country",
                "colspan": 1,
                "rowspan": 3,
                "children": null
            },
            {
                "key": "city",
                "title": "City",
                "colspan": 3,
                "rowspan": 1,
                "children": [
                    {
                        "key": "Street",
                        "title": "street",
                        "colspan": 1,
                        "rowspan": 2,
                        "children": null
                    },
                    {
                        "key": "code",
                        "title": "Code",
                        "colspan": 2,
                        "rowspan": 1,
                        "children": [
                            {
                                "key": "language",
                                "title": "Language",
                                "colspan": 1,
                                "rowspan": 1,
                                "children": null
                            },
                            {
                                "key": "population",
                                "title": "Population",
                                "colspan": 1,
                                "rowspan": 1,
                                "children": null
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "key": "age",
        "title": "Age",
        "colspan": 1,
        "rowspan": 4,
        "children": null
    }
];

const  cols = [
    {
        "key": "name",
        "title": "Name",
        "colspan": 1,
        "rowspan": 3,
        "children": null,
    },
    {
        "key": "addreess",
        "title": "Addreess",
        "colspan": 4,
        "rowspan": 1,
        "children": [
            {
                "key": "country",
                "title": "Country",
                "colspan": 2,
                "rowspan": 1,
                "children": [
                    {
                        "key": "language",
                        "title": "Language",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                    {
                        "key": "population",
                        "title": "Population",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                ],
            },
            {
                "key": "city",
                "title": "City",
                "colspan": 2,
                "rowspan": 1,
                "children": [
                    {
                        "key": "code",
                        "title": "Code",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                    {
                        "key": "rank",
                        "title": "Rank",
                        "colspan": 1,
                        "rowspan": 1,
                        "children": null,
                    },
                ],
            },
        ],
    },
    {
        "key": "age",
        "title": "Age",
        "colspan": 1,
        "rowspan": 3,
        "children": null,
    }
];

const getDeepth = (cols = [], deep = 1) => {
    let newDeep = 1;
    cols.forEach(
        (col, i) => {
            let {
                children,
            } = {...col};
            if(children !== null) {
                newDeep += getDeepth(children, deep);
            }
        }
    );
    return newDeep;
};

// getDeepth(columns, 1);
// 4

// const recursiveTrs = (cols = []) => {
//     let deeps = getDeepth(cols, 1);
//     console.log(`deeps =`, deeps);
//     // 3
//     let trs = ``,
//         newTr = ``,
//         ths = ``;
//     cols.forEach(
//         (col, i) => {
//             let {
//                 key,
//                 title,
//                 children,
//                 colspan,
//                 rowspan
//             } = {...col};
//             ths += `
//                 <th colspan="${colspan}" rowspan="${rowspan}" data-key="key">
//                     ${title}
//                 </th>
//             `;
//             if(children !== null) {
//                 newTr += recursiveTrs(children);
//             }
//         }
//     );
//     if (ths.length > 0) {
//         trs += `
//             <tr>
//                 ${ths}
//             </tr>
//         `;
//     }
//     trs += newTr;
//     // console.log(`return trs =`, trs);
//     return trs;
// };

const

recursiveTrs = (cols = []) => {
    let trs = ``,
        newTr = ``,
        ths = ``;
    // const delayTest = (children = []) => {
    //     newTr += recursiveTrs(children);
    // };
    let arr = [];
    cols.forEach(
        (col, i) => {
            let {
                key,
                title,
                children,
                colspan,
                rowspan
            } = {...col};
            ths += `
                <th colspan="${colspan}" rowspan="${rowspan}" data-key="key">
                    ${title}
                </th>
            `;
            if(children !== null) {
                // trs += recursiveTrs(children);
                // delayTest(children);
                // arr = children;
                children.forEach(
                    (obj) => {
                        arr.push(obj);
                        console.log(`new arr`, arr);
                    }
                );
            }
        }
    );
    trs += `
        <tr>
            ${ths}
        </tr>
    `;
    console.log(`arr`, arr);
    // max call Stack
    // delayTest(arr);
    if (arr.length) {
        console.log(`arr.length `, arr.length, `\n\n`);
        // delayTest(arr);
        newTr += recursiveTrs(arr);
    }
    trs += newTr;
    // console.log(`return trs =`, trs);
    return trs;
};

// let result = recursiveTrs(columns),
let result = recursiveTrs(cols),
    thead = document.querySelector(`thead`);

setTimeout(() => {
    thead.innerHTML = `${result}`;
}, 0);

xgqfrms commented 6 years ago

https://github.com/xyzdata/RAIO-new/blob/master/components/modules/tables/multi-header.js https://github.com/xyzdata/RAIO-new/blob/master/components/modules/tables/table.js

xgqfrms commented 6 years ago