kendo ui 列表框删除项目
kendo ui Listbox remove item
嘿,我需要一些帮助来获取 selected 项目并将其从 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>
我看过一些例子,但他们似乎都没有做任何事情。
下面的代码确实删除了(隐藏的)select 框中的 selected 项目,但没有从 kendoListBox.
中删除
$("select option[value='" + checkedNode + "']").remove();
似乎 Kendo UI 在添加项目时将其放入 kendoListBox 中。
<li class="k-item" role="option" aria-selected="false">facebook</li>
并且代码 here 仅显示如何删除 kendoListBox 中的第一项,而不是 selected 中的第一项。
var listBox = $("#listBox").data("kendoListBox");
listBox.remove(listBox.items().first());
我敢肯定这会很容易被我忽视,但如果有人能帮助我找到一种通过剑道移除它的方法UI api/commands,那就太好了。 =19=]
您可以通过两种方式进行:
- 使用 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>
- 使用数据源的
remove()
method with the target Model
selected from dataItems()
:
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>
如果您的条目文本是唯一的,您可以按照此处的代码进行操作,该代码显示了如何通过文本删除列表框中的条目(它实际上执行包含搜索,因此可能需要更改它):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
嘿,我需要一些帮助来获取 selected 项目并将其从 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>
我看过一些例子,但他们似乎都没有做任何事情。
下面的代码确实删除了(隐藏的)select 框中的 selected 项目,但没有从 kendoListBox.
中删除$("select option[value='" + checkedNode + "']").remove();
似乎 Kendo UI 在添加项目时将其放入 kendoListBox 中。
<li class="k-item" role="option" aria-selected="false">facebook</li>
并且代码 here 仅显示如何删除 kendoListBox 中的第一项,而不是 selected 中的第一项。
var listBox = $("#listBox").data("kendoListBox");
listBox.remove(listBox.items().first());
我敢肯定这会很容易被我忽视,但如果有人能帮助我找到一种通过剑道移除它的方法UI api/commands,那就太好了。 =19=]
您可以通过两种方式进行:
- 使用 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>
- 使用数据源的
remove()
method with the targetModel
selected fromdataItems()
:
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>
如果您的条目文本是唯一的,您可以按照此处的代码进行操作,该代码显示了如何通过文本删除列表框中的条目(它实际上执行包含搜索,因此可能需要更改它):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