如何使用免费的 jqgrid 属性有条件地添加操作按钮
How to use free jqgrid properties to conditionally add actions buttons
免费的 jqgrid 显示命令。已发布的订单应该有黄色背景并且只有打开操作按钮。
未posted 订单有白色背景、标准删除和自定义 post 操作按钮。
操作列的 colmodel：
{"hidden":false,"label":"Activity","name":"_actions","search":false,"width":94
,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":false,"onSuccess":function (jqXHR) { jqXHRFromOnSuccess=jqXHR;return true;}
,"delbutton":true,"delOptions":{"url":"http://localhost:52216/admin/Grid/Delete?_entity=DoklstlT","afterComplete":function (response, postdata, formid) {
summarefresh($grid);
$grid[0].focus();
}
}}},
posted 状态由布尔 Kinnitatud 列确定：
{"label":null,"name":"Kinnitatud","index":"Kinnitatud","editoptions":{"value":"True:False","readonly":"readonly","disabled":"disabled"},"template":"booleanCheckboxFa","editable":true,"width":0,"classes":null,"hidden":true,"searchoptions":{"sopt":["eq","ne"],"value":":Free;true:Yes;false:No"},"dataEvents":[{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
},"",{"type":"click","fn":function(e) {dataChanged(e.target)}
},{"type":"blur","fn":function(e) {summarefresh()}
}]}],
在其他网格中 posted 状态由未填充的 Kinkuup 列确定 posted 文档：
{"template":DateTemplate
,"label":null,"name":"Kinkuup","index":"Kinkuup","editoptions":{"dataInit":null,"size":10,"readonly":"readonly","disabled":"disabled"},"searchoptions":{"dataInit":initDateSearch
,"size":10,"attr":{"size":10}},"width":0,"classes":null,"hidden":true,"dataEvents":[]}],
两列都可以在网格中隐藏或可见。取决于用户偏好。
在 loadComplete 中为所有行创建了自定义操作按钮：
loadComplete: function() {
var iCol = getColumnIndexByName($(this),'_actions');
$(this).children("tbody").children("tr.jqgrow")
.children("td:nth-child("+(iCol+1)+")")
.each(function() {
$("<div>",
{
title: "Confirm (F2)",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
resetSelection();
idsOfSelectedRows = [$(e.target).closest("tr.jqgrow").attr("id")];
$("#grid").jqGrid('setSelection', $(e.target).closest("tr.jqgrow").attr("id"), false);
$('#grid_postbutton').click();
}
}
)
.addClass("ui-pg-div ui-inline-post")
.append('<span class="fa ui-state-default fa-fw fa-lock"></span>')
.prependTo($(this).children("div"));
$("<div>",
{
title: "Open (Enter)",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
openDetail($(e.target).closest("tr.jqgrow").attr("id"));
}
}
)
.addClass("ui-pg-div ui-inline-open")
.append('<span class="fa ui-state-default fa-folder-open-o"></span>')
.prependTo($(this).children("div"));
});
使用 中的代码有条件地删除按钮后，有条件地禁用行编辑并更改背景。
disableRows('Kinkuup', false);
disableRows('Kinnitatud', true);
var disableRows = function (rowName, isBoolean) {
var iCol = getColumnIndexByName($grid, rowName),
cRows = $grid[0].rows.length,
iRow,
row,
className,
isPosted,
mycell,
mycelldata,
cm = $grid.jqGrid('getGridParam', 'colModel'),
iActionsCol = getColumnIndexByName($grid, '_actions'), l,
isPostedStr;
l = cm.length;
for (iRow = 0; iRow < cRows; iRow = iRow + 1) {
row = $grid[0].rows[iRow];
className = row.className;
if ($(row).hasClass('jqgrow')) {
isPostedStr = $.unformat.call($grid[0], row.cells[iCol],
{ rowId: row.id, colModel: cm[iCol] }, iCol);
//if (cm[iCol].convertOnSave) {
// isPosted = cm[iCol].convertOnSave.call(this, {
// newValue: isPostedStr,
// cm: cm[iCol],
// oldValue: isPostedStr,
// id: row.id,
// //item: $grid.jqGrid("getLocalRow", row.id),
// iCol: iCol
// });
//}
isPosted = isPostedStr !== "False" && isPostedStr.trim() !== "";
if (isPosted) {
if ($.inArray('jqgrid-postedrow', className.split(' ')) === -1) {
// todo: how to disable actions buttons and form editing:
row.className = className + ' jqgrid-postedrow not-editable-row';
$(row.cells[iActionsCol]).attr('editable', '0');
$(row.cells[iActionsCol]).find(">div>div.ui-inline-del").hide();
$(row.cells[iActionsCol]).find(">div>div.ui-inline-post").hide();
$(row.cells[iActionsCol]).find(">div>div.ui-inline-edit").hide();
}
}
}
}
};
如何使用免费的 jqgrid 操作选项来简化此代码？
如何创建统一的方式来隐藏标准编辑和删除以及用户定义的操作按钮？隐藏标准按钮仍然需要 DOM 修改，即使自定义按钮创建可以使用回调有条件地禁用。也许以相同的方式定义所有操作按钮。
也许可以使用现有的 rowattr 或 cellattr 回调或引入新回调来完成。
当前行只能在下面的代码中使用
读取
row.className = className + ' jqgrid-postedrow not-editable-row';
$(row.cells[iActionsCol]).attr('editable', '0');
为了完全删除 diableRows 是否合理？
也许 rowattr() 可以用来代替这个。
我在 formatter: "actions" 中做了一些更改以简化您的方案的实施。 The demo 展示了如何使用新功能。它显示如下图所示的网格
该演示将 colModel 中的操作列定义为
{ name: "act", template: "actions", align: "left", width: 58 }, // 58 = 2 + 18*3 + 2
并且它使用actionsNavOptions（也可以使用formatoptions）来配置formatter: "actions"的选项：
actionsNavOptions: {
editbutton: false,
custom: [
{ action: "open", position: "first",
onClick: function (options) {
alert("Open, rowid=" + options.rowid);
} },
{ action: "post", position: "first",
onClick: function (options) {
alert("Post, rowid=" + options.rowid);
} }
],
posticon: "fa-lock",
posttitle: "Confirm (F2)",
openicon: "fa-folder-open-o",
opentitle: "Open (Enter)",
isDisplayButtons: function (options, rowData) {
if (options.rowData.closed) { // or rowData.closed
return { post: { hidden: true }, del: { display: false } };
}
}
}
数组 custom 定义的动作名称，position 和 onClick 回调。要定义自定义按钮的图标和标题（工具提示），应该指定靠近导航栏选项的选项。指定图标 class 的属性将从操作名称（上例中的 open 和 post 构造）和后缀 "icon" 以相同的方式定义按钮的 title 属性值。
回调 isDisplayButtons 允许通知 jqGrid 关于基于行数据和 rowid 显示按钮。 options 参数与您从自定义格式化程序中了解到的选项相同。 options.rowId 例如是rowid。最新版本的免费 jqGrid (post 4.8) 通过包含 rowData 扩展了选项。可以看到isDisplayButtons的第二个参数已经是rowData了。 options.rowData 和 rowData 之间的主要区别是数据格式。在使用 XML 的情况下，输入 rowData 参数是输入数据的 XML 项。另一方面，选项 options.rowData 是 object，其属性类似于 colModel 中的 name 属性。特别是在使用 loadonce: true 和 XML 数据的情况下，使用 options.rowData 具有优势。在上面的演示中 options.rowData 和 rowData 是相同的。
回调 isDisplayButtons 应 return object 具有与操作名称 { post: {...}, open: {...}, del: {...}, edit: {...}, save: {...}, cancel: {} } 相同的属性。每个这样的 object 的属性可以是
hidden: true - 表示在列中包含按钮但将其隐藏。稍后可以显示该按钮。 save 和 cancel 按钮默认隐藏。display: false - 表示根本不包含该按钮。例如，返回 del: {display: false} 与选项 delbutton: false 具有相同的效果，但 del: {display: false} 仅适用于一行。noHovering: true 可用于从指定的操作按钮中删除悬停效果（onmouseover="jQuery(this).addClass('ui-state-hover');" onmouseout="jQuery(this).removeClass('ui-state-hover');"）。
免费的 jqgrid 显示命令。已发布的订单应该有黄色背景并且只有打开操作按钮。 未posted 订单有白色背景、标准删除和自定义 post 操作按钮。
操作列的 colmodel：
{"hidden":false,"label":"Activity","name":"_actions","search":false,"width":94
,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":false,"onSuccess":function (jqXHR) { jqXHRFromOnSuccess=jqXHR;return true;}
,"delbutton":true,"delOptions":{"url":"http://localhost:52216/admin/Grid/Delete?_entity=DoklstlT","afterComplete":function (response, postdata, formid) {
summarefresh($grid);
$grid[0].focus();
}
}}},
posted 状态由布尔 Kinnitatud 列确定：
{"label":null,"name":"Kinnitatud","index":"Kinnitatud","editoptions":{"value":"True:False","readonly":"readonly","disabled":"disabled"},"template":"booleanCheckboxFa","editable":true,"width":0,"classes":null,"hidden":true,"searchoptions":{"sopt":["eq","ne"],"value":":Free;true:Yes;false:No"},"dataEvents":[{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
},"",{"type":"click","fn":function(e) {dataChanged(e.target)}
},{"type":"blur","fn":function(e) {summarefresh()}
}]}],
在其他网格中 posted 状态由未填充的 Kinkuup 列确定 posted 文档：
{"template":DateTemplate
,"label":null,"name":"Kinkuup","index":"Kinkuup","editoptions":{"dataInit":null,"size":10,"readonly":"readonly","disabled":"disabled"},"searchoptions":{"dataInit":initDateSearch
,"size":10,"attr":{"size":10}},"width":0,"classes":null,"hidden":true,"dataEvents":[]}],
两列都可以在网格中隐藏或可见。取决于用户偏好。
在 loadComplete 中为所有行创建了自定义操作按钮：
loadComplete: function() {
var iCol = getColumnIndexByName($(this),'_actions');
$(this).children("tbody").children("tr.jqgrow")
.children("td:nth-child("+(iCol+1)+")")
.each(function() {
$("<div>",
{
title: "Confirm (F2)",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
resetSelection();
idsOfSelectedRows = [$(e.target).closest("tr.jqgrow").attr("id")];
$("#grid").jqGrid('setSelection', $(e.target).closest("tr.jqgrow").attr("id"), false);
$('#grid_postbutton').click();
}
}
)
.addClass("ui-pg-div ui-inline-post")
.append('<span class="fa ui-state-default fa-fw fa-lock"></span>')
.prependTo($(this).children("div"));
$("<div>",
{
title: "Open (Enter)",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
openDetail($(e.target).closest("tr.jqgrow").attr("id"));
}
}
)
.addClass("ui-pg-div ui-inline-open")
.append('<span class="fa ui-state-default fa-folder-open-o"></span>')
.prependTo($(this).children("div"));
});
使用
disableRows('Kinkuup', false);
disableRows('Kinnitatud', true);
var disableRows = function (rowName, isBoolean) {
var iCol = getColumnIndexByName($grid, rowName),
cRows = $grid[0].rows.length,
iRow,
row,
className,
isPosted,
mycell,
mycelldata,
cm = $grid.jqGrid('getGridParam', 'colModel'),
iActionsCol = getColumnIndexByName($grid, '_actions'), l,
isPostedStr;
l = cm.length;
for (iRow = 0; iRow < cRows; iRow = iRow + 1) {
row = $grid[0].rows[iRow];
className = row.className;
if ($(row).hasClass('jqgrow')) {
isPostedStr = $.unformat.call($grid[0], row.cells[iCol],
{ rowId: row.id, colModel: cm[iCol] }, iCol);
//if (cm[iCol].convertOnSave) {
// isPosted = cm[iCol].convertOnSave.call(this, {
// newValue: isPostedStr,
// cm: cm[iCol],
// oldValue: isPostedStr,
// id: row.id,
// //item: $grid.jqGrid("getLocalRow", row.id),
// iCol: iCol
// });
//}
isPosted = isPostedStr !== "False" && isPostedStr.trim() !== "";
if (isPosted) {
if ($.inArray('jqgrid-postedrow', className.split(' ')) === -1) {
// todo: how to disable actions buttons and form editing:
row.className = className + ' jqgrid-postedrow not-editable-row';
$(row.cells[iActionsCol]).attr('editable', '0');
$(row.cells[iActionsCol]).find(">div>div.ui-inline-del").hide();
$(row.cells[iActionsCol]).find(">div>div.ui-inline-post").hide();
$(row.cells[iActionsCol]).find(">div>div.ui-inline-edit").hide();
}
}
}
}
};
如何使用免费的 jqgrid 操作选项来简化此代码？
如何创建统一的方式来隐藏标准编辑和删除以及用户定义的操作按钮？隐藏标准按钮仍然需要 DOM 修改，即使自定义按钮创建可以使用回调有条件地禁用。也许以相同的方式定义所有操作按钮。 也许可以使用现有的 rowattr 或 cellattr 回调或引入新回调来完成。
当前行只能在下面的代码中使用
读取row.className = className + ' jqgrid-postedrow not-editable-row';
$(row.cells[iActionsCol]).attr('editable', '0');
为了完全删除 diableRows 是否合理？ 也许 rowattr() 可以用来代替这个。
我在 formatter: "actions" 中做了一些更改以简化您的方案的实施。 The demo 展示了如何使用新功能。它显示如下图所示的网格
该演示将 colModel 中的操作列定义为
{ name: "act", template: "actions", align: "left", width: 58 }, // 58 = 2 + 18*3 + 2
并且它使用actionsNavOptions（也可以使用formatoptions）来配置formatter: "actions"的选项：
actionsNavOptions: {
editbutton: false,
custom: [
{ action: "open", position: "first",
onClick: function (options) {
alert("Open, rowid=" + options.rowid);
} },
{ action: "post", position: "first",
onClick: function (options) {
alert("Post, rowid=" + options.rowid);
} }
],
posticon: "fa-lock",
posttitle: "Confirm (F2)",
openicon: "fa-folder-open-o",
opentitle: "Open (Enter)",
isDisplayButtons: function (options, rowData) {
if (options.rowData.closed) { // or rowData.closed
return { post: { hidden: true }, del: { display: false } };
}
}
}
数组 custom 定义的动作名称，position 和 onClick 回调。要定义自定义按钮的图标和标题（工具提示），应该指定靠近导航栏选项的选项。指定图标 class 的属性将从操作名称（上例中的 open 和 post 构造）和后缀 "icon" 以相同的方式定义按钮的 title 属性值。
回调 isDisplayButtons 允许通知 jqGrid 关于基于行数据和 rowid 显示按钮。 options 参数与您从自定义格式化程序中了解到的选项相同。 options.rowId 例如是rowid。最新版本的免费 jqGrid (post 4.8) 通过包含 rowData 扩展了选项。可以看到isDisplayButtons的第二个参数已经是rowData了。 options.rowData 和 rowData 之间的主要区别是数据格式。在使用 XML 的情况下，输入 rowData 参数是输入数据的 XML 项。另一方面，选项 options.rowData 是 object，其属性类似于 colModel 中的 name 属性。特别是在使用 loadonce: true 和 XML 数据的情况下，使用 options.rowData 具有优势。在上面的演示中 options.rowData 和 rowData 是相同的。
回调 isDisplayButtons 应 return object 具有与操作名称 { post: {...}, open: {...}, del: {...}, edit: {...}, save: {...}, cancel: {} } 相同的属性。每个这样的 object 的属性可以是
hidden: true- 表示在列中包含按钮但将其隐藏。稍后可以显示该按钮。save和cancel按钮默认隐藏。display: false- 表示根本不包含该按钮。例如，返回del: {display: false}与选项delbutton: false具有相同的效果，但del: {display: false}仅适用于一行。noHovering: true可用于从指定的操作按钮中删除悬停效果（onmouseover="jQuery(this).addClass('ui-state-hover');" onmouseout="jQuery(this).removeClass('ui-state-hover');"）。