如何使用免费的 jqgrid 属性有条件地添加操作按钮 [英] How to use free jqgrid properties to conditionally add actions buttons
问题描述
free jqgrid 显示订单.发布的订单应该有黄色背景，并且只打开操作按钮.未发布的订单有白色背景、标准删除和自定义发布操作按钮.
操作列的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();}}}},发布状态由布尔 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()}}]}],在其他网格发布状态由未发布文档未填充的 Kinkuup 列确定:
{"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)+")").每个(函数(){$("",{标题:确认(F2)"，鼠标悬停:函数(){$(this).addClass('ui-state-hover');},鼠标移出:函数(){$(this).removeClass('ui-state-hover');},点击:函数(e){重置选择()；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"));$("",{标题:打开(回车)"，鼠标悬停:函数(){$(this).addClass('ui-state-hover');},鼠标移出:函数(){$(this).removeClass('ui-state-hover');},点击:函数(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"));});之后，使用 如何使用 Fontawesome 复选框格式化程序从免费 jqgrid 中的已发布行中删除操作按钮，有条件地禁用行编辑并更改背景.
disableRows('Kinkuup', false);disableRows('Kinnitatud', true);var disableRows = function (rowName, isBoolean) {var iCol = getColumnIndexByName($grid, rowName),cRows = $grid[0].rows.length,iRow,排，班级名称，已发布，菌丝体，细胞数据，cm = $grid.jqGrid('getGridParam', 'colModel'),iActionsCol = getColumnIndexByName($grid, '_actions'), l,isPostedStr;l = cm.长度；for (iRow = 0; iRow < cRows; iRow = iRow + 1) {行 = $grid[0].rows[iRow];类名 = 行.类名；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,////项目:$grid.jqGrid("getLocalRow", row.id),//iCol: iCol//});//}isPosted = isPostedStr !== "假" &&isPostedStr.trim() !== "";如果(已发布){if ($.inArray('jqgrid-postedrow', className.split(' ')) === -1) {//todo: 如何禁用操作按钮和表单row.className = className + 'jqgrid-postedrow 不可编辑行';$(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" 进行了一些更改，以简化您的场景的实现.演示展示了如何使用新功能.它显示如下图所示的网格
演示将colModel中的Action列定义为
{ name: "act", template: "actions", align: "left", width: 58 },//58 = 2 + 18*3 + 2
它使用actionsNavOptions(也可以使用formatoptions)来配置formatter: "actions"的选项:
actionsNavOptions: {编辑按钮:假，风俗: [{ 动作:打开"，位置:第一"，onClick:功能(选项){alert("打开，rowid=" + options.rowid);} },{ 动作:发布"，位置:第一"，onClick:功能(选项){alert("Post, rowid=" + options.rowid);} }],posticon: "发锁",posttitle: "确认 (F2)",openicon: "fa-folder-open-o",opentitle: "打开(回车)",isDisplayButtons:函数(选项，rowData){if (options.rowData.closed) {//或 rowData.closed返回{帖子:{隐藏:真}，删除:{显示:假}}；}}}
Array custom 定义了动作名称、position 和 onClick 回调.要定义自定义按钮的图标和标题(工具提示)，应指定靠近导航栏选项的选项.指定图标类的属性将由动作名称(上例中的open和post)和后缀"icon"构成以同样的方式定义按钮的title属性值.
回调isDisplayButtons 允许根据行的数据和rowid 通知jqGrid 按钮的显示.options 参数与您从自定义格式化程序中知道的选项相同.options.rowId 是例如 rowid.最新版本的免费 jqGrid(4.8 后)通过包含 rowData 扩展了选项.可以看到isDisplayButtons的第二个参数已经是rowData了.options.rowData 和 rowData 的主要区别在于数据的格式.在使用 XML 输入的情况下，rowData 参数是输入数据的 XML 项.另一方面，选项 options.rowData 是 object，其属性类似于 colModel 中的 name 属性.特别是在使用 XML 数据的 loadonce: true 场景中，使用 options.rowData 具有优势.在上面的演示中，options.rowData 和 rowData 是相同的.
回调 isDisplayButtons 应该返回与动作名称相同属性的对象 { post: {...}, open: {...}, del: {...}，{...}，保存:{...}，取消:{} }.每个这样的对象的属性可以是
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');") 从指定的操作按钮.
free jqgrid shows orders. Posted orders should have yellow background and only open action button.
Unposted orders have white background, standard delete and custom post action button.
colmodel for actions column:
{"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 state is detemined by boolean Kinnitatud column :
{"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()}
}]}],
in other grid posted state is determined by Kinkuup column which is not filled for unposted documents:
{"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":[]}],
Both columns can hidden or visible in grid. depending on user preferences.
Custom actions buttons are created in loadComplete for all rows:
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"));
});
After that buttons are conditionally removed using code from How to remove action buttons from posted rows in free jqgrid using Fontawesome checkbox formatter , row editing is conditionally disabled and background changed.
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();
}
}
}
}
};
How to use free jqgrid actions options to simplify this code ?
How to create uniform way to hide both standard edit and delete and user defined actions buttons? Hiding standard buttons still requires DOM modification even if custom button creating can conditionally disabled using callback. Maybe to define all actions buttons in same way.
Maybe it can done using existing rowattr or cellattr callbacks or introducing new one.
Currently row is et to read only in code below using
row.className = className + ' jqgrid-postedrow not-editable-row';
$(row.cells[iActionsCol]).attr('editable', '0');
Is it reasonable to thant this so that diableRows can completely removed ?
Maybe rowattr() can used instead of this.
解决方案 I made some changes in formatter: "actions" to simplify implementing of your scenario. The demo shows how to use new features. It displays the grid like on the picture below
The demo defines Action columns in colModel as
{ name: "act", template: "actions", align: "left", width: 58 }, // 58 = 2 + 18*3 + 2
and it uses actionsNavOptions (one can use formatoptions alternatively) to configure the options of 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 } };
}
}
}
Array custom defined action name, position and the onClick callback. To define the icon and the title (the tooltip) of the custom button one should specify the options close to the options of navigator bar. The properties which specify the icon class will be constructed from the action name (open and post in the example above) and the suffix "icon" in the same way will be defined the value of title attribute for the button.
The callback isDisplayButtons allows to inform jqGrid about displaying of the buttons based on the data of the row and the rowid. The options parameter is the same options which you knows from custom formatter. options.rowId is the rowid for example. The latest version of free jqGrid (post 4.8) extended the options by including rowData. You can see that the second parameter of isDisplayButtons is already rowData. The main difference between options.rowData and rowData if the format of data. In case of usage XML input rowData parameter is XML item of input data. On the other side the option options.rowData is object with properties like name properties in colModel. Especially in case of usage loadonce: true scenario with XML data the usage of options.rowData have advantages. In the above demo options.rowData and rowData are identical.
The callback isDisplayButtons should return object with the same properties as the action names { post: {...}, open: {...}, del: {...}, edit: {...}, save: {...}, cancel: {} }. The properties of every such object can be
hidden: true - means including the button in the column but making it hidden. One can show the button later. The save and cancel buttons are hidden by default.display: false - means don't include the button at all. Returning del: {display: false} for example have the same effect like the option delbutton: false, but del: {display: false} works only for one row.noHovering: true can be used to remove hovering effect (onmouseover="jQuery(this).addClass('ui-state-hover');" onmouseout="jQuery(this).removeClass('ui-state-hover');") from the specified action button.
这篇关于如何使用免费的 jqgrid 属性有条件地添加操作按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
