,可以通过以下步骤实现:
colModel
属性来定义列模型,其中每个列都有一个formatter
属性,用于自定义列的显示方式。colModel: [
// 其他列定义...
{
name: 'edit',
index: 'edit',
width: 50,
align: 'center',
formatter: function(cellValue, options, rowObject) {
return '<button class="edit-btn" data-id="' + rowObject.id + '">编辑</button>';
}
}
]
在上述代码中,我们添加了一个名为edit
的列,使用自定义的formatter
函数来生成编辑按钮的HTML代码。按钮的data-id
属性可以用于存储行的唯一标识符,以便后续操作时可以获取到对应的行数据。
$(document).on('click', '.edit-btn', function() {
var rowId = $(this).data('id');
var deleteBtn = '<button class="delete-btn" data-id="' + rowId + '">删除</button>';
$(this).closest('tr').find('.delete-cell').html(deleteBtn);
});
在上述代码中,我们使用事件委托机制监听.edit-btn
按钮的点击事件。当按钮被点击时,我们获取到对应行的唯一标识符rowId
,然后生成一个删除按钮的HTML代码,并将其插入到对应行的删除按钮单元格中。
formatter
函数中生成删除按钮的HTML代码。colModel: [
// 其他列定义...
{
name: 'delete',
index: 'delete',
width: 50,
align: 'center',
formatter: function(cellValue, options, rowObject) {
return '<div class="delete-cell"></div>';
}
}
]
在上述代码中,我们添加了一个名为delete
的列,使用自定义的formatter
函数生成一个空的<div>
元素,用于容纳删除按钮。
通过以上步骤,我们可以实现在jqGrid行中显示一个自定义编辑按钮,并在点击编辑按钮时显示对应行的删除按钮。请注意,以上代码只是一个示例,具体实现可能需要根据实际情况进行调整和扩展。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云