jqgrid subgrids как отображать значения json в подсети

Question

Я хочу использовать jqgrid с субгридами. Я создал таблицу jqgrid. Тем не менее, я хочу отображать описания и символы в подзаголовке.

Я также включил данные JSON и мой фрагмент кода и тому fiddle demo here

Могу ли я создать подсети из следующих данных в формате JSON с jqgrid с из имеющих вложенных данных в формате JSON? Есть ли какой-нибудь пример или демонстрация, на которую я могу ссылаться?

$(document).ready(function() { 
    var jsonData = { 
     "Name": "Julie Brown", 
     "Account": "C0010", 
     "LoanApproved": "12/5/2015", 
     "LastActivity": "4/1/2016", 
     "PledgedPortfolio": "4012214.00875", 
     "MaxApprovedLoanAmt": "2050877.824375", 
     "LoanBalance": "1849000", 
     "AvailableCredit": "201877.824375", 
     "Aging": "3", 
     "Brokerage": "My Broker", 
     "Contact": "Robert L. Johnson", 
     "ContactPhone": "(212) 902-3614", 
     "RiskCategory": "Yellow", 
     "rows": [{ 
     "ClientID": "C0010", 
     "Symbol": "WEC", 
     "Description": "Western Electric Co", 
     "ShareQuantity": "20638", 
     "SharePrice": "21.12", 
     "TotalValue": "435874.56", 
     "LTVCategory": "Equities", 
     "LTVRatio": "50%", 
     "MaxLoanAmt": "217937.28" 
     }, { 
     "ClientID": "C0010", 
     "Symbol": "BBB", 
     "Description": "Bins Breakers and Boxes", 
     "ShareQuantity": "9623", 
     "SharePrice": "74.29125", 
     "TotalValue": "714904.69875", 
     "LTVCategory": "Equities", 
     "LTVRatio": "50%", 
     "MaxLoanAmt": "357452.349375" 
     }, { 
     "ClientID": "C0010", 
     "Symbol": "GPSC", 
     "Description": "Great Plains Small Cap Stock", 
     "ShareQuantity": "49612", 
     "SharePrice": "14.24", 
     "TotalValue": "706474.88", 
     "LTVCategory": "Mutual Funds - Small Cap", 
     "LTVRatio": "40%", 
     "MaxLoanAmt": "282589.952" 
     }] 
    }, 
    mmddyyyy = ""; 
    /*********************************************************************/ 


    $("#output").jqGrid({ 
    url: "/echo/json/", 
    mtype: "POST", 
    datatype: "json", 
    postData: { 
      json: JSON.stringify(jsonData) 
    }, 
    colModel: [ 
     /** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/ 
     { 
     name: 'Symbol', 
     width: 65 
     }, { 
     name: 'Description', 
     width: 165 
     }, { 
     name: 'ShareQuantity', 
     align: 'right', 
     width: 85, 
     classes: "hidden-xs", labelClasses: "hidden-xs", 
     formatter: 'currency', 
     formatoptions: { 
      prefix: " ", 
      suffix: " " 
     } 
     }, { 
     name: 'SharePrice', 
     label: 'Share Price', 
     align: 'right', 
     width: 100, 
     classes: "hidden-xs", labelClasses: "hidden-xs", 
     template: "number", 
     formatoptions: { 
      prefix: " $", 
      decimalPlaces: 4 
     } 
     }, 
     /*{ label: 'Value1', 
        name: 'Value1', 
        width: 80, 
        sorttype: 'number', 
        formatter: 'number', 
        align: 'right' 
       }, */ 
     { 
     name: 'TotalValue', 
     label: 'Total Value', 
     width: 160, 
     sorttype: 'number', 
     align: "right", 
     formatter: 'currency', 
     formatoptions: { 
      prefix: " $", 
      suffix: " " 
     } 
     }, { 
     name: 'LTVRatio', 
     label: 'LTV Ratio', 
     width: 70, 
     sorttype: 'number', 
     align: "right", 
     formatter: 'percentage', 
     formatoptions: { 
      prefix: " ", 
      suffix: " " 
     } 
     }, { 
     name: 'LTVCategory', 
     label: 'LTV Category', 
     classes: "hidden-xs", labelClasses: "hidden-xs", 
     width: 120, 
     width: 165 
     }, 

     { 
     name: 'MaxLoanAmt', 
     label: 'MaxLoanAmount', 
     width: 165, 
     sorttype: 'number', 
     align: "right", 
     formatter: 'currency', 
     formatoptions: { 
      prefix: " $", 
      suffix: " " 
     } 
     } 

    ], 
    additionalProperties: ["Num1"], 
    /*beforeProcessing: function (data) { 
     var item, i, n = data.length; 
     for (i = 0; i < n; i++) { 
      item = data[i]; 
      item.Quantity = parseFloat($.trim(item.Quantity).replace(",", "")); 
      item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", "")); 
      item.Value = parseFloat($.trim(item.Value).replace(",", "")); 
      item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10); 
      item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10); 
     } 
    }, */ 
    iconSet: "fontAwesome", 
    loadonce: true, 
    rownumbers: true, 
    cmTemplate: { 
     autoResizable: true, 
     editable: true 
    }, 
    autoResizing: { 
     compact: true 
    }, 
    autowidth: true, 
    height: 'auto', 
    forceClientSorting: true, 
    sortname: "Symbol", 
    footerrow: true, 
    caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>", 


    loadComplete: function() { 
     var $self = $(this), 
     sum = $self.jqGrid("getCol", "Price", false, "sum"), 
     sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum"); 
     //ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount"); 
     $self.jqGrid("footerData", "set", { 
     LTVCategory: "Max Approved Loan Amount:", 
     Price: sum, 
     MaxLoanAmt: sum1 
     }); 
    } 
    }); 

    $("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"}); 


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

Answer 1

Если я правильно понимаю ваши требования, это относительно легко. Если вы хотите отобразить "Symbol" и "Description" в подсерии, то вы хотели бы удалить соответствующие столбцы из основной сетки. Вы используете опцию loadonce: true для заполнения локального data с возвратом данных с сервера. Элемент, представляющий каждую строку входных данных, будет заполняться столбцами и свойствами от additionalProperties. Таким образом, вы должны добавить

additionalProperties: ["Symbol", "Description"] 

после удаления "Symbol" и "Description" из колонок.

Теперь вы должны добавить опцию subGrid: true, чтобы создать столбец «subggid» с символом «+», который позволяет открыть сетку. При открытии jqGrid создайте div для subggid, и обратный вызов subGridRowExpanded отвечает за заполнение сетки данными. Можно создать субграду внутри div, но можно разместить любые фрагменты HTML в любой форме. Например

subGridRowExpanded: function (subgridDivId, rowid) { 
    var item = $(this).jqGrid("getLocalRow", rowid); 
    $("#" + $.jgrid.jqID(subgridDivId)).html("Symbol: <em>" + item.Symbol + 
     "</em><br/>Description: <em>" + item.Description + "</em>"); 
} 

В результате демонстрационной https://jsfiddle.net/OlegKi/615qovew/75/ отображает данные, как на картинке ниже

Вы абсолютно свободны в оформлении информации, отображаемой в «Подсеточное» -div.