Wie fügt man dynamische Filter Drop-Down mit Jqgrid?

Question

Ich habe den folgenden Arbeitscode, der die Tabelle mithilfe der jqgrid-Symbolleiste durchsucht.

Ich möchte ein dynamisches Dropdown für die Spalte "Symbol" hinzufügen, so dass der Tropfen den dynamischen Wert dieser Spalte widerspiegelt. Außerdem möchte ich die Suche nach TotalValue und MaxLoan deaktivieren.

Mein JSFIDDLE

-Code

$(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

zu verhindern, um in einigen Spalten Sortierung (TotalValue und MaxLoan) benötigen Sie fügen Sie einfach search: false Eigenschaft in den entsprechenden Spaltendefinitionen.

Um ein Dropdown in der Suchleiste für die Spalte Symbol zu erstellen, können Sie in Bezug auf setColProp einstellen.

beforeProcessing: function (data) { 
    var symbolsMap = {}, symbolsValues = ":All", rows = data.rows, i, symbol; 
    for (i = 0; i < rows.length; i++) { 
     symbol = rows[i].Symbol; 
     if (!symbolsMap.hasOwnProperty(symbol)) { 
      symbolsMap[symbol] = 1; 
      symbolsValues += ";" + symbol + ":" + symbol; 
     } 
    } 
    $(this).jqGrid("setColProp", 'Symbol', { 
     stype: "select", 
     searchoptions: { 
      value: symbolsValues 
     } 
    }).jqGrid('destroyFilterToolbar') 
    .jqGrid('filterToolbar', { 
     stringResult: true, 
     searchOnEnter: false, 
     defaultSearch : "cn" 
    }); 
} 

Siehe die modifizierte Demo https://jsfiddle.net/OlegKi/615qovew/8/