Question

我想按2个选择列表过滤（隐藏除选定对象之外的所有对象）多个条目。第一个包含国家/地区，第二个包含年份。

我能够编写一个脚本，该脚本按单个参数过滤，但是例如当用户选择德国和2017（显示2017年德国的所有项目）时如何扩展功能？

<select class="form-control" id="filter-by-country">
  <option selected="selected">COUNTRY</option>
  <option>ALL</option>
  <option>Belgium</option>
  <option>Germany</option>
  <option>Russia</option>
</select>

<select class="form-control" id="filter-by-year">
  <option selected="selected">COUNTRY</option>
  <option>ALL</option>
  <option>2018</option>
  <option>2017</option>
  <option>2016</option>
  <option>2015</option>
</select>

<table class="table table-hover all-projects">
  <thead>
    <tr>
      <th scope="col">order date</th>
      <th scope="col">project id</th>
      <th scope="col">full project's name</th>
      <th scope="col">quantity</th>
      <th scope="col">order no</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center belgium 2018">
      <td>27.09.2018</td>
      <td></td>
      <td class="text-left">First project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center germany 2017">
      <td>27.09.2017</td>
      <td>5461</td>
      <td class="text-left">Second project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2016">
      <td>27.09.2016</td>
      <td>5462</td>
      <td class="text-left">Third project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2018">
      <td>27.09.2018</td>
      <td>5462</td>
      <td class="text-left">Fourth project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tbody>
</table>

Answer 1

应该这样做（建议：css类名不能以数字开头，这是非法的，请按选择项的值进行过滤，而不是文本）

Exception thrown: 'System.Data.SqlClient.SqlException' in System.Data.dll
System.Data.SqlClient.SqlException (0x80131904): An attempt to attach an auto-named database for file C:\Users\xflak\OneDrive\Documenten\GitHub\ItemDatabase - UI\WindowsFormsApp2\Database1.mdf failed. A database with the same name exists, or specified file cannot be opened, or it is located on UNC share.
   bij System.Data.SqlClient.SqlInternalConnectionTds..ctor(DbConnectionPoolIdentity identity, SqlConnectionString connectionOptions, SqlCredential credential, Object providerInfo, String newPassword, SecureString newSecurePassword, Boolean redirectedUserInstance, SqlConnectionString userConnectionOptions, SessionData reconnectSessionData, DbConnectionPool pool, String accessToken, Boolean applyTransientFaultHandling)
   bij System.Data.SqlClient.SqlConnectionFactory.CreateConnection(DbConnectionOptions options, DbConnectionPoolKey poolKey, Object poolGroupProviderInfo, DbConnectionPool pool, DbConnection owningConnection, DbConnectionOptions userOptions)
   bij System.Data.ProviderBase.DbConnectionFactory.CreatePooledConnection(DbConnectionPool pool, DbConnection owningObject, DbConnectionOptions options, DbConnectionPoolKey poolKey, DbConnectionOptions userOptions)
   bij System.Data.ProviderBase.DbConnectionPool.CreateObject(DbConnection owningObject, DbConnectionOptions userOptions, DbConnectionInternal oldConnection)
   bij System.Data.ProviderBase.DbConnectionPool.UserCreateRequest(DbConnection owningObject, DbConnectionOptions userOptions, DbConnectionInternal oldConnection)
   bij System.Data.ProviderBase.DbConnectionPool.TryGetConnection(DbConnection owningObject, UInt32 waitForMultipleObjectsTimeout, Boolean allowCreate, Boolean onlyOneCheckConnection, DbConnectionOptions userOptions, DbConnectionInternal& connection)
   bij System.Data.ProviderBase.DbConnectionPool.TryGetConnection(DbConnection owningObject, TaskCompletionSource`1 retry, DbConnectionOptions userOptions, DbConnectionInternal& connection)
   bij System.Data.ProviderBase.DbConnectionFactory.TryGetConnection(DbConnection owningConnection, TaskCompletionSource`1 retry, DbConnectionOptions userOptions, DbConnectionInternal oldConnection, DbConnectionInternal& connection)
   bij System.Data.ProviderBase.DbConnectionInternal.TryOpenConnectionInternal(DbConnection outerConnection, DbConnectionFactory connectionFactory, TaskCompletionSource`1 retry, DbConnectionOptions userOptions)
   bij System.Data.ProviderBase.DbConnectionClosed.TryOpenConnection(DbConnection outerConnection, DbConnectionFactory connectionFactory, TaskCompletionSource`1 retry, DbConnectionOptions userOptions)
   bij System.Data.SqlClient.SqlConnection.TryOpenInner(TaskCompletionSource`1 retry)
   bij System.Data.SqlClient.SqlConnection.TryOpen(TaskCompletionSource`1 retry)
   bij System.Data.SqlClient.SqlConnection.Open()
   bij WindowsFormsApp2.DBConnect.connectDB() in C:\Users\xflak\OneDrive\Documenten\GitHub\ItemDatabase-UI\WindowsFormsApp2\DBConnect.cs:regel 17
ClientConnectionId:200efe66-c5b0-4085-acb2-67a1c554ed67
Error Number:15350,State:1,Class:14

codepen：https://codepen.io/peker-ercan/pen/jeqpQx

Answer 2

我希望下面的示例会有用，

var originalContent;

$(document).ready(function() {
  originalContent = $('#allprojects').html();

  $('#filter-by-country').change(function() {
    Loaddata();
  });

  $('#filter-by-year').change(function() {
    Loaddata();
  });
});

function Loaddata() {
  $('#allprojects').html(originalContent);

  var country = $('#filter-by-country').val().toLowerCase();
  var year = $('#filter-by-year').val().toLowerCase();

  var newSelector = "";

  if (country != "all") {
    newSelector += "." + country;
  }
  if (year != "all") {
    newSelector += "." + year;
  }

  var data = $('#allprojects').find("tr" + newSelector + "");
  $('#allprojects').html(data);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="filter-by-country">
  <option>ALL</option>
  <option>Belgium</option>
  <option>Germany</option>
  <option>Russia</option>
</select>

<select class="form-control" id="filter-by-year">
  <option>ALL</option>
  <option>2018</option>
  <option>2017</option>
  <option>2016</option>
  <option>2015</option>
</select>

<table id='allprojects' class="table table-hover all-projects">
  <thead>
    <tr>
      <th scope="col">order date</th>
      <th scope="col">project id</th>
      <th scope="col">full project's name</th>
      <th scope="col">quantity</th>
      <th scope="col">order no</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center belgium 2018">
      <td>27.09.2018</td>
      <td></td>
      <td class="text-left">First project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center germany 2017">
      <td>27.09.2017</td>
      <td>5461</td>
      <td class="text-left">Second project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2016">
      <td>27.09.2016</td>
      <td>5462</td>
      <td class="text-left">Third project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2018">
      <td>27.09.2018</td>
      <td>5462</td>
      <td class="text-left">Fourth project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tbody>
</table>

Answer 3

我的示例可以满足您的要求。如果计划将过滤器添加为行中的类，则可以轻松进行调整。

$(function() {

  var selectCountry = $('#filter-by-country');
  var selectYear = $('#filter-by-year');

  var countries = [];
  var years = [];

  selectCountry
    .children('option')
    .map(function(idx, item) {
      countries.push($(item).html().toLowerCase());
    });
  selectYear
    .children('option')
    .map(function(idx, item) {
      years.push($(item).html().toLowerCase());
    })

  countries = countries.filter(function(i) {
    return ['country', 'all'].indexOf(i) === -1
  })
  years = years.filter(function(i) {
    return ['country', 'all'].indexOf(i) === -1
  })

  var tableTR = $('.all-projects tbody').find('tr');

  var filterCountries = function() {

    var country = selectCountry.children('option:selected').val().toLowerCase();
    var year = selectYear.children('option:selected').val().toLowerCase();

    var conditionHappens = false;
    var foundCountry = countries.indexOf(country) !== -1;
    var foundYear = years.indexOf(year) !== -1;
    var conditions = [];

    if (foundCountry) {
      conditions.push(country);
    }

    if (foundYear) {
      conditions.push(year);
    }

    $.each(tableTR, function(idx, item) {

      var processCond = conditions.map(function(cond) {
        return $(item).hasClass(cond);
      }).indexOf(false) === -1;

      if (processCond) {
        $(item).show();
      } else {
        $(item).hide();
      }

    })

  }

  $(selectCountry).on('change', filterCountries)
  $(selectYear).on('change', filterCountries)

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- COUNTRIES -->
<select class="form-control" id="filter-by-country">
  <option selected="selected">COUNTRY</option>
  <option>ALL</option>
  <option>Belgium</option>
  <option>Germany</option>
  <option>Russia</option>
</select>

<!-- YEARS -->
<select class="form-control" id="filter-by-year">
  <option selected="selected">COUNTRY</option>
  <option>ALL</option>
  <option>2018</option>
  <option>2017</option>
  <option>2016</option>
  <option>2015</option>
</select>

<table class="table table-hover all-projects">
  <thead>
    <tr>
      <th scope="col">order date</th>
      <th scope="col">project id</th>
      <th scope="col">full project's name</th>
      <th scope="col">quantity</th>
      <th scope="col">order no</th>

    </tr>
  </thead>
  <tbody>
    <tr class="text-center belgium 2018">
      <td>27.09.2018</td>
      <td></td>
      <td class="text-left">First project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center germany 2017">
      <td>27.09.2017</td>
      <td>5461</td>
      <td class="text-left">Second project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2016">
      <td>27.09.2016</td>
      <td>5462</td>
      <td class="text-left">Third project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2018">
      <td>27.09.2018</td>
      <td>5462</td>
      <td class="text-left">Fourth project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tbody>
</table>

Answer 4

如果使用KendoUI处理此问题，可以通过将数据添加到this来实现，它也具有自动完成功能：

function filterAutoCompleteDataSource(e) {
  var gridFilter = e.sender.dataSource.filter();
  e.sender.element.find(".k-autocomplete input").data("kendoAutoComplete").dataSource.filter(gridFilter);
}

$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
      },
      schema: {
        model: {
          fields: {
            OrderID: {
              type: "number"
            },
            Freight: {
              type: "number"
            },
            ShipName: {
              type: "string"
            },
            OrderDate: {
              type: "date"
            },
            ShipCity: {
              type: "string"
            }
          }
        }
      },
      pageSize: 20,
      serverPaging: true,
      serverFiltering: true,
    },
    dataBound: filterAutoCompleteDataSource,
    height: 550,
    filterable: {
      mode: "row"
    },
    pageable: true,
    columns: [{
      field: "OrderID",
      width: 225,
      filterable: {
        cell: {
          showOperators: false
        }
      }
    }, {
      field: "ShipName",
      width: 500,
      title: "Ship Name",
      filterable: {
        cell: {
          operator: "contains"
        }
      }
    }, {
      field: "Freight",
      width: 255,
      filterable: {
        cell: {
          operator: "gte"
        }
      }
    }, {
      field: "OrderDate",
      title: "Order Date",
      format: "{0:MM/dd/yyyy}"
    }]
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Kendo UI Snippet</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.rtl.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.silver.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css" />

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="grid"></div>
</body>

</html>

那样，您的网格甚至可能会更漂亮;）

按2个选择列表过滤html表

4 个答案: