test/sf_base/static/js/updateTable.js

// 获取表格数据
function getDomData() {
    const dom = $('#updateTable').prev()
    if (!dom.length) return
    const table = $('#updateTable').prev().find('.o_list_table')
    const customTable = table.clone()
    customTable.addClass('customTable')
    table.parent().append(customTable)
    table.hide()
    const thead = customTable.children('thead')
    const tbody = customTable.children('tbody')
    const tableData = []
    const tbody_child = tbody.children()

    const tbody_child_len = tbody_child.length

    for (let v = 0; v < tbody_child_len; v++) { // 将数据取出来到tableData里面
        const data = tbody_child[v].innerText.split('\t')
        // console.log('dom data',data)
        const [index, deep, name, Φ, value] = data
        tableData.push({index, deep, name, Φ, value})
    }
    const ΦList = [...new Set(tableData.map(_ => _.name))] // ΦList去重
    const newTableData = {}
    tableData.forEach(_ => {
        const key = _.deep + '|' + _.Φ
        !newTableData[key] ? newTableData[key] = {i: _.index} : '';
        if (_.Φ) { // 去除没有Φ的脏数据
            newTableData[key]['Φ' + _.Φ] = _.value
            newTableData[key]['Φ' + _.Φ + 'i'] = _.index
        }
    })
    // console.log('qwdh',tableData, ΦList, newTableData);

    if (ΦList.filter(_ => _).length == 0) return;
    handleThead(thead, ΦList)

    handleTbody(tbody, newTableData, ΦList, table)
}

// 重新设置表头、
function handleThead(thead, ΦList) {
    const dom = thead.children().eq(0).children()
    const len = dom.length
    dom.eq(0).attr('rowspan', 2)
    dom.eq(1).attr('rowspan', 2)
    len == 5 ? dom.eq(2).attr('rowspan', 2) : ''
    dom.eq(-2).attr('colspan', ΦList.length)
    dom.eq(-1).remove()

    const tr = document.createElement('tr')
    for (let v = 0; v < ΦList.length; v++) {
        const th = document.createElement('th')
        th.innerText = 'Φ' + ΦList[v]
        tr.append(th)
    }
    thead.append(tr)
}

// 重新设置表格
function handleTbody(tbody, newTableData, ΦList, table) {
    console.log(newTableData)
    tbody.html('')
    let i = 0
    const data = Object.keys(newTableData)
    // data.sort((a, b) => {
    //     a = a.split('=')[1].split('%')[0]
    //     b = b.split('=')[1].split('%')[0]
    //     return a - b
    // })
    // console.log('wqoqw ',ΦList)
    data.forEach(_ => {
        i++
        const tr = $('<tr class="o_data_row"></tr>')
        const td0 = $('<td></td>')
        td0.text(i)
        tr.append(td0)
        const lit = _.split('|')
        //
        const td1 = $('<td></td>')
        const td2 = $('<td></td>')
        td1.text(lit[0])
        td2.text(lit[1] || '')
        tr.append(td1)
        tr.append(td2)
        ΦList.forEach(Φ => {
            const td = $('<td class="o_data_cell cursor-pointer o_field_cell o_list_char"></td>')
            td.text(newTableData[_]['Φ' + Φ])
            td.attr('col', newTableData[_]['Φ' + Φ + 'i'])
            td.attr('val', newTableData[_]['Φ' + Φ])
            td.attr('coustomTd', 1)
            tr.append(td)
        })
        //                 // for (let j = 0; j < ΦList.length; j++) {
        //                 //     const td = document.createElement('td')
        //                 //     td.innerText = newTableData[data[v]][_]
        //                 //     th.append(td)
        //                 // }
        tbody.append(tr)
    })
    // $(document).click(function (e) {
    //     if ($(e.target).attr('coustomTd')) {
    //         const orginV = $('[coustomInput=1]').children('input').val()
    //         $('[coustomInput=1]').parent().html(orginV)
    //         const v = $(e.target).attr('val')
    //         console.log($(e.target));
    //         $(e.target).html('')
    //         const input = $('<div coustomInput="1" name="feed_per_tooth" class="o_field_widget o_field_char"><input class="o_input" type="text" autocomplete="off" maxlength="20"></div>')
    //         input.children('input').val(v)
    //         $(e.target).append(input)
    //         input.children('input').focus()
    //         input.children('input').select()
    //     } else if ($(e.target).attr('coustomInput')) {
    //
    //     } else {
    //         const orginV = $('[coustomInput=1]').children('input').val()
    //         $('[coustomInput=1]').parent().html(orginV)
    //         const v = $(e.target).attr('val')
    //     }
    // })
    // $(document).off('change') // 防止重复绑定
//     $(document).on('change', '[coustomInput] input', function () {
//     $(this).parents('td').attr('val', $(this).val());
//     var eve1 = new Event('change');
//     var eve2 = new Event('input');
//     var eve3 = new Event('click');
//     const i = $(this).parents('td').attr('col');
//     let patchDom = table.find('tbody').children('tr').eq(i - 1);
//
//     if (patchDom.length === 0) {
//         console.error('No such row found');
//         return;
//     }
//
//     patchDom = patchDom.children().eq(-1);
//
//     setTimeout(() => {
//         if (patchDom.length === 0) {
//             console.error('No such cell found');
//             return;
//         }
//         patchDom[0].dispatchEvent(eve3); // Simulate click event
//
//         setTimeout(() => {
//             patchDom = patchDom.find('input');
//             if (patchDom.length === 0) {
//                 console.error('No input found in the target cell');
//                 return;
//             }
//             patchDom.val($(this).val());
//             patchDom[0].dispatchEvent(eve2);
//             patchDom[0].dispatchEvent(eve1);
//         }, 200);
//     }, 500);
// });

}

getDomData()