2016-06-10 140 views
0

在我嘗試了每一個從stackoverflow的東西后,我用完了想法。 問題是:我有一個子網格的jqGrid。網格非常完美,但是子網格不顯示數據。JqGrid - SubGrid不顯示數據

JS代碼:

$(document).ready(function() { 
 
     $("#tblJQGrid").jqGrid(
 
    { 
 
     url: '@Url.Action("GetDataForGrid", "Validator")', 
 
     datatype: "json", 
 
     mtype: 'GET', 
 
     colNames: ['Archive Name', 'Upload By', 'Upload Date', 'Size in Mb'], 
 
     colModel: [ 
 
     { name: 'ArchiveName', index: 'ArchiveName', width: 150, stype: 'text' }, 
 
     { name: 'UploadUser', index: 'UploadUser', width: 150 }, 
 
     { name: 'UploadDate', index: 'UploadDate', width: 150 }, 
 
     { name: 'Size', index: 'Size', width: 150 } 
 
     ], 
 
     sortname: 'ArchiveName', 
 
     rowNum: 10, 
 
     autowidth: true, 
 
     height: "auto", 
 
     gridview: true, 
 
     emptyrecords:"No records...", 
 
     loadonce: true, 
 
     rowList: [10, 20, 30], 
 
     pager: '#jQGridDemoPager', 
 
     viewrecords: true, 
 
     sortorder: 'desc', 
 
     caption: "List Pending Archive", 
 
     scrollOffset: 0, 
 
     subGrid: true, 
 
     subGridOptions:{ 
 
      plusicon : "ui-icon-plus", 
 
      minusicon : "ui-icon-minus", 
 
      openicon: "ui-icon-carat-1-sw", 
 
      expandOnLoad: false, 
 
      selectOnExpand : false, 
 
      reloadOnExpand : true 
 
     }, 
 

 
     subGridRowExpanded: function (subgrid_id, row_id) { 
 
      var subgrid_table_id; 
 
      var pager_id; 
 
      var d = [{ "Id": 0, "FileName": "91606246.pdf", "Size": 0.03 }]; 
 
      subgrid_table_id = subgrid_id + "_t"; 
 
      pager_id = "p_" + subgrid_table_id; 
 
      var cellValue = $("#tblJQGrid").jqGrid('getCell', row_id, 'ArchiveName'); 
 
      //jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>"); 
 
      jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>"); 
 
      jQuery("#" + subgrid_table_id).jqGrid({ 
 
       jsonReader: { 
 
        repeatitems: false, 
 
        cell: "", 
 
        id: "0" 
 
       }, 
 
       url: '@Url.Action("GetDataSubGrid", "Validator")?FileName=' + cellValue, 
 
       
 
       //mtype: 'GET', 
 
       dataType: 'json', 
 
       colNames: ['Id', 'Archive Name', 'Size in Mb'], 
 
       colModel: [ 
 
        { name: "Id", index: "Id", width: 20, sortable: true }, 
 
        { name: "FileName", index: "FileName", width: 130,sortable:true }, 
 
        { name: "Size", index: "Size", width: 80, align: "right" }, 
 
       ], 
 
       height: 'auto', 
 
       //loadonce: true, 
 
       //gridview: true, 
 
       //autoencode: true, 
 
       rowNum: 20, 
 
       viewrecords: true, 
 
       sortname: 'FileName', 
 
       sortorder: "desc" 
 
      }); 
 
      //jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false }) 
 
      
 
     } 
 
    }); 
 

 

 
     $('#tblJQGrid').jqGrid('navGrid', '#jQGridDemoPager', 
 
       { 
 
        edit: true, 
 
        add: true, 
 
        del: true, 
 
        search: true, 
 
        searchtext: "Search", 
 
        addtext: "Add", 
 
        edittext: "Edit", 
 
        deltext: "Delete" 
 
       }, 
 
       { //EDIT 
 
        //      height: 300, 
 
        //      width: 400, 
 
        //      top: 50, 
 
        //      left: 100, 
 
        //      dataheight: 280, 
 
        closeOnEscape: true,//Closes the popup on pressing escape key 
 
        reloadAfterSubmit: true, 
 
        drag: true, 
 
        afterSubmit: function (response, postdata) { 
 
         if (response.responseText == "") { 
 

 
          $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit 
 
          return [true, ''] 
 
         } 
 
         else { 
 
          $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit 
 
          return [false, response.responseText]//Captures and displays the response text on th Edit window 
 
         } 
 
        }, 
 
        editData: { 
 
         EmpId: function() { 
 
          var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow'); 
 
          var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id'); 
 
          return value; 
 
         } 
 
        } 
 
       }, 
 
       { 
 
        closeAfterAdd: true,//Closes the add window after add 
 
        afterSubmit: function (response, postdata) { 
 
         if (response.responseText == "") { 
 

 
          $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add 
 
          return [true, ''] 
 
         } 
 
         else { 
 
          $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add 
 
          return [false, response.responseText] 
 
         } 
 
        } 
 
       }, 
 
       { //DELETE 
 
        closeOnEscape: true, 
 
        closeAfterDelete: true, 
 
        reloadAfterSubmit: true, 
 
        closeOnEscape: true, 
 
        drag: true, 
 
        afterSubmit: function (response, postdata) { 
 
         if (response.responseText == "") { 
 

 
          $("#jQGridDemo").trigger("reloadGrid", [{ current: true }]); 
 
          return [false, response.responseText] 
 
         } 
 
         else { 
 
          $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid') 
 
          return [true, response.responseText] 
 
         } 
 
        }, 
 
        delData: { 
 
         EmpId: function() { 
 
          var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow'); 
 
          var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id'); 
 
          return value; 
 
         } 
 
        } 
 
       }, 
 
       {//SEARCH 
 
        closeOnEscape: true 
 

 
       } 
 
     ); 
 

 

 
    });

亞格URL返回此JSON:

[{"Id":0,"FileName":"91606246.pdf","Size":0.03}] 

但亞格不顯示接收到的數據。這是片段SC: Grid with subgrid empty

我具有以下配置:

  • MVC 4,
  • 淨框架4.5
  • 的jquery-2.2.3.js
  • jquery.jqGrid。 min.js(@license Guriddo jqGrid JS - v5.1.1 ...)

請幫忙。

回答

0

您在子網格中使用dataType: 'json'選項而不是datatype: 'json'。這可能是你的主要問題。

我會強烈建議您將idPrefix選項添加到子網格中,並使用idPrefix等一些唯一值。前面的例子idPrefix: "s_" + row_id + "_"idPrefix: subgrid_id或只是idPrefix: $.jgrid.randId()。它會阻止你以後遇到重複的問題。在許多情況下,選項autoencode: true對子網格也有幫助。

我建議你考慮使用free jqGrid(我開發)而不是商業的Guriddo jqGrid JS。如果您更喜歡使用Guriddo,那麼您應該考慮所需的付款(請參閱the prices)以及關於持有許可協議。