Question

我正在尝试让自定义过滤器与reactive-table meteor包一起使用，但它无法正常工作，无法找到原因...代码中的所有内容都正确但在客户我选择＆＃34;巴厘岛＆＃34;从下拉列表中获取但不会过滤表格。：

HTML：

<head>
  <title>JavaScript table components comparison</title>
</head>

<body>
  <div id="content">
    {{> featureComparison}}
  </div>
</body>

<template name="featureComparison">

<label>Surf Spot</label>
<select class="form-control" id="surf-spot-select">
    <option></option>
    <option>Bali</option>
</select>
  <div id="table">
    {{> reactiveTable collection=tables settings=tableSettings }}
  </div>


</template>

JS：

Tables = new Meteor.Collection('features');

if (Meteor.isClient) {




  var checkOrX = function (value) {
    var html;
    // first, normalize the value to a canonical interpretation
    if (typeof value === 'boolean')
      value = {
        support: value
      };

    if (value === null || value === undefined) {
      html = '<span style="color: orange; font-weight: bold">?</span>';
    } else {
      if (value.support === true)
        html = '<span style="color: green">&#10004;</span>'
      else if (value.support === false)
        html = '<span style="color: red">&#10008;</span>';
      else
        html = '<span style="color: lightblue">' + value.support + '</span>';
      if (value.link)
        html += ' (<a href="' + value.link + '">more</a>)';
      }
    return new Spacebars.SafeString(html);
  };

  Template.featureComparison.helpers({
    tables : function () {
      return Tables;
    },

    tableSettings : function () {
      return {
        showFilter: false,
        rowsPerPage: 10,
        showNavigation: 'auto',
        showColumnToggles: true,
        fields: [
          {
            key: 'name',
            label: 'Library',
            fn: function (name, object) {
              var html = '<a name="' + name +'" target="_blank" href="' + object.url + '">' + name + '</a>';
              return new Spacebars.SafeString(html);
            }
          },
          { key: 'multisort', label: 'Multi-column sorting', fn: checkOrX },
          { key: 'pages', label: 'Pagination', fn: checkOrX },
          { key: 'filter', label: 'Filtering/Search', fn: checkOrX },
          { key: 'resize', label: 'Resizable Columns', fn: checkOrX },
          { key: 'edit', label: 'Inline Editing', fn: checkOrX },
          { key: 'responsive', label: 'Mobile/Responsive', fn: checkOrX },
          { key: 'i18n', label: 'Internationalization', fn: checkOrX, hidden: true },
          { key: 'keyboard', label: 'Keyboard navigation', fn: checkOrX, hidden: true },
          { key: 'plugins', label: 'Plugins', fn: checkOrX, hidden: true },
          { key: 'meteor', label: 'Meteor Integration', fn: checkOrX, hidden: true },
          { key: 'lastUpdate', label: 'Last update', fn: checkOrX }
        ],
      };
    }
  });




  Template.featureComparison.created = function () {
    this.filter = new ReactiveTable.Filter('surf-spot', []);
};




Template.featureComparison.events({
  'change #surf-spot-select': function (event,template) {
    var input = $("#surf-spot-select").val().toLowerCase();
    if (input === 'bali') {
      template.filter.set(input);
      console.log("bali")
    } else {
      template.filter.set("");
      console.log("nothing")
    }
  }
});

}

Answer 1

您应该通过在响应表设置中设置filters选项，将自定义过滤器附加到您的被动表：

tableSettings : function () {
  return {
    showFilter: false,
    rowsPerPage: 10,
    showNavigation: 'auto',
    showColumnToggles: true,
    filters: ['surf-spot'], // here
    fields: [
      {
        key: 'name',
        label: 'Library',
        fn: function (name, object) {
          var html = '<a name="' + name +'" target="_blank" href="' + object.url + '">' + name + '</a>';
          return new Spacebars.SafeString(html);
        }
      },
      { key: 'multisort', label: 'Multi-column sorting', fn: checkOrX },
      { key: 'pages', label: 'Pagination', fn: checkOrX },
      { key: 'filter', label: 'Filtering/Search', fn: checkOrX },
      { key: 'resize', label: 'Resizable Columns', fn: checkOrX },
      { key: 'edit', label: 'Inline Editing', fn: checkOrX },
      { key: 'responsive', label: 'Mobile/Responsive', fn: checkOrX },
      { key: 'i18n', label: 'Internationalization', fn: checkOrX, hidden: true },
      { key: 'keyboard', label: 'Keyboard navigation', fn: checkOrX, hidden: true },
      { key: 'plugins', label: 'Plugins', fn: checkOrX, hidden: true },
      { key: 'meteor', label: 'Meteor Integration', fn: checkOrX, hidden: true },
      { key: 'lastUpdate', label: 'Last update', fn: checkOrX }
    ],
  };
}

使用reactive-table meteor包的自定义过滤不起作用

1 个答案: