我正在将我的 mvc 3 代码复制到一个 mvc 4 应用程序，我注意到我的 jqgrid 代码部分不再正确呈现。正如您在图像中看到的那样，缺少分页器，并且列名远大于默认的 jqgrid 设置。关于如何解决这个问题的任何想法？
图片
代码
<link href="@Url.Content("~/Content/jqgrid/ui.jqgrid.css")" rel="stylesheet" typpe="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.9.2.cupertino.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
var id = 0;
jQuery("#tblUsers").jqGrid({
url: '/Configuration/GetUsers/',
datatype: 'json',
mtype: 'POST',
colNames: ['User Name', 'Role'],
colModel: [
{ name: 'User Name', index: 'User Name', width: 90, align: 'left' },
{ name: 'Role', index: 'Role', width: 80, align: 'left' }],
//pager: jQuery('#pager'),
width: 700,
height: 200,
rowNum: 20,
rowList: [5, 10, 20, 50],
sortname: 'User Name',
sortorder: "desc",
viewrecords: true,
imgpath: '',
caption: 'Users'
});
jQuery("#tblUsers").jqGrid('navGrid', '#pager',
{
editfunc: function (rowid) {
//$('#dialogEdit').data('id', rowid);
//$('#dialogEdit').dialog('open');
},
addfunc: function () {
//$('#dialog').dialog('open');
},
delfunc: function (rowid) {
//$('#dialogDelete').data('id', rowid);
//$('#dialogDelete').dialog('open');
}
}, //options
{}, // edit options
{}, // add options
{}, // del options
{} // search options
);
});
</script>
<table id="tblUsers" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>