如何使用复选框ID删除或隐藏数据

Question

无论如何都要使用复选框选择从数组中删除数据。 下面的代码是示例代码之一。

将有一个包含多个数据的默认网格。选择组合框后，将出现一个复选框列表。我想让用户选择他们想要查看的数据。实施例

[Primary Probe]

[x]Agent Running Mode
[x]Agent Version
[ ]Master/Slave Mode

The output would be like to show is Agent Running Mode and Agent Version and remove Master/Slave Mode from the grid once the button is trigger.

var data;
var gridColumns;
var grid;
var showlist;
var viewModel;
var setting = [];
var probesetting = [];

function removeA(setting) {
  var what, a = arguments,
    L = a.length,
    ax;
  while (L > 1 && setting.length) {
    what = a[--L];
    while ((ax = setting.indexOf(what)) !== -1) {
      setting.splice(ax, 1);
    }
  }
  return setting;
}

function showItems(arr) {
  var arr2 = Array.prototype.join.call(arr, "</br>");
  return arr2;
}


var defaultData = [{
  generalInfo: ["AgentRunningMode:Realtime", "AgentVersion :2.5", "MasterSlaveMode :Master"]
}, {
  generalInfo: ["AgentRunningMode:Realtime", "AgentVersion :2.5", "MasterSlaveMode :Master"]
}]


var defaultColumns = [{
  title: "Client Info",
  columns: [{
    field: "generalInfo",
    title: "General Information",
    locked: true,
    width: 150,
    "template": kendo.template("#= showItems(generalInfo) #")
  }]
}]



grid = $("#grid").kendoGrid({
  columns: defaultColumns,

  dataSource: {
    data: defaultData

  },

  selectable: "multiple",
  scrollable: true,
  pageable: false,
  columnMenu: true,
  sortable: true
});

viewModel = kendo.observable({
  showlist: false,

});

kendo.bind($(checklist), viewModel);

function onChange() {
  viewModel = kendo.observable({
    showlist: true,
  });
  filterinfo(cType.value());
  loadpps(setting);
  kendo.bind($(checklist), viewModel);
}

function loadpps(setting) {
  setting = setting.filter(function(item, index, inputArray) {
    return inputArray.indexOf(item) == index;
  });
  for (var i = 0; i < setting.length; i++) {
    $("input[name='checkedFiles[" + setting[i] + "]']").prop("checked", true);
  }
  console.log(setting);
}


//change view
function filterinfo(value) {
  var treeView = $("#treeview").data("kendoTreeView");
  if (treeView) {
    treeView.destroy();
    $("#treeview").html("");
  }

  function onCheck() {
      var checkedNodes = [];
      checkedNodeIds(treeView.dataSource.view(), checkedNodes);
    }
    //-------------------------------------------------------------
  switch (value) {
    case "1":


      treeView = $("#treeview").kendoTreeView({
        checkboxes: {
          checkChildren: false,
          template: "# if(!item.hasChildren){# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox'  name='checkedFiles[#= item.id #]' value='true' />#}else{# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#"
        },
        check: onCheck,
        dataSource: PrimaryProbe,
        dataTextField: "value"
      }).data("kendoTreeView");

      function checkedNodeIds(nodes, checkedNodes) {
        //console.log(nodes);
        for (var i = 0; i < nodes.length; i++) {
          if (nodes[i].checked) {
            setting.push(nodes[i].id);
          } else {
            removeA(setting, nodes[i].id);
          }
          if (nodes[i].hasChildren) {
            checkedNodeIds(nodes[i].children.view(), checkedNodes);
          }
        }
      }
      break;

  }
}


var clientType = [{
  "clientTypeID": 1,
  "clientTypeName": "PrimaryProbe"
}]


var cType = $("#clientType").kendoComboBox({
  filter: "contains",
  change: onChange,
  placeholder: "Filter by client type",
  dataTextField: "clientTypeName",
  dataValueField: "clientTypeID",
  dataSource: {
    data: clientType
  }
}).data("kendoComboBox");




var Probe = new kendo.data.HierarchicalDataSource({
  data: [{
    id: 1,
    parent_id: 0,
    value: "General Information - Probe",
    expanded: true,
    items: [{
      id: 11,
      parent_id: 1,
      value: "CPU Model"
    }, {
      id: 12,
      parent_id: 1,
      value: "CPU Usage"
    }, {
      id: 13,
      parent_id: 1,
      value: "Free Space"
    }, {
      id: 14,
      parent_id: 1,
      value: "Hardware Model"
    }, {
      id: 15,
      parent_id: 1,
      value: "Master/Slave Mode"
    }, {
      id: 16,
      parent_id: 1,
      value: "Memory Usage"
    }, {
      id: 17,
      parent_id: 1,
      value: "Product Version"
    }, {
      id: 18,
      parent_id: 1,
      value: "Software Version"
    }]
  }, {
    id: 2,
    parent_id: 0,
    value: "Sim Pool Information - Probe",
    expanded: true,
    items: [{
      id: 21,
      parent_id: 2,
      value: "Slot 1"
    }, {
      id: 22,
      parent_id: 2,
      value: "Slot 2"
    }, {
      id: 23,
      parent_id: 2,
      value: "Slot 3"
    }, {
      id: 24,
      parent_id: 2,
      value: "Slot 4"
    }, {
      id: 25,
      parent_id: 2,
      value: "Slot 5"
    }, {
      id: 26,
      parent_id: 2,
      value: "Slot 6"
    }, {
      id: 27,
      parent_id: 2,
      value: "Slot 7"
    }, {
      id: 28,
      parent_id: 2,
      value: "Slot 8"
    }]
  }, {
    id: 3,
    parent_id: 0,
    value: "Trace Files Information - Probe",
    expanded: true,
    items: [{
      id: 31,
      parent_id: 3,
      value: "FTP Upload Status"
    }, {
      id: 32,
      parent_id: 3,
      value: "Remaining Agent Trace Files"
    }, {
      id: 33,
      parent_id: 3,
      value: "Remaining Probe Trace Files"
    }, {
      id: 34,
      parent_id: 3,
      value: "Remaining TRP Log Files"
    }]
  }]
});
var PrimaryProbe = new kendo.data.HierarchicalDataSource({
  data: [{
    id: 5,
    parent_id: 0,
    value: "General - Primary Probe",
    expanded: true,
    items: [{
      id: 51,
      parent_id: 5,
      value: "Agent Running Mode"
    }, {
      id: 52,
      parent_id: 5,
      value: "Agent Version"
    }, {
      id: 53,
      parent_id: 5,
      value: "Master/Slave Mode"
    }]
  }]
});

#fieldlist {
  margin: 0;
  padding: 0;
}
#fieldlist li {
  list-style: none;
  padding-bottom: 1.5em;
  text-align: left;
}
#fieldlist label {
  display: block;
  padding-bottom: .3em;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}
.searchClientText {
  width: 222px !important;
  height: 25px !important;
  border-radius: 3px;
}
.checkboxList {
  margin: 0 0 -1em;
  padding: 0;
}
.checkboxList li {
  list-style: none;
  padding-bottom: 1em;
}
td {
  width: 150px;
  vertical-align: top;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <div class="demo-section k-content">

    <ul id="fieldlist">
      <li>
        <input id="clientType" style="width:auto" />
      </li>
    </ul>
    <div id="checklist" data-bind="visible: showlist">
      <table>
        <tr>
          <td>
            <div id="treeview"></div>
            <div id="result"></div>
          </td>
        </tr>
      </table>
    </div>

    <div id="grid"></div>
    <button class="k-button k-primary" id="get">Filter</button>

  </div>

</body>

</html>