jquery - 如何在free-jqgrid中为行编辑/保存操作传递额外参数?
问题描述
我有一个 jgrid,代码如下。单击每行中的保存图标时,我希望向服务器发送一些额外的参数。这该怎么做?
let colNames = ['Designation', 'No. of Resource(s) Required', 'Competence for Job', 'Skill of Resource', 'Time Required(in %)', 'From', 'To', 'Reason For Request', 'Assigned Person(s)', 'Current Role in Project', 'resource_type', 'Billing'];
let colModel = [
{name:'resource_designation', index:'resource_designation', resizeable:true, editable: true, edittype: 'select', editoptions: {value:designation_options}, editrules:{required:true}, search: false},
{name:'resource_resources_required', index:'resource_resources_required', resizeable:true, editable: true, edittype: 'text', editrules:{required:true}, search: false},
{name:'resource_competence_for_job', index:'resource_competence_for_job', resizeable:true, editable: true, edittype: 'textarea', search: false},
{name:'resource_skill_of_resource', index:'resource_skill_of_resource', resizeable:true, editable: true, edittype: 'textarea', search: false},
{name:'resource_percentage_time_required', index:'resource_percentage_time_required', resizeable:true, editable: true, edittype: 'text', editrules:{required:true, integer: true}, search: false},
{name:'resource_duration_from', index:'resource_duration_from', resizeable:true, editable: true, edittype: 'text', editoptions: {
dataInit: function(el){
$(el).datepicker({
id: 'resource_duration_from',
dateFormat: "dd-M-yy"
});
}
}, search: false},
{name:'resource_duration_to', index:'resource_duration_to', resizeable:true, editable: true, edittype: 'text', editoptions: {
dataInit: function(el){
$(el).datepicker({
id: "resource_duration_to",
dateFormat: "dd-M-yy"
});
}
}, search: false},
{name:'resource_reason_for_request', index:'resource_reason_for_request', resizeable:true, editable: true, edittype: 'text', editrules:{required:true}, search: false},
//{name:'assigned_persons', index:'assigned_persons', resizeable:true, editable: true, edittype: 'select', editrules:{required:true}, search: false},
{name:'resource_assigned_persons', index:'resource_assigned_persons', resizeable:true, editable: true, edittype: 'select', editoptions:{value:assigned_persons}, editrules: {required: true}, search: false},
//{name:'current_role', index:'current_role', resizeable:true, editrules:{required:true}, search: false},
{name:'resource_current_role_in_project', index:'resource_current_role_in_project', resizeable:true, editable: true, edittype: 'select', editoptions: {value: designation_options}, editrules:{required:true}, search: false},
{name:'resource_resource_type', index:'resource_resource_type', resizeable:true, editable: true, edittype: 'select', editoptions: {value: {"Full Time": "Full Time", "Buffer": "Buffer", "Trainee": "Trainee"}}, editrules:{required:true}, search: false},
{name:'resource_billing', index:'resource_billing', resizeable:true, editable:true, edittype:'select', editoptions: {value:{"Billable": "Billable", "Non-Billable": "Non-Billable"}}, search: false}
];
let editparameters = {
"keys" : false,
"oneditfunc" : null,
"successfunc" : null,
"url" : location_url,
"extraparam" : {"grid": "rsf_people"},
"aftersavefunc" : null,
"errorfunc": null,
"afterrestorefunc" : null,
"restoreAfterError" : true,
"mtype" : "POST"
};
let parameters = {
edit: true,
editicon: "ui-icon-pencil",
add: true,
addicon:"ui-icon-plus",
save: true,
saveicon:"ui-icon-disk",
cancel: true,
cancelicon:"ui-icon-cancel",
//addParams : saveparameters,
addParams : {addRowParams:{extraparam:{"grid":"rsf_people"}}},
editParams : editparameters
};
$("#rsf_people").jqGrid({
url: location_url,
datatype: "json",
mtype: "POST",
postData: {action: "get_saved_allocated_resources"},
colNames:people_colNames,
colModel:people_colModel,
rowNum: 5,
height:'auto',
autowidth: true,
shrinkToFit: true,
pager: true,
emptyrecords: " ",
viewrecords: true,
sortorder: "asc",
scrollOffset:0,
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true, resetWidthOrg: true },
idPrefix: "g1_",
autoencode: true,
sortable: true,
rownumbers: true,
pagerRightWidth: 150,
editurl: location_url,
afterAddRow: function () {
recreateFilterToolbar.call(this);
},
afterSetRow: function () {
recreateFilterToolbar.call(this);
},
afterDelRow: function () {
recreateFilterToolbar.call(this);
},
inlineEditing: {
keys: true
},
formEditing: {
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13]
},
loadonce: true,
caption: "RSF People",
}).jqGrid("navGrid", {add: false, edit: false, del: false, search: false, refresh: false})
.jqGrid("inlineNav", parameters)
.jqGrid("filterToolbar");
/* To make grouped headers */
$("#rsf_people").jqGrid("setGroupHeaders", {
useColSpanStyle: false,
groupHeaders: [
{startColumnName: 'duration_from', numberOfColumns: 2, titleText: 'Duration'},
]
});
我的网格如下所示,
如果您查看图像,我已将 inlinenav 操作(如添加和编辑)标记为绿色。所以这些效果很好,我可以使用变量参数传递额外的参数。
但我想将这些相同的额外参数传递给图中红色矩形标记的编辑操作。我怎样才能做到这一点?
换句话说,当我单击绿色底部区域中的“+”图标时,它会在网格中添加一个新行,并在该行的左侧添加一个保存图标[操作列]。如果我填写数据并单击左侧同一行中的保存图标,它不会将额外参数传递给服务器。我怎样才能做到这一点?我希望在单击 save[exists in each row - 在图像中标记为红色] 图标时传递额外的参数。
如何做到这一点?请帮我!
解决方案
如果我正确理解您的代码,您希望grid=rsf_people
在“添加”和“编辑”操作的情况下作为保存内联数据的额外数据发送。目前您extraparam
仅设置为inlineNav
. 因此,如果仅在导航栏中使用“保存”图标而不是在“操作”格式化程序中,则将发送额外的数据。
免费的 jqGrid 支持inlineEditing
参数(参见inlineEditing: { keys: true }
你的代码),它简化了将参数转发到内联编辑方法。我建议你使用
inlineEditing: {
extraparam: { grid: "rsf_people" },
mtype: "POST",
keys: true
}
它应该可以解决您的问题。有关更多详细信息,请参阅wiki 文章。
推荐阅读
- flutter - 我在 Flutter 中为列表项设置了动画左右滚动效果,但整个列表立即更改?
- javascript - 高性能 Javascript 固定滚动
- python - 当我导入依赖项时,Dash 应用程序停止
- javascript - 与 Messenger 共享的 fb 使用 php 和 javscript 出现“未找到附件”错误
- python - Pickle 没有将数据保存到具有格式化字符串名称的文件中
- c - 扫描值的长度
- python - Python - 两个值之间的模数
- c++ - clang++ 和 g++ 之间的不同行为(使用 c++17)
- oracle - 从 Azure 数据工厂 v2 在 Oracle 中执行存储过程
- r - 贝叶斯网络元分析 (gemtc) - 指定比较顺序