我正在尝试在我的MVC 4应用程序中创建一个jQGrid,但是在JQGrid中有一个编辑动作不起作用。我的代码如下。
.cshtml格式文件
<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
url: '/Home/FillGrid/',
datatype: "json",
colNames: ['Id', 'Name', 'Description', 'Created'],
colModel: [{ name: 'Id', Index: 'Id', width: 100, align: 'left' },
{ name: 'Name', Index: 'Name', width: 200, align: 'left', sortable: true, editable: true },
{ name: 'Description', Index: 'Description', width: 400, align: 'left', sortable: true, editable: true },
{ name: 'Created', Index: 'Created', width: 100, align: 'left' }],
rowNum: 10,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
sortname: 'id',
viewrecords: true,
sortorder: 'desc',
caption: "List Employee Details",
editurl: '@Url.Action("Update", "Home")',
deleteurl: '@Url.Action("Delete", "Home")',
});
$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{//EDIT
url: '@Url.Action("Update", "Home")',
width: 400,
},
{
width: 400,
//color: Red
},
{//DELETE
url: '@Url.Action("Delete", "Home")',
},
{//SEARCH
closeOnEscape: true
}
);
</script>
操作
public ActionResult FillGrid(string sidx, string sord, int page, int rows)
{
List<Master> models = new List<Master>();
int pageIndex = Convert.ToInt32(page) - 1;
int pagesize = rows;
int totalrecords = 0;
int totalpages = 0;
using (var db = new jQGridDemoEntities())
{
totalrecords = db.Masters.Count();
totalpages = (int)Math.Ceiling((float)totalrecords / (float)pagesize);
models = db.Masters.OrderBy(x => x.Id).Skip(pageIndex * pagesize).Take(pagesize).ToList();
}
var jsondata = new
{
total = totalpages,
page,
records = totalrecords,
rows = (
from master in models
select new
{
i = master.Id,
cell = new string[] { master.Id.ToString(), master.Name.ToString(), master.Description.ToString(), master.Created.ToString() }
}).ToArray()
};
return Json(jsondata, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult Update(string Name, string Description)
{
int ret = 2;
return Json(ret);
}
[HttpPost]
public ActionResult Delete(int Id)
{
int ret = 2;
return Json(ret);
}
我已经在jQgrid初始化部分指定了editurl和deleteurl。
例如,我需要更新“编辑”弹出窗口中的“名称”和“描述”字段。
“更新”操作在“编辑”弹出窗口中触发,但提交操作内部不起作用。
绑定字段需要任何配置。
1条答案
按热度按时间5f0d552i1#
当前代码包含一些错误。行中的第一个错误
将
i
属性赋值给(参见i = master.Id
)而不是使用id
名称(id = master.Id
)。通过指定jsonReader
选项的id
属性,可以更改输入数据中使用的id
的名称默认值为id: "id"
。要使用i
而不是id
,可以使用jsonReader: { id: "i" }
选项。还有一个指定用于行的
id
的好方法:使用key: true
属性来定义“Id”列。顺便说一下,如果您想向用户显示行的id
,并且使用key: true
属性,则不需要发送master.Id
两次(一次为id = master.Id
,另一次为cell = new string[] { master.Id.ToString(), ... }
)。您可以使用类似以下的内容在这种情况下,从
FillGrid
返回的数据将直接是数组或项。您不需要在返回的数据中设置total
、page
和records
属性,因为您使用了loadonce: true
,所有属性都会被jqGrid忽略。同样,
prmNames
选项可用于将用于添加/编辑和删除操作的默认id
名称重命名为其他名称。下一个问题,你用
sortname: 'id'
但是只有name: 'Id'
的列。因此您应该将sortname: 'id'
更改为sortname: 'Id'
。删除操作使用int Id
。因此您可以使用prmNames: { id: "Id" }
选项或将int Id
重命名为int id
。该选项也将在添加/编辑阳离子中使用。因此,您应该根据是否使用prmNames: { id: "Id" }
选项,将int Id
添加到int id
,再添加到Update
操作。