如何使用免费的jqgrid属性有条件地添加操作按钮 [英] How to use free jqgrid properties to conditionally add actions buttons
问题描述
免费的jqgrid显示订单.发布的订单应具有黄色背景,并且只能打开操作按钮. 未发布的订单具有白色背景,标准删除和自定义发布操作按钮.
行为模型"列:
{"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();
}
}}},
发布状态由boolean 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)+")")
.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"));
});
row.className = className + ' jqgrid-postedrow not-editable-row';
$(row.cells[iActionsCol]).attr('editable', '0');
将此合理以使diableRows可以完全删除是否合理? 也许可以使用rowattr()代替.
我在formatter: "actions"
中进行了一些更改,以简化您的方案的实现. 演示显示了如何使用新功能.它像下面的图片一样显示网格
该演示将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
回调.要定义自定义按钮的图标和标题(工具提示),应在导航栏选项附近指定选项.指定图标类的属性将从动作名称(在上面的示例中为open
和post
)构造,并且后缀"icon"
将以相同的方式定义按钮的title属性值. /p>
回调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: {...}, edit: {...}, save: {...}, cancel: {} }
具有相同属性的对象.每个此类对象的属性都可以
-
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. Thesave
andcancel
buttons are hidden by default.display: false
- means don't include the button at all. Returningdel: {display: false}
for example have the same effect like the optiondelbutton: false
, butdel: {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屋!