JQGrid子網格錯誤如何解決這個問題？

Question

我想根據我在網上遇到的例子生成一個帶有子網格的JQgrid，但是我使用的是json服務，而不是本地數據。

通過使用嵌套的JSON數據，其中嵌套的JSON數據用於子網格部分。 「：在26位200 OK意外標記我在JSON的SyntaxError」

我在做什麼錯誤或丟失

當我嘗試創建網格，我不斷收到此錯誤？

我的代碼如下，我的Fiddle is here

我的代碼

$(document).ready(function() { 
    var jsonData = { 
     id: 48803, 
     thingy: "DSK1", 
     number: "02200220", 
     status: "OPEN", 
     subgridData: [{ 
     num: 1, 
     item: "Item 1", 
     qty: 3 
     }, { 
     num: 2, 
     item: "Item 2", 
     qty: 5 
     }] 
    }, 
    { 
     id: 48769, 
     thingy: "APPR", 
     number: "77733337", 
     status: "ENTERED", 
     subgridData: [{ 
     num: 3, 
     item: "Item 3", 
     qty: 5 
     }, { 
     num: 2, 
     item: "Item 2", 
     qty: 10 
     }] 
    }, 
    mmddyyyy = ""; 
    /*********************************************************************/ 


    $("#grid").jqGrid({ 
    url: "/echo/json/", 
    mtype: "POST", 
    datatype: "json", 
    postData: { 
     json: JSON.stringify(jsonData) 
    }, 
    height: 'auto', 
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'], 
    colModel: [{ 
     name: 'id', 
     width: 60, 
     sorttype: "int", 
     key: true 
    }, { 
     name: 'thingy', 
     width: 90 
    }, { 
     name: 'number', 
     width: 80, 
     formatter: "integer" 
    }, { 
     name: 'status', 
     width: 80 
    }], 
    gridview: true, 
    autoencode: true, 
    pager: '#pagerId', 
    caption: "Stack Overflow Subgrid Example", 
    subGrid: true, 
    subGridOptions: { 
     plusicon: "ui-icon-triangle-1-e", 
     minusicon: "ui-icon-triangle-1-s", 
     openicon: "ui-icon-arrowreturn-1-e" 
    }, 
    shrinkToFit: false, 

    subGridRowExpanded: function(subgrid_id, row_id) { 
     var subgrid_table_id = subgrid_id + "_t", 
     pager_id = "p_" + subgrid_table_id, 
     localRowData = $(this).jqGrid("getLocalRow", row_id); 
     $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>"); 
     $("#" + subgrid_table_id).jqGrid({ 
     datatype: "local", 
     data: localRowData.subgridData, 
     colNames: ['No', 'Item', 'Qty'], 
     colModel: [{ 
      name: "num", 
      width: 80, 
      key: true 
     }, { 
      name: "item", 
      width: 130 
     }, { 
      name: "qty", 
      width: 70, 
      align: "right" 
     }], 
     rowNum: 20, 
     idPrefix: "s_" + row_id + "_", 
     pager: "#" + pager_id, 
     autowidth: true, 
     gridview: true, 
     autoencode: true, 
     sortname: "num", 
     sortorder: "asc", 
     height: "auto" 
     }).jqGrid('navGrid', "#" + pager_id, { 
     edit: false, 
     add: false, 
     del: false 
     }); 
    } 
    }); 


}); 

MY Fiddle

Answer 1

首先你必須修復語法錯誤。變量jsonData的定義形式爲

var jsonData = { 
     id: 48803, 
     ... 
    }, 
    { 
     id: 48769, 
     ... 
    }; 

是錯誤的。您嘗試將jsonData定義爲數組的項目。因此，代碼片段都被固定到

var jsonData = [{ 
     id: 48803, 
     ... 
    }, 
    { 
     id: 48769, 
     ... 
    }]; 

然後定義<table id="grid"></table>，但創造your demo使用$("#output").jqGrid({...});電網。你必須在兩種情況下使用相同的值如果id。

現在，回到你的主要問題。您要使用通過datatype: "json"填寫的數據項（$(this).jqGrid("getLocalRow", row_id).subgridData）的subgridData屬性。 datatype: "json"意味着基於服務器的排序，尋呼和數據過濾。 jqGrid不填寫本地數據（data參數）。填寫data您必須通知jqGrid，來自服務器的輸入數據包含完整數據（所有頁面），因此jqGrid應該填寫data選項並使用本地排序，尋呼和過濾。因此，你應該添加

loadonce: true, 

和

additionalProperties: ["subgridData"], 

還與性能id，thingy，number和status（主要的列通知的jqGrid，以填補subgridData財產本地數據的物品放在一起格）。

最後，您可以刪除不需要的尋呼機div，並使用尋呼機的簡化形式：pager: true。你應該考慮另外使用Font Awesome：iconSet: "fontAwesome"。

修改後的演示爲https://jsfiddle.net/OlegKi/615qovew/64/，它使用下面的代碼

$(document).ready(function() { 
    var jsonData = [{ 
     id: 48803, 
     thingy: "DSK1", 
     number: "02200220", 
     status: "OPEN", 
     subgridData: [{ 
     num: 1, 
     item: "Item 1", 
     qty: 3 
     }, { 
     num: 2, 
     item: "Item 2", 
     qty: 5 
     }] 
    }, 
    { 
     id: 48769, 
     thingy: "APPR", 
     number: "77733337", 
     status: "ENTERED", 
     subgridData: [{ 
     num: 3, 
     item: "Item 3", 
     qty: 5 
     }, { 
     num: 2, 
     item: "Item 2", 
     qty: 10 
     }] 
    }], 
    mmddyyyy = "", 
    $grid = $("#output"); 
    /*********************************************************************/ 

    $grid.jqGrid({ 
    url: "/echo/json/", 
    mtype: "POST", 
    datatype: "json", 
    postData: { 
     json: JSON.stringify(jsonData) 
    }, 
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'], 
    colModel: [{ 
     name: 'id', 
     width: 60, 
     sorttype: "int", 
     key: true 
    }, { 
     name: 'thingy', 
     width: 90 
    }, { 
     name: 'number', 
     width: 80, 
     formatter: "integer" 
    }, { 
     name: 'status', 
     width: 80 
    }], 
    loadonce: true, 
    additionalProperties: ["subgridData"], 
    autoencode: true, 
    pager: true, 
    caption: "Stack Overflow Subgrid Example", 
    subGrid: true, 
    /*subGridOptions: { 
     plusicon: "ui-icon-triangle-1-e", 
     minusicon: "ui-icon-triangle-1-s", 
     openicon: "ui-icon-arrowreturn-1-e" 
    },*/ 
    iconSet: "fontAwesome", 
    shrinkToFit: false, 
    subGridRowExpanded: function(subgridDivId, rowid) { 
     var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"), 
      subgridData = $(this).jqGrid("getLocalRow", rowid).subgridData; 

     $("#" + subgridDivId).append($subgrid); 
     $subgrid.jqGrid({ 
     data: subgridData, 
     colNames: ['No', 'Item', 'Qty'], 
     colModel: [{ 
      name: "num", 
      width: 80, 
      key: true 
     }, { 
      name: "item", 
      width: 130 
     }, { 
      name: "qty", 
      width: 70, 
      align: "right" 
     }], 
     rowNum: 20, 
     idPrefix: "s_" + rowid + "_", 
     pager: true, 
     iconSet: "fontAwesome", 
     autowidth: true, 
     autoencode: true, 
     sortname: "num" 
     }).jqGrid('navGrid', { 
     edit: false, 
     add: false, 
     del: false 
     }); 
    } 
    }).jqGrid('filterToolbar', { 
    stringResult: true, 
    searchOnEnter: false, 
    defaultSearch: "cn" 
    }); 

    $(window).on("resize", function() { 
    var newWidth = $grid.closest(".ui-jqgrid").parent().width(); 
    $grid.jqGrid("setGridWidth", newWidth, true); 
    }).triggerHandler("resize"); 
});