我正在尝试查找具有以下功能的 jqgrid 示例。
- 每行都有一个编辑图标
- 每行上都有一个删除图标(最好在编辑图标的单独列中)。
- 本地数据
- 模态编辑表单而不是内联编辑
这个示例是我见过的最接近的示例,但它没有功能 1 和 2。有人可以给我看一个包含所有这些功能的示例吗?
好的,所以我假设你有这样的 colNames 例如
['名称','公司','编辑','删除']
现在在每行的编辑列中,您想要一个自定义编辑按钮,与删除也相同,对吧?
我将为自定义按钮编写代码,如果您不想要自定义按钮,那么您可以使用action formatter。为此,我也会编写代码。
单独列中的自定义编辑和删除按钮。
function callMeOnLoadComplete(){
var iCol = getColumnIndexByName(grid,'Edit'); // 'Edit' - name of the actions column
grid.children("tbody")
.children("tr.jqgrow")
.children("td:nth-child("+(iCol+1)+")")
.each(function() {
$("<div>",
{
title: "Save",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click:
do sth
}
).css({"margin-left": "5px", float:"left"})
.addClass("ui-pg-div ui-inline-save")
.attr('id',"saveEdits")
.append('<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>')
.appendTo($(this).children("div"));
}
在 jqgrid 的 loadComplete 或 gridComplete 参数中调用上述函数。这适用于编辑列,同样您也可以对删除列执行此操作。
var getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length;
for (; i<l; i+=1) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
我假设您有 jquery custom ui.css,因为这些图标将从随附的图像中挑选出来。
Edit and Delete Button with action formatter
使用您的 colModal,为 Edit Column 执行类似的操作。
{ name: 'Edit', index: 'Edit', formatter: 'actions',formatoptions: {keys: true,delbutton:false}}
我给出 delbutton:false 的原因是因为你想要删除列中的删除按钮。如果您希望它在同一列中,请删除此属性,否则您也可以在 Delete 列中使用相同的操作格式化程序并在那里设置 editbutton:false。