none
jqgrid 不會顯示資料 RRS feed

  • 問題

  • 前輩好,

    最近開始使用jqgrid套件,

    想用Web form + EF6 來實作,

    但不知道為什麼就是顯示不出資料,有回應正確的Json格式字串,但就是跑不出來,希望前輩能解惑是哪邊有問題

    前端部分:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewUI.aspx.cs" Inherits="HFunctionLibrary.GridViewUI" %>
    
    <html>
    <head>
        <title>jqgrid</title>
        <script src="Scripts/jquery-3.3.1.js"></script>
        <script src="Scripts/jquery.jqGrid.js"></script>
        <script src="Scripts/jquery-ui-1.12.1.js"></script>
        <script src="Scripts/i18n/grid.locale-en.js"></script>
    
        <link href="Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
        <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    
        <script type="text/javascript">
        jQuery(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json",
                jsonReader: {
                    repeatitems: false
                },
                url: "WebServiceTable.asmx/GetListOfPersons",
                data: "{}",
                dataType: 'json',
                success: function (result) {
                    $("#tabPeopleList")[0].addJSONData(result.d);
                },
                error: function (result) {
    
                }
            });
    
            jQuery("#tabPeopleList").jqGrid({
                colNames: ['使用者編號', '使用者名稱', '真實名稱', '註記'],
                colModel: [
                    { name: 'UserID', label: '使用者編號', width: 40, align: 'left' },
                    { name: 'UserName', label: '使用者名稱', width: 40, align: 'left' },
                    { name: 'RealName', label: '真實名稱', width: 40, align: 'left' },
                    { name: 'Comments', label: '註記', width: 40, align: 'left' },
                ],
                autowidth: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#pager',
                sortname: 'docid',
                viewrecords: true,
                sortorder: "desc",
                caption: "我的第一個jqgrid出不來",
                height: '100%'
            });
        });
    </script>
    </head>
    
    <body>
        <table id="tabPeopleList"></table>
        <div id="pager"></div>
    </body>
    
    </html>
    

    後端部分:

            [WebMethod]
            [ScriptMethod]
            public string GetListOfPersons()
            {
                var User = from ut in dbContext.UserTable
                           select new
                           {
                               ut.UserID,
                               ut.UserName,
                               ut.RealName,
                               ut.Comments
                           };
    
                string JsonFormate = JsonConvert.SerializeObject(User, Formatting.Indented);
    
                return JsonFormate;
            }
    

    程式有跑到後端,而且有拋回一個正確Json格式的字串(有透過網路檢查Json格式,為正確的)。

    下為收到的Json格式

    [
      {
        "UserID": 1,
        "UserName": "Admin",
        "RealName": "系統管理者",
        "Comments": "系統管理者"
      },
      {
        "UserID": 2,
        "UserName": "Admin2",
        "RealName": "系統管理者",
        "Comments": "系統管理者"
      },
      {
        "UserID": 11,
        "UserName": "Admin3",
        "RealName": "Admin3",
        "Comments": ""
      },
      {
        "UserID": 12,
        "UserName": "50001",
        "RealName": "50001",
        "Comments": null
      },
      {
        "UserID": 13,
        "UserName": "00001",
        "RealName": "王小明",
        "Comments": null
      }
    ]

    想請問我可能哪裡錯了,有上網找過都是說Json格式可能有誤,或是

    jQuery(document).ready(function ()

    要拿掉或是要補上上面那段,都嘗試過了,但都不行。

    希望前輩能解惑,謝謝


    2018年4月27日 上午 03:41

解答

  • 你程式沒有綁資料來源的 URL。

    或是你可以參考:http://trirand.com/blog/jqgrid/jqgrid.html 裡面的 Array Data 的作法。


    強力監督SQL Injection問題!!

      • 小朱的技術隨手寫:http://www.dotblogs.com.tw/regionbbs/
      • 雲端學堂Facebook: http://www.facebook.com/studyazure

    • 已標示為解答 HumorA 2018年4月27日 上午 05:32
    2018年4月27日 上午 04:08
    版主

所有回覆

  • 你要不要看一下那個 result.d 的內容是什麼?

    強力監督SQL Injection問題!!

      • 小朱的技術隨手寫:http://www.dotblogs.com.tw/regionbbs/
      • 雲端學堂Facebook: http://www.facebook.com/studyazure

    2018年4月27日 上午 03:55
    版主
  • To 小朱前輩:

    result.d 的值為:

    [ { "UserID": 1, "UserName": "Admin", "RealName": "系統管理者", "Comments": "系統管理者" }, { "UserID": 2, "UserName": "CgRD", "RealName": "系統管理者", "Comments": "系統管理者" }, { "UserID": 11, "UserName": "ender", "RealName": "Ender", "Comments": "" }, { "UserID": 12, "UserName": "50001", "RealName": "50001", "Comments": null }, { "UserID": 13, "UserName": "00001", "RealName": "王小明", "Comments": null } ]

    拿去Json檢查網站結果是正確的,

    所以很納悶是哪裡寫錯了

    2018年4月27日 上午 04:04
  • 你程式沒有綁資料來源的 URL。

    或是你可以參考:http://trirand.com/blog/jqgrid/jqgrid.html 裡面的 Array Data 的作法。


    強力監督SQL Injection問題!!

      • 小朱的技術隨手寫:http://www.dotblogs.com.tw/regionbbs/
      • 雲端學堂Facebook: http://www.facebook.com/studyazure

    • 已標示為解答 HumorA 2018年4月27日 上午 05:32
    2018年4月27日 上午 04:08
    版主
  • 感謝小朱前輩!

    已成功修改

    附上程式碼如下:

          $.ajax({
                type: "POST",
                contentType: "application/json",
                jsonReader: {
                    repeatitems: false
                },
                url: "WebServiceTable.asmx/GetListOfPersons",
                data: "{}",
                dataType: 'json',
                success: function (result) {
                    var result = $.parseJSON(result.d);
                    for (var i = 0; i <= result.length; i++)
                    {
                        jQuery("#tabPeopleList").jqGrid('addRowData', i + 1, result[i]);
                    }
                },
                error: function (msg) {
                    alert(msg);
                }
            });

    2018年4月27日 上午 05:34