2017-08-01 12 views
0

私はTrirandによってjqGridを使用しています。グリッドのヘッダー、行、ページングは​​正しく表示されますが、データ行は入力されません。私は多くの記事を読んで多くの解決策を試しましたが、それは単に機能しません。私はいくつか非常にシンプルなものが欠けていると確信していますが、私はそれを理解することができません。jqGridはjson行をバインドしません。

{ "合計":1、 "ページ":1、 "記録":2、 "行":[ {

私はASP.NET MVCコントローラからの次の応答を取得しています"ID": "1"、 "StudentName": "STUDENT1"}、 { "ID": "2"、 "StudentName": "Student2"}]}

そしてjqGridコードは以下の通りです。 :

$(function() { 

$("#jqGrid").jqGrid({ 

    url: '/Home/GetStudentsLists', 
    dataType: "json", 
    mtype: 'GET', 
    colNames: ['Id', 'StudentName'], 
    colModel: [ 
     { name: 'Id', index: 'Id', width: 60 }, 
     { name: 'StudentName', index: 'StudentName', width: 60 } 
    ],   
    rowNum: 9999, 
    sortname: 'Id', 
    loadonce: true, 
    rowList: [10, 20, 30], 
    pager: '#jqpager', 
    viewrecords: true, 
    sortorder: "desc", 
    caption: "Students Details", 
    height: 100, 
    autowidth: true   
}) }); 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 
    ... 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 

    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" /> 
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" /> 
    <script src="~/Scripts/jquery-ui-1.10.0.js"></script> 
    <script src="~/Scripts/i18n/grid.locale-en.js"></script> 
    <script src="~/Scripts/jquery.jqGrid.js"></script> 
    <script src="~/Scripts/Custom/jQGridStudents.js"></script> 
</body> 

私はあなたの助けに感謝:

とスクリプトタグが含まれているレイアウトページには、次のようになります。

+0

jqGrid([free jqGrid](https://github.com/free-jqgrid/jqGrid)、商用の** fork **を使用している**または**使用できるjqGridの**バージョン** [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334)またはバージョン<= 4.7の古いjqGrid? "free jqGrid"を使用しない場合、 'dataType:" json "'を 'datatype:" json "'に修正する必要があります。あなたの主な問題であるはずです。あなたのコードでのその他の推奨事項は、使用するjqGridのバージョンとフォークによって異なります。 – Oleg

+0

ありがとうございました。私は、Trigandのjquery.jqGrid、バージョン4.4.4、およびnugetのjqueryバージョン3.1.1を使用しています。これらのグリッドはいずれも使用できます。第二に、私はあなたのコメントにdataType: "json"を2回書いたと思います。上記の[dataType: "json" to dataType: "json"]のテキストを参照してください。 –

+0

JavaScriptは**大文字と小文字を区別します**と 'datatype'は' dataType'と同じではありません**(capical 'T')。バージョン4.4.4は4.5歳であり、長い間死んでいます。 NuGetを使用している場合、古いpackgeをアンインストールし、[free-jqGrid](https://www.nuget.org/packages/free-jqGrid/)を使用することをお勧めします。あるいは、CDNから無料のjqGridをロードすることをお勧めします。 [ここ](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs)と[ここ](https://free-jqgrid.github.io/)を参照してください。 getting-started/index.html#the_first_grid_code)。 – Oleg

答えて

0

ここでオレグは私が問題を見つけるのを助けました。助けてくれてありがとうオレグ。

この問題は、datatyppeではなくdataTypeを書き込んだ単純なタイプミスによるものです。 dataTypeをデータ型に変更するとすぐにすべてが機能し始めました。

第2に、私が使用しているjqgridは古すぎたので、私はOlegのコメントで上記のように最新のものに行きます。

関連する問題