jqgrid子網格如何在子網格中顯示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選項的屬性。因此，你應該從列刪除"Symbol"和"Description"後添加

additionalProperties: ["Symbol", "Description"] 

。

現在您應該添加subGrid: true選項來創建帶「+」符號的「subrgid」列，該符號允許打開網格。在打開jqGrid時創建subrgid的div，並且回調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。