jqGrid 4.4.4如何使用带有格式化列的复杂对象的filterToolbar？

Question

我想让filterToolbar过滤体育？如何才能做到这一点？目前，它什么都不返回。 Sports列在数据中连接了所有CatagoryID = 1，仅举例：“棒球，国际象棋，曲棍球”。数据对象很复杂，因为它有其他对象的数组，并且也有单个元素，如Sex或LastName。体育是阵容。

这是我的工作代码......

$(document).ready(function() {

  var mydata = [{
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 2,
      "Value": "Chess"
    }],
    "Notes": [],
    "Id": "42",
    "FirstName": "Tony",
    "LastName": "Fischer",
    "Sex": "M"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 1,
      "Value": "Soccer"
    }],
    "Notes": [],
    "Id": "61",
    "FirstName": "Joe",
    "LastName": "Falcon",
    "Sex": "M"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 1,
      "Value": "Soccer"
    }],
    "Notes": [],
    "Id": "89",
    "FirstName": "Judith",
    "LastName": "Tinis",
    "Sex": "F"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 3,
      "Value": "Pingpong"
    }, {
      "CategoryID": 1,
      "Value": "Hockey"
    }, {
      "CategoryID": 1,
      "Value": "Checkers"
    }],
    "Notes": [],
    "Id": "89",
    "FirstName": "Boris",
    "LastName": "Spassky",
    "Sex": "M"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 2,
      "Value": "Chess"
    }],
    "Notes": [],
    "Id": "77",
    "FirstName": "Betty",
    "LastName": "Bundtcake",
    "Sex": "F"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 1,
      "Value": "Baseball"
    }],
    "Notes": [],
    "Id": "88",
    "FirstName": "Henry",
    "LastName": "Aaron",
    "Sex": "M"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 1,
      "Value": "Soccer"
    }],
    "Notes": [],
    "Id": "99",
    "FirstName": "MaryLou",
    "LastName": "Terrin",
    "Sex": "F"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 3,
      "Value": "Pingpong"
    }, {
      "CategoryID": 1,
      "Value": "Hockey"
    }, {
      "CategoryID": 1,
      "Value": "Checkers"
    }],
    "Notes": [],
    "Id": "22",
    "FirstName": "Ralph",
    "LastName": "Parins",
    "Sex": "M"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Risk"
    }],
    "Notes": [],
    "Id": "35",
    "FirstName": "Svetzor",
    "LastName": "Gligorich",
    "Sex": "M"
  }];

  $("#mygrid").jqGrid({
    datatype: "local",
    data: mydata,
    loadOnce: true,
    colNames: ['Id', 'First', 'Last', 'Gender', 'Sports'],
    colModel: [{
      name: 'Id',
      index: 'Id',
      hidden: true,
      key: true,
      editable: false
    }, {
      name: 'FirstName',
      index: 'FirstName',
      width: 100,
      sortable: true
    }, {
      name: 'LastName',
      index: 'LastName',
      width: 120,
      sortable: true
    }, {
      name: 'Sex',
      index: 'Sex',
      width: 130,
      sortable: true
    }, {
      name: 'Sports',
      width: 250,
      jsonmap: 'Sports.0',
      // this formatter says if array data has something and it's CategoryID is 1, then join all the elements' 'Value' seperated by a ','
      formatter: function(cellvalue) {
        return cellvalue.length == 0 ? '' : $.map(cellvalue, function(obj) {
          return obj.CategoryID == 1 ? obj.Value : null
        }).join(', ');
      }
    }],
    sortname: 'LastName',
    pager: $('#pager'),
    rowNum: 5,
    rowList: [5, 10, 20, 50],
    sortorder: "desc",
    viewrecords: true,
    caption: "Team Members"
  });
  $("#mygrid").jqGrid('filterToolbar', {
    stringResult: true,
    searchOnEnter: false,
    defaultSearch: "cn"
  });
});

html,
body {
  font-size: 75%;
}
.ui-jqgrid .ui-search-table .ui-search-input > input,
.ui-jqgrid .ui-search-table .ui-search-input > select {
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Griddy</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.4/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body {
            font-size: 75%;
        }

        .ui-jqgrid .ui-search-table .ui-search-input > input, .ui-jqgrid .ui-search-table .ui-search-input > select {
            display: block;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.4/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        //$.jgrid.no_legacy_api = true;
        //$.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.4/js/jquery.jqGrid.src.js"></script>

</head>
<body>

    <table id="mygrid"></table>
    <div id="pager" style="text-align:left;"></div>
    <div id="pager"></div>

</body>

</html>