Seleziona una pagina

Questo semplice esempio permette di capire come recuperare lato javascript i valori delle checkbox selezionate in una treeview.

A causa del rendering della treeview il trucco sta nell’utilizzo dell’attributo title:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TreeViewCheckBoxs Sample</title>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" >
        function GetSelected() {
            $('#result').empty();
            $("#treeview :checked").each(function () {
                $('#result').append("<br />value = " + $(this).attr('title'));
	                  //  alert("value = " + $(this).attr('title'));
	            });
    }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        This Samples is used to solve thread on this forum: http://social.msdn.microsoft.com/Forums/it-IT/aspnetit/thread/d99f83fa-e46b-41c8-9bed-23e6fbc8576d
        <div id="treeview">
            <asp:TreeView ID="TreeView1" runat="server">
                <Nodes>
                    <asp:TreeNode Text="Lista" Value="Lista">
                        <asp:TreeNode SelectAction="None" ShowCheckBox="True" ToolTip="1" Text="N1" Value="1"></asp:TreeNode>
                        <asp:TreeNode SelectAction="None" ShowCheckBox="True" ToolTip="2" Text="N2" Value="2"></asp:TreeNode>
                        <asp:TreeNode SelectAction="None" ShowCheckBox="True" ToolTip="3" Text="N3" Value="3"></asp:TreeNode>
                        <asp:TreeNode SelectAction="None" ShowCheckBox="True" ToolTip="4" Text="N4" Value="4"></asp:TreeNode>
                    </asp:TreeNode>
                </Nodes>
            </asp:TreeView>
        </div>
        <input id="btn" type="button" value="Get Selected Checkboxs" onclick="GetSelected();" />
        <div id="result">
        </div>
    </div>
    </form>
</body>
</html>