根据复选框选择过滤行

Question

我有以下使用 jqwidgets 的示例。当用户单击 Get rows 按钮时，它 (console.log) 返回 table 中所有记录的数组。是否可以根据选中的复选框过滤这些记录？我想我可能必须根据 columntype: 'checkbox' 过滤它，但不确定如何。

  var data = new Array();
  var firstNames = [
      "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
  var lastNames = [
      "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
  var productNames = [
      "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
  var priceValues = [
      "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
  for (var i = 0; i < 10; i++) {
      var row = {};
      var productindex = Math.floor(Math.random() * productNames.length);
      var price = parseFloat(priceValues[productindex]);
      var quantity = 1 + Math.round(Math.random() * 10);
      row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
      row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
      row["productname"] = productNames[productindex];
      row["available"] = !!(i % 2);
      row["price"] = price;
      row["quantity"] = quantity;
      row["total"] = price * quantity;
      data[i] = row;
  }
  var source = {
      localdata: data,
      datatype: "array"
  };
  var dataAdapter = new $.jqx.dataAdapter(source, {
      loadComplete: function (data) {},
      loadError: function (xhr, status, error) {}
  });
  $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      width: 500,
      autoheight: true,
      editable: true,
      source: dataAdapter,
      columns: [{
          text: 'Available',
          datafield: 'available',
          width: 100,
          columntype: 'checkbox'
      }, {
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          text: 'Last Name',
          datafield: 'lastname',
          width: 100
      }, {
          text: 'Product',
          datafield: 'productname',
          width: 180
      }, {
          text: 'Quantity',
          datafield: 'quantity',
          width: 80,
          cellsalign: 'right'
      }, {
          text: 'Unit Price',
          datafield: 'price',
          width: 90,
          cellsalign: 'right',
          cellsformat: 'c2'
      }, {
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'
      }]
  });
  
   $('#jqxbutton').click(function () {
    var rows = $('#jqxgrid').jqxGrid('getrows');
    console.log(rows);
   
     alert(rows);
 });

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />

Answer 1

更好地分析 console.log(rows) 的 'output'，值得注意的是它包含一个对象数组。每个都有自己的属性 available，设置为 true 或 false，这对应于复选框的状态（选中或未选中）。

也就是说，要根据复选框选择进行过滤，只需将 filter() 应用于 rows，以便 return 那些具有 available 属性设为真值。

for(var data=new Array,firstNames=["Andrew","Nancy","Shelley","Regina","Yoshi","Antoni","Mayumi","Ian","Peter","Lars","Petra","Martin","Sven","Elio","Beate","Cheryl","Michael","Guylene"],lastNames=["Fuller","Davolio","Burke","Murphy","Nagase","Saavedra","Ohno","Devling","Wilson","Peterson","Winkler","Bein","Petersen","Rossi","Vileid","Saylor","Bjorn","Nodier"],productNames=["Black Tea","Green Tea","Caffe Espresso","Doubleshot Espresso","Caffe Latte","White Chocolate Mocha","Cramel Latte","Caffe Americano","Cappuccino","Espresso Truffle","Espresso con Panna","Peppermint Mocha Twist"],priceValues=["2.25","1.5","3.0","3.3","4.5","3.6","3.8","2.5","5.0","1.75","3.25","4.0"],i=0;i<10;i++){var row={},productindex=Math.floor(Math.random()*productNames.length),price=parseFloat(priceValues[productindex]),quantity=1+Math.round(10*Math.random());row.firstname=firstNames[Math.floor(Math.random()*firstNames.length)],row.lastname=lastNames[Math.floor(Math.random()*lastNames.length)],row.productname=productNames[productindex],row.available=!!(i%2),row.price=price,row.quantity=quantity,row.total=price*quantity,data[i]=row}var source={localdata:data,datatype:"array"},dataAdapter=new $.jqx.dataAdapter(source,{loadComplete:function(a){},loadError:function(a,e,t){}});$("#jqxgrid").jqxGrid({theme:"energyblue",width:500,autoheight:!0,editable:!0,source:dataAdapter,columns:[{text:"Available",datafield:"available",width:100,columntype:"checkbox"},{text:"First Name",datafield:"firstname",width:100},{text:"Last Name",datafield:"lastname",width:100},{text:"Product",datafield:"productname",width:180},{text:"Quantity",datafield:"quantity",width:80,cellsalign:"right"},{text:"Unit Price",datafield:"price",width:90,cellsalign:"right",cellsformat:"c2"},{text:"Total",datafield:"total",width:100,cellsalign:"right",cellsformat:"c2"}]});
  
$('#jqxbutton').click(function () {
    var rows = $('#jqxgrid').jqxGrid('getrows')
    var selectedRows = rows.filter(x => x.available)
    console.log(selectedRows)
});

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/><link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/><script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script><div id="jqxgrid"></div><input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows"/>

根据复选框选择过滤行

filter rows based on checkbox selection

javascript

jqwidget