剑道 ui 列表框删除项目

Question

大家好，我需要一些帮助来获取所选项目并将其从 kendoListBox 中删除。

当检查 kendoTreeView 中的项目时，我目前已成功地将检查的项目添加到 kendoListBox 中，但我无法找到如何去关于当我从 kendoTreeView 中取消选中某个项目时删除它。

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) => {
        let newData = [];

        data.object_list.forEach(item => {
          let parent = newData.find(parentItem => parentItem.text === item.Cat);

          if (!parent) {
            parent = {
              id: 2,
              text: item.Cat,
              expanded: true,
              items: [],
              spriteCssClass: "folder"
            };

            newData.push(parent);
          }

          parent.items.push({
            id: 3,
            text: item.Name,
            spriteCssClass: "image"
          });
        });

        return [{
          id: 1,
          text: 'Categories',
          expanded: true,
          spriteCssClass: "rootfolder",
          items: newData
        }];
      }
    }
  }
});

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

function onCheck(e) {
  var checkedNodes = [];
  var checkedNode = e.node.innerText;
  
  console.log(e.node.innerText);
  
  if (e.node.ariaChecked == "false") {
    console.log("Its already selected *REMOVE*");
    var listBox = $("#Sources").data("kendoListBox");
    
    console.log(listBox);
    
  } else {
    console.log("Its just now been selected *ADD*");
    var listBox = $("#Sources").data("kendoListBox");

    listBox.add({
      text: checkedNode,
      value: checkedNode
    });
  }
}

function onExpand(e) {
  if ($("#tbSourcesFilter").val() == "") {
    $(e.node).find("li").show();
  }
}

$("#tbSourcesFilter").keyup(function(e) {
  var filterText = $(this).val().toLowerCase();

  //console.log("filterText: ", filterText);

  if (filterText !== "") {
    $("#treeview .k-group .k-group .k-in").closest("li").hide();
    $("#treeview .k-group").closest("li").hide();

    $("#treeview .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        var treeView = $("#treeview").data("kendoTreeView");
        treeView.expand($(this).parents("li"));
        $(this).show();
      });
    });

    $("#treeview .k-group .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        $(this).show();
      });
    });
  } else {
    //console.log("k-group: ", $("#treeview .k-group").find("li").show());
    $("#treeview .k-group").find("li").show();
    var nodes = $("#treeview > .k-group > li");
    //console.log("nodes: ", nodes);

    $.each(nodes, function(i, val) {
      //console.log(nodes[i].getAttribute("data-expanded"));
      if (nodes[i].getAttribute("data-expanded") == null) {
        $(nodes[i]).find("li").hide();
      }
    });
  }
});

        #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>
<input id="filterText" type="text" placeholder="Search categories" />
<div id="treeview"></div>
<select id="Sources"></select>

我看过一些例子，但它们似乎都没有做任何事情。

下面的代码确实删除了（隐藏的）选择框中的选定项，但没有从 kendoListBox 中删除。

$("select option[value='" + checkedNode + "']").remove();

似乎 Kendo UI 在添加项目时将其放入 kendoListBox 中。

<li class="k-item" role="option" aria-selected="false">facebook</li>

而代码here 仅显示如何删除kendoListBox 中的第一项，而不是选定的一项。

var listBox = $("#listBox").data("kendoListBox");
listBox.remove(listBox.items().first());

我确信这将是一件容易被我忽略的事情，但如果有人能帮助我找到通过 kendoUI api/commands 删除它的方法，那将是非常棒的。

Answer 1

您可以通过两种方式做到这一点：

1. 使用 ListBox 的 remove() 方法和 jQuery 选择的目标节点：

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) => {
        let newData = [];

        data.object_list.forEach(item => {
          let parent = newData.find(parentItem => parentItem.text === item.Cat);

          if (!parent) {
            parent = {
              id: 2,
              text: item.Cat,
              expanded: true,
              items: [],
              spriteCssClass: "folder"
            };

            newData.push(parent);
          }

          parent.items.push({
            id: 3,
            text: item.Name,
            spriteCssClass: "image"
          });
        });

        return [{
          id: 1,
          text: 'Categories',
          expanded: true,
          spriteCssClass: "rootfolder",
          items: newData
        }];
      }
    }
  }
});

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

function onCheck(e) {
  let checkedNodes = [],
      checkedNode = e.node.innerText,
      listBox = $("#Sources").data("kendoListBox");
  
  console.log(e.node.innerText);
  
  if (e.node.ariaChecked == "false") {
    let $listBoxItem = listBox.wrapper.find(`li:contains("${e.node.innerText}")`);
    listBox.remove($listBoxItem);
  } else {
    listBox.add({
      text: checkedNode,
      value: checkedNode
    });
  }
}

function onExpand(e) {
  if ($("#tbSourcesFilter").val() == "") {
    $(e.node).find("li").show();
  }
}

$("#tbSourcesFilter").keyup(function(e) {
  var filterText = $(this).val().toLowerCase();

  //console.log("filterText: ", filterText);

  if (filterText !== "") {
    $("#treeview .k-group .k-group .k-in").closest("li").hide();
    $("#treeview .k-group").closest("li").hide();

    $("#treeview .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        var treeView = $("#treeview").data("kendoTreeView");
        treeView.expand($(this).parents("li"));
        $(this).show();
      });
    });

    $("#treeview .k-group .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        $(this).show();
      });
    });
  } else {
    //console.log("k-group: ", $("#treeview .k-group").find("li").show());
    $("#treeview .k-group").find("li").show();
    var nodes = $("#treeview > .k-group > li");
    //console.log("nodes: ", nodes);

    $.each(nodes, function(i, val) {
      //console.log(nodes[i].getAttribute("data-expanded"));
      if (nodes[i].getAttribute("data-expanded") == null) {
        $(nodes[i]).find("li").hide();
      }
    });
  }
});

#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>
<input id="filterText" type="text" placeholder="Search categories" />
<div id="treeview"></div>
<select id="Sources"></select>

1. 使用 DataSource 的 remove() 方法和从 dataItems() 中选择的目标 Model：

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) => {
        let newData = [];

        data.object_list.forEach(item => {
          let parent = newData.find(parentItem => parentItem.text === item.Cat);

          if (!parent) {
            parent = {
              id: 2,
              text: item.Cat,
              expanded: true,
              items: [],
              spriteCssClass: "folder"
            };

            newData.push(parent);
          }

          parent.items.push({
            id: 3,
            text: item.Name,
            spriteCssClass: "image"
          });
        });

        return [{
          id: 1,
          text: 'Categories',
          expanded: true,
          spriteCssClass: "rootfolder",
          items: newData
        }];
      }
    }
  }
});

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

function onCheck(e) {
  let checkedNodes = [],
      checkedNode = e.node.innerText,
      listBox = $("#Sources").data("kendoListBox");
  
  console.log(e.node.innerText);
  
  if (e.node.ariaChecked == "false") {
    let listBoxItem = listBox.dataItems().find(item => item.text === e.node.innerText);
    
    if (listBoxItem) {
      listBox.dataSource.remove(listBoxItem);
    }
    
  } else {
    listBox.add({
      text: checkedNode,
      value: checkedNode
    });
  }
}

function onExpand(e) {
  if ($("#tbSourcesFilter").val() == "") {
    $(e.node).find("li").show();
  }
}

$("#tbSourcesFilter").keyup(function(e) {
  var filterText = $(this).val().toLowerCase();

  //console.log("filterText: ", filterText);

  if (filterText !== "") {
    $("#treeview .k-group .k-group .k-in").closest("li").hide();
    $("#treeview .k-group").closest("li").hide();

    $("#treeview .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        var treeView = $("#treeview").data("kendoTreeView");
        treeView.expand($(this).parents("li"));
        $(this).show();
      });
    });

    $("#treeview .k-group .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        $(this).show();
      });
    });
  } else {
    //console.log("k-group: ", $("#treeview .k-group").find("li").show());
    $("#treeview .k-group").find("li").show();
    var nodes = $("#treeview > .k-group > li");
    //console.log("nodes: ", nodes);

    $.each(nodes, function(i, val) {
      //console.log(nodes[i].getAttribute("data-expanded"));
      if (nodes[i].getAttribute("data-expanded") == null) {
        $(nodes[i]).find("li").hide();
      }
    });
  }
});

#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>
<input id="filterText" type="text" placeholder="Search categories" />
<div id="treeview"></div>
<select id="Sources"></select>

Answer 2

如果您的条目的文本是唯一的，您可以按照此处显示如何通过文本删除列表框中的条目的代码（它实际上执行包含搜索，因此可能需要更改它）：https://demos.telerik.com/kendo-ui/listbox/api

这里它被添加到你的 onCheck 方法中

function onCheck(e) {
  var checkedNodes = [];
  var checkedNode = e.node.innerText;
  
  console.log(e.node.innerText);
  
  if (e.node.ariaChecked == "false") {
    console.log("Its already selected *REMOVE*");
    var listBox = $("#Sources").data("kendoListBox");
    
    var text = e.node.innerText;
    var items = listBox.items();
    for (var i = 0; i < items.length; i++) {
        var dataItem = listBox.dataItem(items[i]);
        if (dataItem.Name.toLowerCase().indexOf(text) >= 0) { //WARNING - Contains Search here- may need to change depending on your requirements
            listBox.remove(items[i]);
        }
    }

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

    listBox.add({
      text: checkedNode,
      value: checkedNode
    });
  }
}

如果文本不是唯一的，您将不得不根据我猜的基础数据项的 id 来查看。

参考链接： 对于 ListView - 但应该与 ListBox 一起使用 https://docs.telerik.com/kendo-ui/knowledge-base/check-listview-item-selected

https://docs.telerik.com/kendo-ui/api/javascript/ui/listbox/methods/select