我正在使用免费版(最新版)的jqgrid和MVC c#。
我有表单字段设置。当用户在页脚按钮(添加)中单击添加时,它会显示包含所有表单域的模式弹出窗口。
我希望表单字段中的第一个文本框能够自动完成,即当他们开始在文本框中输入他们的empployee数字时,我应该查询我的mvc控制器并获取数据然后预填充是否匹配。一旦预填充,我还想在表单上更新2个标签,firstname&姓。此外,应该禁用该按钮,直到在员工文本框中获取正确的ID。
不确定我该怎么做。我可以分享我用过的样本网格。
由于
<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: 'empid', index: 'empid', editable: true, editrules: { required: true}},
{ name: 'fname', index: 'fname', editable: true, editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
{ name: 'lname', index: 'lname', 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,
inlineEditing: {
keys: true
},
formEditing: {
reloadGridOptions: { fromServer: true },
reloadAfterSubmit: true,
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
closeAfterDelete: true,
savekey: [true, 13]
}
caption: "MyData"
}).jqGrid("navGrid")
.editGridRow("new", properties);
});
更新:
如果还有选项可以在文本框上使用onkeyup,mouseover等,以便我可以验证在文本框中输入的内容,然后根据此值更新其他文本框
答案 0 :(得分:0)
我通过使用keyup事件而不是使用自动完成来完成此操作。 相关代码如下:
colModel: [
{
name: 'empid', index: 'empid', editable: true, , editrules: { required: true },
editoptions:
{
dataEvents: [
{
type: 'keyup',
fn: function (e) {
$.ajax({
url: //call to my method in my mvc controller,
data: "empid=" + $(this).val(),
type: "GET",
success: function (data) {
//validate and populate other fields here
}
else {
}
},
error: function (passParams) {
// code here
}
});
}
}
]
}
]