javascript - Kendo UI ListBox 移除取决于 treeview 检查

Question

嘿，我正在使用 KendoListBox 并且需要遍历它并在取消选中完整类别后删除选定的 [选中] 项目。

let apiData = {
  "object_list": [{
    "Name": "facebook",
    "Description": null,
    "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Social Networks"
  }, {
    "Name": "twitter",
    "Description": null,
    "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Social Networks"
  }, {
    "Name": "Google",
    "Description": null,
    "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Search Engines"
  }]
};

$("#treeview").kendoTreeView({
  checkboxes: {
    checkChildren: true
  },
  check: onCheck,
  dataSource: {
    data: apiData,
    schema: {
      model: {
        children: 'items'
      },
      parse: (data) => {
        // The new data array to be used by treeview
        let newData = [];

        data.object_list.forEach(item => {
          // Look for an already created parent for that categoty
          let parent = newData.find(parentItem => parentItem.text === item.Cat);

          // If not found...
          if (!parent) {
            // ... create a new one...
            parent = {
              id: 2,
              text: item.Cat,
              expanded: true,
              items: [],
              spriteCssClass: "folder"
            };

            // ... and add it to the final data array.
            newData.push(parent);
          }

          // Add the new item to the parent
          parent.items.push({
            id: 3,
            text: item.Name,
            spriteCssClass: "image"
          });
        });

        // Return the root object with its new child items
        return [{
          id: 1,
          text: 'Categories',
          expanded: true,
          spriteCssClass: "rootfolder",
          items: newData
        }];
      }
    }
  }
});

$("#Sources").kendoListBox();


function onCheck(e) {
  let checkedNodes = [],
checkedNode = e.node.innerText,
intx = 0,
listBox = $("#Sources").data("kendoListBox");

  //console.log(e.node.innerText);

  if (e.node.ariaChecked == "false") {
console.log("Its just now been selected *REMOVED*");
var node = listBox.dataSource.get("twitter");

//let listBoxItem = listBox.dataItems().find(item => item.text === e.node.innerText);
let listBoxItem = listBox.dataItems().find(item => "twitter" === "twitter");

console.log("listbox item: ", listBoxItem);


var text = e.node.innerText;
var textSpliced = text.split("\n").slice(1);

if (textSpliced.length >= 1) {
  $.each(textSpliced, function(tS) {
    console.log("splice: ", textSpliced[tS]);

    listBox.dataSource.remove(textSpliced[tS]);
  });
} else {
  /*
$("#Sources option").each(function(i){
    alert($(this).text() + " : " + $(this).val());*/
  //if (listBoxItem) {
  //console.log("list: ", listBoxItem);
  //listBox.dataSource.remove(listBoxItem);
//}
//}
//    });
}

  } else {
console.log("Its just now been selected *ADDED*");
listBox = $("#Sources").data("kendoListBox");


var text = e.node.innerText;
var textSpliced = text.split("\n").slice(1);

if (textSpliced.length >= 1) {
  $.each(textSpliced, function(tS) {
    console.log(textSpliced[tS]);

    listBox.add({
      text: textSpliced[tS],
      value: textSpliced[tS]
    });
  });
} else {
  listBox.add({
    text: checkedNode,
    value: checkedNode
  });
}
  }
}

#treeview .k-sprite {
          background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        .rootfolder {
          background-position: 0 0;
        }

        .folder {
          background-position: 0 -16px;
        }

        .pdf {
          background-position: 0 -32px;
        }

        .html {
          background-position: 0 -48px;
        }

        .image {
          background-position: 0 -64px;
        }

        #filterText {
          width: 100%;
          box-sizing: border-box;
          padding: 6px;
          border-radius: 3px;
          border: 1px solid #d9d9d9;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">
      <script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
      <script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
      <script type="text/javascript" src="http://cdn.kendostatic.com/2021.1.330/js/kendo.all.min.js"></script>
<div id="treeview"></div>
<select id="Sources"></select>

我可以做这个

listBox.dataItems().find(item => item.text === e.node.innerText)

并且能够删除任何 1 个选中的项目。但如果它超过 1，我将无法弄清楚我错过了什么。
所以我尝试这样做:

var text = e.node.innerText;
var textSpliced = text.split("\n").slice(1);

if (textSpliced.length >= 1) {
  $.each(textSpliced, function(tS) {
    console.log("splice: ", textSpliced[tS]);

    listBox.dataSource.remove(textSpliced[tS]);
  });
} else {}

但是当然这并没有产生任何结果 - 没有删除 kendoListBox 中的项目。

Answer 1

试试这个新方法:

let apiData = {
  "object_list": [{
    "Name": "facebook",
    "Description": null,
    "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Social Networks"
  }, {
    "Name": "twitter",
    "Description": null,
    "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Social Networks"
  }, {
    "Name": "Google",
    "Description": null,
    "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Search Engines"
  }]
};

$("#treeview").kendoTreeView({
  checkboxes: {
    checkChildren: true
  },
  check: onCheck,
  dataSource: {
    data: apiData,
    schema: {
      model: {
        children: 'items'
      },
      parse: (data) => {
        // The new data array to be used by treeview
        let newData = [];

        data.object_list.forEach(item => {
          // Look for an already created parent for that categoty
          let parent = newData.find(parentItem => parentItem.text === item.Cat);

          // If not found...
          if (!parent) {
            // ... create a new one...
            parent = {
              id: 2,
              text: item.Cat,
              expanded: true,
              items: [],
              spriteCssClass: "folder"
            };

            // ... and add it to the final data array.
            newData.push(parent);
          }

          // Add the new item to the parent
          parent.items.push({
            id: 3,
            text: item.Name,
            spriteCssClass: "image"
          });
        });

        // Return the root object with its new child items
        return [{
          id: 1,
          text: 'Categories',
          expanded: true,
          spriteCssClass: "rootfolder",
          items: newData
        }];
      }
    }
  }
});

$("#Sources").kendoListBox();

function onCheck(e) {
  let listBox = $("#Sources").data("kendoListBox"),
      treeView = $("#treeview").data("kendoTreeView"),
      selection = [],
      getSelection = (items) => {
        items.forEach(item => { 
          if (item.hasChildren) getSelection(item.items);
          else if (item.checked) selection.push(item);
        });
      };

  listBox.remove(listBox.items());
  getSelection(treeView.dataSource.data());
  
  if (selection.length) {
    selection.forEach(item => {
      listBox.add({
        text: item.text,
        value: item.value
      });
    });
  }
}

#treeview .k-sprite {
          background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        .rootfolder {
          background-position: 0 0;
        }

        .folder {
          background-position: 0 -16px;
        }

        .pdf {
          background-position: 0 -32px;
        }

        .html {
          background-position: 0 -48px;
        }

        .image {
          background-position: 0 -64px;
        }

        #filterText {
          width: 100%;
          box-sizing: border-box;
          padding: 6px;
          border-radius: 3px;
          border: 1px solid #d9d9d9;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">
      <script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
      <script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
      <script type="text/javascript" src="http://cdn.kendostatic.com/2021.1.330/js/kendo.all.min.js"></script>
<div id="treeview"></div>
<select id="Sources"></select>