HTML表格中的交互式过滤器多选

时间：2017-10-13 10:28:28

标签： javascript jquery html css

我正在从JSON对象动态创建HTML表。我正在尝试为其中一个表列创建一个过滤器。它工作正常，但我无法使用多选功能。

我尝试添加此行：

$('.One1').multiselect();

在我的脚本中，在不同的地方，它不起作用。

＆＃13;
＆＃13; 
var data = {"headers":["One","Two","Three","Four","Five","Six","Seven","Number1","Number2"],"rows":[["One1","Two1","Three1","Four1","Five1","Six1","Seven1",11,1000],["One1","Two1","Three2","Four1","Five1","Six1","Seven1", 22, 2000],["One2","Two1","Three1","Four2","Five1","Six1","Seven1", 77, 99]]};


	//////First table - Three1 for Views
	var table1 = '<div class = "filter_box"></div><div class="row"><div class="col-lg-6" style="background-color: #e90649; width: 117px;">&nbsp;</div><div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;">Table<br/><br/><span style="font-size: 1vw;">One1, Three1, Five1</span></div><div class="col-lg-6"><div class="container"><table><thead><tr></tr><tr><th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th><th>Number1</th><th>Number2</th></tr></thead><tbody>';
	var One = '<div class = "filter"><select class="One1" data-col="0"><option value="a">' + "One" + '</option>';	

	for (i = 0; i < data.rows.length; i++) 
	{

table1 +="<tr><td>" + data.rows[i][0] + "</td><td>" + data.rows[i][1] + "</td><td>" + data.rows[i][2] + "</td><td>" + data.rows[i][3] + "</td><td>" + data.rows[i][4] + "</td><td>" + data.rows[i][5] + "</td><td>" + data.rows[i][6] + "</td><td>" + data.rows[i][7].toLocaleString() + "</td><td>" + data.rows[i][8].toLocaleString() + "</td><td>" + "</td></tr>";
  // Interactive filters

      	 One +='<option value="' + i + '">' + data.rows[i][0] + '</option>';
		}

	table1 += '</tbody></table></div></div></div>';
  One +='</select></div>';  
	$("#one").html(table1);
  $(".filter_box").html(One);
  
  ////First table - Filter
  
  $('.One1').change(function () {
      var values = [];

      $('.One1').each(function () {
      
          var colIdx = $(this).data('col');
          
          $(this).find('option:selected').each(function () {
              if ($(this).val() != "") values.push({
                  text: $(this).text(),
                  colId: colIdx
              });
          });
      });
      One1('#one table > tbody > tr', values);
  });

  function One1(selector, values) {
      $(selector).each(function () {
          var sel = $(this);
          var txt = sel.find('td:eq(0)').text().trim();
          var hwMatches = values.filter(function(ele, idx) {
              return ele.text == txt;
          }).length;
          sel.toggle(hwMatches > 0 || values.length == 0);
      });
  };

                 
 //$('.One1').multiselect();
＆＃13; 
@import url('https://fonts.googleapis.com/css?family=Roboto');

body, * { 
    margin: 0;
    color:#fff;
    font-family: Roboto; 
    text-transform:capitalize;
    }
.row {
    display: table;
    width: 100%;
    height: 241px; 
    background-color:#454545;
}
.row > .col-lg-6 {
    display: table-cell;
    vertical-align: middle;
}
.container {
  /*display: flex;*/
  flex-wrap: wrap;
}
.container > div {
  padding: 15px;
  margin: 5px;
  flex: 0 0 calc(100% - 20px);
  text-align: left;
}

/*img {
    padding-left: 7%;
    max-height:55px;
    width:auto;
}*/
td{
  padding: 2px 2px;
  text-align: center;
  margin: 6px 0;
  border: none;
}
table{
  width: 100%;
  background-color:#454545;
  font-weight:500;
  border-collapse: separate;
  border-spacing:0.3em 1.1em;
  color: #fff;
  border: 0;
}
tr{
    font-size: 1.1em;
}
th {
    color: #CCC;
    font-size: 0.7em;
 	}
	
#one,#two,#three,#four{
    padding-top:2%;
 	}
  
    .filter
    {
    	margin:1px;
        width:20%;
        text-align:center;
        display:inline-block;    
    }
    .filter_box
    {
    	text-align:center;
        display:inline-block;
    	width:100%;
    }

.filter select, .multiselect dropdown-toggle btn btn-default {
  min-width:120px;
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: 97% center;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #000;
  font-size: inherit;
  margin: 3px;
  overflow: hidden;
  padding: 1px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
tr th:nth-child(5) {
    background: red;
    display:none;
} 

tr td:nth-child(5) {
    background: red;
    display:none;
} 
*/
＆＃13; 
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>


<div id="one"></div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

宣布select时，您可以指定multiple：

var One = '<div class = "filter"><select class="One1" data-col="0"><option value="a">' + "One" + '</option>';

将其更改为：

var One = '<div class = "filter"><select multiselect class="One1" data-col="0"><option value="a">' + "One" + '</option>';

结果：

var data = {"headers":["One","Two","Three","Four","Five","Six","Seven","Number1","Number2"],"rows":[["One1","Two1","Three1","Four1","Five1","Six1","Seven1",11,1000],["One1","Two1","Three2","Four1","Five1","Six1","Seven1", 22, 2000],["One2","Two1","Three1","Four2","Five1","Six1","Seven1", 77, 99]]};


	//////First table - Three1 for Views
	var table1 = '<div class = "filter_box"></div><div class="row"><div class="col-lg-6" style="background-color: #e90649; width: 117px;">&nbsp;</div><div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;">Table<br/><br/><span style="font-size: 1vw;">One1, Three1, Five1</span></div><div class="col-lg-6"><div class="container"><table><thead><tr></tr><tr><th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th><th>Number1</th><th>Number2</th></tr></thead><tbody>';
	var One = '<div class = "filter"><select multiple class="One1" data-col="0"><option value="a">' + "One" + '</option>';	

	for (i = 0; i < data.rows.length; i++) 
	{

table1 +="<tr><td>" + data.rows[i][0] + "</td><td>" + data.rows[i][1] + "</td><td>" + data.rows[i][2] + "</td><td>" + data.rows[i][3] + "</td><td>" + data.rows[i][4] + "</td><td>" + data.rows[i][5] + "</td><td>" + data.rows[i][6] + "</td><td>" + data.rows[i][7].toLocaleString() + "</td><td>" + data.rows[i][8].toLocaleString() + "</td><td>" + "</td></tr>";
  // Interactive filters

      	 One +='<option value="' + i + '">' + data.rows[i][0] + '</option>';
		}

	table1 += '</tbody></table></div></div></div>';
  One +='</select></div>';  
	$("#one").html(table1);
  $(".filter_box").html(One);
  
  ////First table - Filter
  
  $('.One1').change(function () {
      var values = [];

      $('.One1').each(function () {
      
          var colIdx = $(this).data('col');
          
          $(this).find('option:selected').each(function () {
              if ($(this).val() != "") values.push({
                  text: $(this).text(),
                  colId: colIdx
              });
          });
      });
      One1('#one table > tbody > tr', values);
  });

  function One1(selector, values) {
      $(selector).each(function () {
          var sel = $(this);
          var txt = sel.find('td:eq(0)').text().trim();
          var hwMatches = values.filter(function(ele, idx) {
              return ele.text == txt;
          }).length;
          sel.toggle(hwMatches > 0 || values.length == 0);
      });
  };

                 
 //$('.One1').multiselect();
@import url('https://fonts.googleapis.com/css?family=Roboto');

body, * { 
    margin: 0;
    color:#fff;
    font-family: Roboto; 
    text-transform:capitalize;
    }
.row {
    display: table;
    width: 100%;
    height: 241px; 
    background-color:#454545;
}
.row > .col-lg-6 {
    display: table-cell;
    vertical-align: middle;
}
.container {
  /*display: flex;*/
  flex-wrap: wrap;
}
.container > div {
  padding: 15px;
  margin: 5px;
  flex: 0 0 calc(100% - 20px);
  text-align: left;
}

/*img {
    padding-left: 7%;
    max-height:55px;
    width:auto;
}*/
td{
  padding: 2px 2px;
  text-align: center;
  margin: 6px 0;
  border: none;
}
table{
  width: 100%;
  background-color:#454545;
  font-weight:500;
  border-collapse: separate;
  border-spacing:0.3em 1.1em;
  color: #fff;
  border: 0;
}
tr{
    font-size: 1.1em;
}
th {
    color: #CCC;
    font-size: 0.7em;
 	}
	
#one,#two,#three,#four{
    padding-top:2%;
 	}
  
    .filter
    {
    	margin:1px;
        width:20%;
        text-align:center;
        display:inline-block;    
    }
    .filter_box
    {
    	text-align:center;
        display:inline-block;
    	width:100%;
    }

.filter select, .multiselect dropdown-toggle btn btn-default {
  min-width:120px;
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: 97% center;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #000;
  font-size: inherit;
  margin: 3px;
  overflow: hidden;
  padding: 1px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
tr th:nth-child(5) {
    background: red;
    display:none;
} 

tr td:nth-child(5) {
    background: red;
    display:none;
} 
*/
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>


<div id="one"></div>

答案 1 :(得分：0)

例如，如果要过滤表中的“ One1”，则可以简单地使用诸如$('td:contains("One1")').parent().hide();和$('td:contains("One1")').parent().show();之类的过滤器。 如果要过滤特定的列，则将以下内容与选择器结合使用：$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered), table tr > th:nth-child(yourColumnNumberShouldBeFiltered)')。这些表达式可用于绑定到多选的'change'事件的函数中。

更新：以上方法，由于使用了:contains()，因此过滤了所有的“ One1”，“ One12”，等等！对于完全匹配过滤，您可以使用类似以下的内容：

$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered)').filter(function() {
    return $(this).text() == "yourExactTextToFilter";
}).parent().hide();

$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered)').filter(function() {
    return $(this).text() == "yourExactTextToFilter";
}).parent().show();

或为获得完全匹配的更好性能，请参见以下链接：Select element by exact match of its content

相关问题
最新问题