JqGrid遍历所有数据单元格更新值 将分钟格式转为时分展示

问题根因 #

你直接读取cells[1].text()为空，是因为JqGrid渲染非主键/非首列时，单元格内部会嵌套一层.ui-jqgrid-cell-wrapper类的容器，文本没有直接放在td节点下，所以直接取td的文本拿不到值。另外直接操作原生DOM修改内容的方式不可靠，只要表格触发重绘（排序、翻页、调整列宽都会触发），修改的内容就会被重置，优先使用JqGrid自带的API处理。

推荐方案：使用formatter回调（渲染时直接格式化） #

这是JqGrid原生支持的格式化方式，完美适配动态列、动态数据的场景，不需要事后遍历，代码如下：

// 你自己的分钟转时分逻辑，可替换成你已实现的方法
function minute2hm(cellValue) {
    const h = Math.floor(Number(cellValue) / 60)
    const m = Number(cellValue) % 60
    return `${h}h:${m}m`
}

// 初始化JqGrid时，给需要转换的列添加formatter属性
jQuery('#statstab1grid').jqGrid({
    // 原有其他配置保持不变
    colModel: [
        {name: 'staff', label: 'Staff'}, // 员工列不需要格式化
        // 所有房间列统一绑定格式化方法
        {name: 'room1', label: 'Room 1', formatter: minute2hm},
        {name: 'room2', label: 'Room 2', formatter: minute2hm}
        // 如果房间列是动态生成的，生成colModel配置时给所有非员工列加上formatter: minute2hm即可
    ]
})

备用方案：事后遍历更新展示值 #

如果你确实需要在表格渲染完成后再批量修改，使用JqGrid提供的getRowData、setCellAPI实现，不要直接操作原生DOM：

const $grid = $('#statstab1grid')
// 获取所有行ID
const rowIds = $grid.jqGrid('getDataIDs')

rowIds.forEach(rowId => {
    // 获取当前行所有列的原始数据
    const rowData = $grid.jqGrid('getRowData', rowId)
    // 遍历所有列
    Object.keys(rowData).forEach(colKey => {
        // 排除员工列，只处理数值列，staff替换成你员工列的name属性值
        if (colKey === 'staff') return
        const minuteVal = Number(rowData[colKey])
        if (isNaN(minuteVal)) return
        // 替换成你自己的转换逻辑
        const h = Math.floor(minuteVal / 60)
        const m = minuteVal % 60
        const showText = `${h}h:${m}m`
        // 更新指定单元格的展示值
        $grid.jqGrid('setCell', rowId, colKey, showText)
    })
})

原有代码的兼容修正（不推荐，仅做问题验证） #

如果你一定要用原生DOM方式读取，需要定位到单元格内部的容器节点：

const $grid = jQuery('#statstab1grid') 
const rows = $grid[0].rows 
const rowCount = rows.length

for (let i = 1; i < rowCount; i++) {
    const cells = rows[i].cells
    console.log('员工名：', $(cells[0]).text())
    // 定位到JqGrid嵌套的内容容器
    console.log('Room1数值：', $(cells[1]).find('.ui-jqgrid-cell-wrapper').text())
}

内容的提问来源于stack exchange，提问作者Nervous Elk