使用JQuery基于用户输入过滤对象

Question

我有一个数据对象，并根据我生成表的记录。在该表中，我给用户提供了一些选项，可以像下面那样提交。

我使用$.grep来过滤项目。如果你查看我的代码，我已经为每个元素使用了$.grep，最后显示了表格。看下面的代码。

 var dataArray = {
"rooms": [
{"name":"1001","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":false},
{"name":"1002","type":"Family","status":"Occupied","ac":true,"tv":true,"ref":true},
{"name":"1003","type":"Double","status":"Available","ac":true,"tv":true,"ref":false},
{"name":"1004","type":"Double","status":"Occupied","ac":false,"tv":false,"ref":true},
{"name":"1005","type":"Single","status":"Available","ac":false,"tv":false,"ref":false},
{"name":"1006","type":"Family","status":"Available","ac":false,"tv":false,"ref":false},
{"name":"1007","type":"Family","status":"Available","ac":false,"tv":false,"ref":true},
{"name":"1008","type":"Family","status":"Available","ac":false,"tv":false,"ref":true},
{"name":"1009","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":true},
{"name":"1010","type":"Double","status":"Occupied","ac":false,"tv":true,"ref":false},
{"name":"1011","type":"Double","status":"Available","ac":true,"tv":true,"ref":false},
{"name":"1012","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":true},
{"name":"1013","type":"Family","status":"Available","ac":false,"tv":false,"ref":false},
{"name":"1014","type":"Single","status":"Available","ac":false,"tv":false,"ref":false},
{"name":"1015","type":"Family","status":"Occupied","ac":false,"tv":false,"ref":true},
{"name":"1016","type":"Family","status":"Occupied","ac":false,"tv":false,"ref":false},
{"name":"1017","type":"Double","status":"Available","ac":true,"tv":false,"ref":false},
{"name":"1018","type":"Single","status":"Available","ac":true,"tv":false,"ref":true}
]}

$("#roomTypeSelect").on('change', function(){updateTableView()});
    $('#checkAvailable, #checkAC, #checkTV, #checkRef').on('click', function(e){updateTableView(e);});
    function updateTableView(e) {
    console.log('called');
roomType = $('#roomTypeSelect option:selected').text();
        checkAvailable = $('#checkAvailable').prop('checked');
        checkAC = $('#checkAC').prop('checked');
        checkTV = $('#checkTV').prop('checked');
        checkRef = $('#checkRef').prop('checked');
        var lists = dataArray.rooms;

        if(roomType != 'Room Type') {
            lists = $.grep(lists, function (item) {
                return item.type == roomType;
            });
        }
        if(checkAvailable) {
            lists = $.grep(lists, function (item) {
                return item.status == 'Available';
            });
        }

        if(checkAC) {
            lists = $.grep(lists, function (item) {
                return item.ac == checkAC;
            });
        }
        if(checkTV) {
            lists = $.grep(lists, function (item) {
                return item.tv == checkTV;
            });
        }
        if(checkRef) {
            lists = $.grep(lists, function (item) {
                return item.ref == checkRef;
            });
        }

        var items = lists.map(function (item) {
            var ac = item.ac ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
            var tv = item.tv ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
            var ref = item.ref ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
            return '<tr><td>'+item.name+'</td><td class="'+item.status+'">'+item.status+'</td><td>'+item.type+'</td><td>'+ac+'</td><td>'+tv+'</td><td>'+ref+'</td></tr>';
        });
  console.log("ITEMS",items);
        $('table.results tbody').html(items);
    }

代码段

＆＃13;

＆＃13;

var dataArray = {
  "rooms": [
	{"name":"1001","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":false},
	{"name":"1002","type":"Family","status":"Occupied","ac":true,"tv":true,"ref":true},
	{"name":"1003","type":"Double","status":"Available","ac":true,"tv":true,"ref":false},
	{"name":"1004","type":"Double","status":"Occupied","ac":false,"tv":false,"ref":true},
	{"name":"1005","type":"Single","status":"Available","ac":false,"tv":false,"ref":false},
	{"name":"1006","type":"Family","status":"Available","ac":false,"tv":false,"ref":false},
	{"name":"1007","type":"Family","status":"Available","ac":false,"tv":false,"ref":true},
	{"name":"1008","type":"Family","status":"Available","ac":false,"tv":false,"ref":true},
	{"name":"1009","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":true},
	{"name":"1010","type":"Double","status":"Occupied","ac":false,"tv":true,"ref":false},
	{"name":"1011","type":"Double","status":"Available","ac":true,"tv":true,"ref":false},
	{"name":"1012","type":"Single","status":"Occupied","ac":true,"tv":true,"ref":true},
	{"name":"1013","type":"Family","status":"Available","ac":false,"tv":false,"ref":false},
	{"name":"1014","type":"Single","status":"Available","ac":false,"tv":false,"ref":false},
	{"name":"1015","type":"Family","status":"Occupied","ac":false,"tv":false,"ref":true},
	{"name":"1016","type":"Family","status":"Occupied","ac":false,"tv":false,"ref":false},
	{"name":"1017","type":"Double","status":"Available","ac":true,"tv":false,"ref":false},
	{"name":"1018","type":"Single","status":"Available","ac":true,"tv":false,"ref":true}
  ]
 }

    $("#roomTypeSelect").on('change', function(){updateTableView()});
		$('#checkAvailable, #checkAC, #checkTV, #checkRef').on('click', function(e){updateTableView(e);});
		function updateTableView(e) {		
    roomType = $('#roomTypeSelect option:selected').text();
		    checkAvailable = $('#checkAvailable').prop('checked');
		    checkAC = $('#checkAC').prop('checked');
		    checkTV = $('#checkTV').prop('checked');
		    checkRef = $('#checkRef').prop('checked');
			var lists = dataArray.rooms;
      
			if(roomType != 'Room Type') {
			    lists = $.grep(lists, function (item) {
				    return item.type == roomType;
			    });
			}
			if(checkAvailable) {
				lists = $.grep(lists, function (item) {
				    return item.status == 'Available';
			    });
			}
      
			if(checkAC) {
				lists = $.grep(lists, function (item) {
				    return item.ac == checkAC;
			    });
			}
			if(checkTV) {
				lists = $.grep(lists, function (item) {
				    return item.tv == checkTV;
			    });
			}
			if(checkRef) {
				lists = $.grep(lists, function (item) {
				    return item.ref == checkRef;
			    });
			}
      
			var items = lists.map(function (item) {
				var ac = item.ac ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
				var tv = item.tv ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
				var ref = item.ref ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
			    return '<tr><td>'+item.name+'</td><td class="'+item.status+'">'+item.status+'</td><td>'+item.type+'</td><td>'+ac+'</td><td>'+tv+'</td><td>'+ref+'</td></tr>';
			});      
			$('table.results tbody').html(items);
		}	

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
		    <div class="col-xs-0 col-sm-3 col-md-3 col-lg-3" style="text-align:left; background-color:#ccc; border-right:1px solid #aaa; padding:2rem;">				
				<div class="form-group">				
					<select class="form-control" id="roomTypeSelect">
					  <option>Room Type</option>
					  <option>Single</option>
					  <option>Double</option>
					  <option>Family</option>
					</select>
			    </div>
			    <div class="form-check">
				  <input class="form-check-input" type="checkbox" value="" id="checkAvailable">
				  <label class="form-check-label" for="checkAvailable">Available</label>
				</div>
				<div class="form-check">
				  <input class="form-check-input" type="checkbox" value="" id="checkAC">
				  <label class="form-check-label" for="checkAC">AC</label>
				</div>
				<div class="form-check">
				  <input class="form-check-input" type="checkbox" value="" id="checkTV">
				  <label class="form-check-label" for="checkTV">TV</label>
				</div>
				<div class="form-check">
				  <input class="form-check-input" type="checkbox" value="" id="checkRef">
				  <label class="form-check-label" for="checkRef">Refridgerator</label>
				</div>
			</div>
		    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="padding:2rem">
			   <table class="table results">
				  <thead>
					<tr>
					  <th scope="col">Room#</th>
					  <th scope="col">Status</th>
					  <th scope="col">Type</th>
					  <th scope="col">AC</th>
					  <th scope="col">TV</th>
					  <th scope="col">Refridgerator</th>				  
					</tr>
				  </thead>
				  <tbody>
					
				  </tbody>
				</table>
			</div> 			
		  </div>

＆＃13;

＆＃13;

＆＃13;

问题：我觉得我使用太多$.grep方法取得了成果。有没有简单的方法来实现这个功能？

Answer 1

是的，您可以在$.grep内进行所有比较。

我还重构了使用复选框的命名约定。

var dataArray = {
  "rooms": [{
      "name": "1001",
      "type": "Single",
      "status": "Occupied",
      "ac": true,
      "tv": true,
      "ref": false
    },
    {
      "name": "1002",
      "type": "Family",
      "status": "Occupied",
      "ac": true,
      "tv": true,
      "ref": true
    },
    {
      "name": "1003",
      "type": "Double",
      "status": "Available",
      "ac": true,
      "tv": true,
      "ref": false
    },
    {
      "name": "1004",
      "type": "Double",
      "status": "Occupied",
      "ac": false,
      "tv": false,
      "ref": true
    },
    {
      "name": "1005",
      "type": "Single",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": false
    },
    {
      "name": "1006",
      "type": "Family",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": false
    },
    {
      "name": "1007",
      "type": "Family",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": true
    },
    {
      "name": "1008",
      "type": "Family",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": true
    },
    {
      "name": "1009",
      "type": "Single",
      "status": "Occupied",
      "ac": true,
      "tv": true,
      "ref": true
    },
    {
      "name": "1010",
      "type": "Double",
      "status": "Occupied",
      "ac": false,
      "tv": true,
      "ref": false
    },
    {
      "name": "1011",
      "type": "Double",
      "status": "Available",
      "ac": true,
      "tv": true,
      "ref": false
    },
    {
      "name": "1012",
      "type": "Single",
      "status": "Occupied",
      "ac": true,
      "tv": true,
      "ref": true
    },
    {
      "name": "1013",
      "type": "Family",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": false
    },
    {
      "name": "1014",
      "type": "Single",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": false
    },
    {
      "name": "1015",
      "type": "Family",
      "status": "Occupied",
      "ac": false,
      "tv": false,
      "ref": true
    },
    {
      "name": "1016",
      "type": "Family",
      "status": "Occupied",
      "ac": false,
      "tv": false,
      "ref": false
    },
    {
      "name": "1017",
      "type": "Double",
      "status": "Available",
      "ac": true,
      "tv": false,
      "ref": false
    },
    {
      "name": "1018",
      "type": "Single",
      "status": "Available",
      "ac": true,
      "tv": false,
      "ref": true
    }
  ]
}

$("#roomTypeSelect").on('change', function() {
  updateTableView()
});
$('#checkAvailable, #checkAC, #checkTV, #checkRef').on('click', function(e) {
  updateTableView(e);
});

function updateTableView(e) {
  roomType = $('#roomTypeSelect option:selected').text();
  var checkAvailable = $('#checkAvailable').prop('checked');
  
  var checks = {
    ac: $('#checkAC').prop('checked'),
    tv: $('#checkTV').prop('checked'),
    ref: $('#checkRef').prop('checked')
  };
  var lists = $.grep(dataArray.rooms, function(item) {
    var filter = true;
    if (roomType != 'Room Type')
      filter &= item.type == roomType;

    if (checkAvailable)
      filter &= item.status == 'Available';

    for (var prop in checks) {
      if (checks[prop])
        filter &= item[prop] == checks[prop]
    }

    return filter;
  });

  var items = lists.map(function(item) {
    var ac = item.ac ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
    var tv = item.tv ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
    var ref = item.ref ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
    return '<tr><td>' + item.name + '</td><td class="' + item.status + '">' + item.status + '</td><td>' + item.type + '</td><td>' + ac + '</td><td>' + tv + '</td><td>' + ref + '</td></tr>';
  });
  $('table.results tbody').html(items);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="col-xs-0 col-sm-3 col-md-3 col-lg-3" style="text-align:left; background-color:#ccc; border-right:1px solid #aaa; padding:2rem;">
    <div class="form-group">
      <select class="form-control" id="roomTypeSelect">
					  <option>Room Type</option>
					  <option>Single</option>
					  <option>Double</option>
					  <option>Family</option>
					</select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkAvailable">
      <label class="form-check-label" for="checkAvailable">Available</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkAC">
      <label class="form-check-label" for="checkAC">AC</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkTV">
      <label class="form-check-label" for="checkTV">TV</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkRef">
      <label class="form-check-label" for="checkRef">Refridgerator</label>
    </div>
  </div>
  <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="padding:2rem">
    <table class="table results">
      <thead>
        <tr>
          <th scope="col">Room#</th>
          <th scope="col">Status</th>
          <th scope="col">Type</th>
          <th scope="col">AC</th>
          <th scope="col">TV</th>
          <th scope="col">Refridgerator</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
</div>

Answer 2

您可以尝试将其更改为单个grep语句，例如

    $.grep(lists, function(item) {
      return (roomType != 'Room Type' ? item.type == roomType : true) && (checkAvailable ? item.status == 'Available' : true) && (checkAC ? item.ac == checkAC : true) && (checkTV ?item.tv == checkTV : true) && (checkRef ? item.ref == checkRef : true)
    });

var dataArray = {
  "rooms": [{
      "name": "1001",
      "type": "Single",
      "status": "Occupied",
      "ac": true,
      "tv": true,
      "ref": false
    },
    {
      "name": "1002",
      "type": "Family",
      "status": "Occupied",
      "ac": true,
      "tv": true,
      "ref": true
    },
    {
      "name": "1003",
      "type": "Double",
      "status": "Available",
      "ac": true,
      "tv": true,
      "ref": false
    },
    {
      "name": "1004",
      "type": "Double",
      "status": "Occupied",
      "ac": false,
      "tv": false,
      "ref": true
    },
    {
      "name": "1005",
      "type": "Single",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": false
    },
    {
      "name": "1006",
      "type": "Family",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": false
    },
    {
      "name": "1007",
      "type": "Family",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": true
    },
    {
      "name": "1008",
      "type": "Family",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": true
    },
    {
      "name": "1009",
      "type": "Single",
      "status": "Occupied",
      "ac": true,
      "tv": true,
      "ref": true
    },
    {
      "name": "1010",
      "type": "Double",
      "status": "Occupied",
      "ac": false,
      "tv": true,
      "ref": false
    },
    {
      "name": "1011",
      "type": "Double",
      "status": "Available",
      "ac": true,
      "tv": true,
      "ref": false
    },
    {
      "name": "1012",
      "type": "Single",
      "status": "Occupied",
      "ac": true,
      "tv": true,
      "ref": true
    },
    {
      "name": "1013",
      "type": "Family",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": false
    },
    {
      "name": "1014",
      "type": "Single",
      "status": "Available",
      "ac": false,
      "tv": false,
      "ref": false
    },
    {
      "name": "1015",
      "type": "Family",
      "status": "Occupied",
      "ac": false,
      "tv": false,
      "ref": true
    },
    {
      "name": "1016",
      "type": "Family",
      "status": "Occupied",
      "ac": false,
      "tv": false,
      "ref": false
    },
    {
      "name": "1017",
      "type": "Double",
      "status": "Available",
      "ac": true,
      "tv": false,
      "ref": false
    },
    {
      "name": "1018",
      "type": "Single",
      "status": "Available",
      "ac": true,
      "tv": false,
      "ref": true
    }
  ]
}

$("#roomTypeSelect").on('change', function() {
  updateTableView()
});
$('#checkAvailable, #checkAC, #checkTV, #checkRef').on('click', function(e) {
  updateTableView(e);
});

function updateTableView(e) {
  roomType = $('#roomTypeSelect option:selected').text();
  checkAvailable = $('#checkAvailable').prop('checked');
  checkAC = $('#checkAC').prop('checked');
  checkTV = $('#checkTV').prop('checked');
  checkRef = $('#checkRef').prop('checked');
  var lists = dataArray.rooms;

  lists = $.grep(lists, function(item) {
    return (roomType != 'Room Type' ? item.type == roomType : true) && (checkAvailable ? item.status == 'Available' : true) && (checkAC ? item.ac == checkAC : true) && (checkTV ? item.tv == checkTV : true) && (checkRef ? item.ref == checkRef : true)
  });

  var items = lists.map(function(item) {
    var ac = item.ac ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
    var tv = item.tv ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
    var ref = item.ref ? "<span style='color:green'>Yes</span>" : "<span style='color:red'>No</span>";
    return '<tr><td>' + item.name + '</td><td class="' + item.status + '">' + item.status + '</td><td>' + item.type + '</td><td>' + ac + '</td><td>' + tv + '</td><td>' + ref + '</td></tr>';
  });
  $('table.results tbody').html(items);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="col-xs-0 col-sm-3 col-md-3 col-lg-3" style="text-align:left; background-color:#ccc; border-right:1px solid #aaa; padding:2rem;">
    <div class="form-group">
      <select class="form-control" id="roomTypeSelect">
					  <option>Room Type</option>
					  <option>Single</option>
					  <option>Double</option>
					  <option>Family</option>
					</select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkAvailable">
      <label class="form-check-label" for="checkAvailable">Available</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkAC">
      <label class="form-check-label" for="checkAC">AC</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkTV">
      <label class="form-check-label" for="checkTV">TV</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkRef">
      <label class="form-check-label" for="checkRef">Refridgerator</label>
    </div>
  </div>
  <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="padding:2rem">
    <table class="table results">
      <thead>
        <tr>
          <th scope="col">Room#</th>
          <th scope="col">Status</th>
          <th scope="col">Type</th>
          <th scope="col">AC</th>
          <th scope="col">TV</th>
          <th scope="col">Refridgerator</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
</div>