1

mvc3コードをmvc4アプリケーションにコピーしていましたが、コードの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ファイルをコピーしましたか？
  • ASP.NET MVC 4は、3でバンドルする場合、異なるバンドルプロセスを使用します。
于 2012-12-18T20:55:30.107 に答える