1

我正在将我的 mvc 3 代码复制到一个 mvc 4 应用程序，我注意到我的 jqgrid 代码部分不再正确呈现。正如您在图像中看到的那样，缺少分页器，并且列名远大于默认的 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>
4

1 回答 1

3

您可能缺少此工作所需的 CSS 文件。有几件事要检查。

  • 您是否复制了主题和其他相关的 css 文件？
  • 如果您在 3 中将事物捆绑在一起，则 ASP.NET MVC 4 使用不同的捆绑过程。
于 2012-12-18T20:55:30.107 回答