如何使用Jqgrid添加动态过滤器下拉列表? [英] How to add dynamic filter drop down using Jqgrid?

问题描述

我有以下使用jqgrid工具栏搜索表的工作代码.

I have the following working code that searches the table using the jqgrid tool bar.

我想为"Symbol"列添加一个动态下拉列表，以便该下拉列表将反映该列的动态值. 另外，我想禁用对TotalValue和MaxLoan的搜索.

I want to add a dynamic drop down for the "Symbol" column, so that the drop will reflect the dynamic value of that column. Also, I want to disable the search for TotalValue and MaxLoan.

我的 JSFIDDLE

代码

$(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": "[phone]",
      "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);
    });
});

推荐答案

要防止在某些列(TotalValue和MaxLoan)中进行排序，您只需在相应的列定义中添加search: false属性即可.

To prevent sorting in some columns (TotalValue and MaxLoan) you need just add search: false property in the corresponding column definitions.

要在搜索工具栏中为Symbol列创建下拉列表，可以相对于setColProp设置searchoptions.value.您可以根据beforeProcessing中服务器从服务器返回的值来填充value:

To create dropdown in the searching toolbar for the Symbol column you can set the searchoptions.value with respect of setColProp. You can fill value based on the values returned from the server inside of beforeProcessing:

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"
    });
}

请参阅修改后的演示 https://jsfiddle.net/OlegKi/615qovew/8/

这篇关于如何使用Jqgrid添加动态过滤器下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！