Jqgrid使用表单模式添加/更新/删除
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jqgrid使用表单模式添加/更新/删除相关的知识,希望对你有一定的参考价值。
我正在使用免费版本(最新)的jqgrid和MVC c#。我已经用我的数据进行了设置,一切正常。我也在页脚上有工具栏,添加,编辑,删除,点击时确实显示了配置了所有表单元素的模态表单。我遇到的问题是:
- 如何获取我的模态的所有表单元素弹出例如我在我的col模型中有这个:
{ name: 'name', index: 'name', width: 90, sorttype: "text", editrules: { required: true }}
当用户点击添加/编辑行时,我将该名称作为弹出窗口中的一个字段。那么如何获取用户更新的字段值并将其传递给我的mvc控制器。 - 第二个问题是我可以在哪个方法中获取这些值以进行添加/编辑/删除?我想获取这些值并使用ajax来调用我的服务器端方法。
- 最后,如何在添加/编辑/删除后刷新网格。
更新:我使用下面的代码:
<script type="text/javascript">
$(function () {
"use strict";
var $grid = $("#list");
$grid.jqGrid({
url: '@Url.Action("GetData", "Home")',
datatype: "json",
mtype: 'Get',
colNames: ['Id', 'Name', 'Sex', 'Address'],
loadonce: true,
height: '100%',
autowidth: true,
colModel: [
{ name: 'uid', index: 'uid', editable: true, editrules: { required: true}},
{ name: 'name', index: 'name', editable: true, editrules: { required: true}},
{ name: 'sex', index: 'sex', editable: true, editrules: { required: true}},
{ name: 'address', index: 'address', editable: true, editrules: { required: true}}
],
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true, resetWidthOrg: true },
iconSet: "fontAwesome",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
rownumbers: true,
sortname: "uid",
sortorder: "desc",
pagerRightWidth: 150,
afterAddRow: function () {
},
afterSetRow: function () {
},
afterDelRow: function () {
},
inlineEditing: {
keys: true
},
formEditing: {
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13]
},
searching: {
loadFilterDefaults: false,
closeOnEscape: true,
searchOperators: true,
searchOnEnter: true
},
caption: "MyData"
}).jqGrid("navGrid")
.editGridRow("new", properties);
});
</script>
上面我可以使用ajax来调用我的mvc控制器:
$.ajax({
url: '/Home/AddNew',
type: 'POST',
async: false,
dataType: 'json',
processData: false,
data: {
//I try to use below code to get value but it returned null
uid: $('input#uid').val()
},
success: function (data) { }
});
我认为有一些误解,如何在jqGrid中进行编辑工作。 jqGrid中存在editurl
参数,默认值为free jqGrid中的"clientArray"
。这意味着数据的更改将在本地完成,而不会将任何数据发布到服务器。如果您指定例如editurl: '/Home/Change'
,则jqGrid将POST数据修改发送到服务器,Change
操作应该添加,编辑或删除数据。
如果您希望将其他数据与编辑数据一起发送,那么您应该使用其他选项/回调。选项/回调取决于您使用的编辑模式。您使用当前的表单编辑。确切地说,你使用navGrid
方法,它添加导航栏和添加/编辑/删除按钮。用户点击按钮后,填写相应的表格并按提交按钮jqGrid(navGrid
)执行editGridRow
或delGridRow
方法。通过指定navGrid
或qqxswpoi jqGrid选项中的选项,可以使用editGridRow
oder选项调用delGridRow
或navGrid
方法调用formEditing
时使用的选项。例如,您可以将代码修改为
formDeleting
上面的代码将默认的编辑参数发送到服务器和附加参数cmTemplate: { autoResizable: true, editable: true },
editurl: "/Home/Change",
formEditing: {
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
onclickSubmit: function (options, postData, editOrAdd) {
return {
myparam: $("#someInput").val()
};
}
},
formDeleting: {
onclickSubmit: function (options, postData, formRowIds) {
return {
myDelParam: $("#someInput").val()
};
}
}
或myparam
。从myDelParam
返回的对象将与该对象与jqGrid的其他编辑数据组合。因此,您需要将更多作为一个附加参数发送,只需返回具有更多属性的对象。
如果您不想在所有编辑操作中使用常用URL onclickSubmit
,可以使用editurl
或/和url
中定义的formEditing
选项。如果需要,可以使用formDeleting
定义为函数。对于exymple,
url
更新:如果使用cmTemplate: { autoResizable: true, editable: true },
formEditing: {
url: function (rowid, editOrAdd, postData, options) {
// editOrAdd is "add" or "edit"
return editOrAdd === "add" ? "/Home/Add" : "/Home/Edit";
},
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
onclickSubmit: function (options, postData, editOrAdd) {
if (editOrAdd === "add") {
return {
myAddParam: $("#someInput").val()
};
} else {
return {
myEditParam: $("#someInput").val()
};
}
}
},
formDeleting: {
url: "/Home/Delete",
onclickSubmit: function (options, postData, formRowIds) {
return {
myDelParam: $("#someInput").val()
};
}
}
从服务器重新加载修改后的数据,可以在loadonce: true
,reloadGridOptions: { fromServer: true }
和formEditing
中添加formDeleting
选项。喜欢
navOptions
选项cmTemplate: { autoResizable: true, editable: true },
formEditing: {
url: function (rowid, editOrAdd, postData, options) {
// editOrAdd is "add" or "edit"
return editOrAdd === "add" ? "/Home/Add" : "/Home/Edit";
},
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
reloadGridOptions: { fromServer: true },
onclickSubmit: function (options, postData, editOrAdd) {
if (editOrAdd === "add") {
return {
myAddParam: $("#someInput").val()
};
} else {
return {
myEditParam: $("#someInput").val()
};
}
}
},
formDeleting: {
url: "/Home/Delete",
reloadGridOptions: { fromServer: true },
onclickSubmit: function (options, postData, formRowIds) {
return {
myDelParam: $("#someInput").val()
};
}
},
navOptions: {
reloadGridOptions: { fromServer: true }
}
将被转发到fromServer: true
事件,数据将从服务器加载而不是本地重新加载。
以上是关于Jqgrid使用表单模式添加/更新/删除的主要内容,如果未能解决你的问题,请参考以下文章
如何在 jqgrid 编辑/添加/删除选项上打开部分视图作为弹出窗口
关闭使用afterSubmit函数添加/编辑jqgrid的表单