如何在客户端的RadTreeView中获取所有检查的项目和值? [英] How can i get all checked items and values in RadTreeView on client side?
问题描述
我在RadCombobox中有RadTreeView. 我需要使用javascipt创建函数,因为我想在关闭RadComboBox之后读取所有选中的项目及其值.
I have the RadTreeView in the RadCombobox. I need to create function using javascipt because i want to read all checked items and their values after closing of the RadComboBox.
如何使用javascript获取所有选中的项目和值?
How can i get all checked items and values using javascript?
这是我的源代码:
function OnClientDropDownClosed()
{
//Foreach all checked items and save to array
//I want to need for example: Text: John Black, Value: 1
}
<telerik:RadComboBox ID="RadComboBox1" OnClientDropDownClosed="OnClientDropDownClosed" runat="server" Width="500px" ShowToggleImage="True"
ExpandAnimation-Type="None"
CollapseAnimation-Type="None">
<ItemTemplate>
<div id="div1">
<telerik:RadTreeView runat="server" ID="RadTreeView1" CheckBoxes="true" Width="100%"
Height="140px" TriStateCheckBoxes="true">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Company" Value="9" Expanded="true">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Employees A" Value="10" Expanded="true">
<Nodes>
<telerik:RadTreeNode runat="server" Value="1" Text="John Black">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Value="2" Text="Peter Snopy">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Value="3" Text="George New">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Value="4" Text="William Wall">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Employees B" Value="11" Expanded="true">
<Nodes>
<telerik:RadTreeNode runat="server" Value="5" Text="John Black">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Value="6" Text="Peter Snopy">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Value="7" Text="George New">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Value="8" Text="William Wall">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</div>
</ItemTemplate>
<Items>
<telerik:RadComboBoxItem Text="" />
</Items>
</telerik:RadComboBox>
推荐答案
您可以使用TreeView.get_nodes()
和TreeNode.get_nodes()
,但是这些仅提供您的直接节点,而不是它们的完整后代.
You can use TreeView.get_nodes()
and TreeNode.get_nodes()
but these only give you the immediate nodes, not their full descendants.
因此对于具有不同级别节点的RadTreeView,我们需要具有递归功能以深入到整个节点层次结构.
So for RadTreeView with varying levels of nodes, we need to have a recursive function to drill down into the whole nodes hierarchy.
此答案改编自wizpert的答案和Telerik博客: http://www .telerik.com/blogs/如何从带有复选框的树视图中获取选中的项目
This answer is adapted from wizpert's answer and this Telerik blog: http://www.telerik.com/blogs/how-to-get-the-checked-items-from-a-treeview-with-checkboxes
function OnClientDropDownClosed(sender, eventArgs)
{
// first let's get hold of the treeview (sender is the combobox)
var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
// pass the treeview nodes to another function to find the checked nodes
var items = getCheckedNodes(tree.get_nodes());
var text = 'None selected'; // default text
if (items.length > 0)
{
var texts = [];
for (var i = 0; i < items.length; i++)
{
// extract the text only of the checked nodes
texts.push(items[i].get_text());
}
text = texts.join(', '); // comma separated text
}
sender.set_text(text); // set the combobox text
}
function getCheckedNodes(nodes) {
var node, childCheckedNodes;
var checkedNodes = []; // array of the checked nodes
for (var i = 0; i < nodes.get_count(); i++) {
node = nodes.getNode(i);
if (node.get_checked()) {
checkedNodes.push(node); // add to array if checked
}
// to understand recursion, first you must understand recursion
if (node.get_nodes().get_count() > 0)
{
// recursive function call
childCheckedNodes = getCheckedNodes(node.get_nodes());
if (childCheckedNodes.length > 0)
{
// append array with results from recursive call
checkedNodes = checkedNodes.concat(childCheckedNodes);
}
}
}
return checkedNodes;
}
这篇关于如何在客户端的RadTreeView中获取所有检查的项目和值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!