如何在jqGrid中实现行的复制粘贴功能？

实现思路 #

核心是通过jqGrid的API抓取目标行数据，在新增行进入编辑状态后，将数据填充到对应字段控件中，具体分三步：

• 给网格每行添加复制按钮，点击时保存当前行的完整数据
• 用全局变量暂存复制的行数据
• 点击添加按钮进入编辑状态后，通过粘贴操作把暂存数据填充到新行的编辑控件

具体代码实现 #

1. 在jqGrid的colModel中添加复制按钮列：

colModel: [
    // 其他列配置...
    {
        name: 'copyBtn',
        label: '操作',
        width: 80,
        formatter: function() {
            return '<button class="copy-row-btn">复制</button>';
        }
    }
]

2. 绑定复制按钮点击事件，存储行数据：

// 全局变量存复制的行数据
let copiedRowData = null;

$(document).on('click', '.copy-row-btn', function() {
    // 获取当前按钮所在行的ID
    const rowId = $(this).closest('tr.jqgrow').attr('id');
    // 抓取该行完整数据
    copiedRowData = $('#yourGridId').jqGrid('getRowData', rowId);
});

3. 修改添加按钮逻辑，在新行编辑状态下实现粘贴功能：

// 假设添加按钮ID为addRowBtn
$('#addRowBtn').on('click', function() {
    // 添加新行并进入编辑状态
    $('#yourGridId').jqGrid('addRow', {
        initdata: {},
        position: 'last',
        addRowParams: {
            keys: true,
            oneditfunc: function(rowId) {
                // 给新行添加粘贴按钮
                $(`#${rowId} td[aria-describedby="yourGridId_copyBtn"]`).html('<button class="paste-row-btn">粘贴</button>');
            }
        }
    });

    // 绑定粘贴按钮事件
    $(document).on('click', '.paste-row-btn', function() {
        if (!copiedRowData) {
            alert('请先复制一行数据');
            return;
        }
        const rowId = $(this).closest('tr.jqgrow').attr('id');
        // 遍历复制的数据，填充到对应编辑控件
        for (const field in copiedRowData) {
            if (copiedRowData.hasOwnProperty(field) && field !== 'copyBtn') {
                const editEl = $(`#${rowId}_${field}`);
                if (editEl.is('input[type="text"]')) {
                    editEl.val(copiedRowData[field]);
                } else if (editEl.is('select')) {
                    editEl.val(copiedRowData[field]).trigger('change');
                }
                // 单选框、复选框等特殊控件可按需扩展赋值逻辑
            }
        }
    });
});

注意事项 #

• 替换代码中的yourGridId为你实际的jqGrid容器ID
• 如果网格使用了自定义编辑器，需要针对编辑器类型调整赋值逻辑
• 也可将粘贴触发改为快捷键（如Ctrl+V），通过监听键盘事件实现

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