jqgrid子網格如何在子網格中顯示json值

Question

我想將 jqgrid 與子網格一起使用。 我創建了一個 jqgrid 表。 但是，我想在 subgrid 中顯示描述和符號。

我還包括了 JSOn 數據和我的代碼片段以及這里的小提琴演示

我可以使用 jqgrid 從以下 JSON 數據創建子網格而不使用嵌套的 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選項來創建帶有“+”符號的“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/顯示如下圖所示的數據

您可以完全自由地設計“subgrid”-div 中顯示的信息。