fancytree mode3

mode3 連動 checkbox

<script src="~/Scripts/lib/jquery.js"></script>
<script src="~/Scripts/lib/jquery-ui.custom.js"></script>
@*<link href="~/Scripts/src/skin-win8/ui.fancytree.css" rel="stylesheet" />*@
<link href="~/Scripts/src/skin-win7/ui.fancytree.css" rel="stylesheet" />
<script src="~/Scripts/src/jquery.fancytree.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btnDeselectAll3").click(function(){
            $("#tree3").fancytree("getTree").visit(function(node){
                node.setSelected(false);   //全不選
            });
            return false;
        });
        $("#btnSelectAll3").click(function(){
            $("#tree3").fancytree("getTree").visit(function(node){
                node.setSelected(true);    //全選
            });
            return false;
        });
        function clickEvent(event, data, msg) {
            //alert(event.type);
            alert(data.node.key);
            alert(data.node.title);
            //alert(msg);
          
            //$.ui.fancytree.info("Event('" + event.type + "', node=" + data.node + ")" + msg);
        }

        $("#tree3").fancytree({
            checkbox: true,    //勾選方塊
            selectMode: 3,    //連動勾選，但無法預設設定勾選
            source: [
              {title: "n1", expanded: true, children: [
                {title: "n1.1 (selected)"},
                {title: "n1.2"},
                {title: "n1.3"}
              ]},
              {title: "n2", expanded: true, children: [
                { title: "n2.1 (selected)", selected: true },     //
                {title: "n2.2", selected: false},
                {title: "n2.3", selected: null}
              ]},
              {title: "n3", expanded: true, children: [
                {title: "n3.1", expanded: true, children: [
                  {title: "n3.1.1 (unselectable)", unselectable: true},    //disabled
                  {title: "n3.1.2 (unselectable)", unselectable: true},
                  {title: "n3.1.3"}
                ]},
                {title: "n3.2", expanded: true, children: [
                  {title: "n3.2.1 (unselectableStatus: true)", unselectableStatus: true},
                  {title: "n3.2.2 (unselectableStatus: false)", unselectableStatus: false},
                  {title: "n3.2.3"}
                ]},
                {title: "n3.3", expanded: true, children: [
                  {title: "n3.3.1 (unselectableStatus: true, unselectableIgnore)",
                      unselectableStatus: true,  unselectableIgnore: true},
                  {title: "n3.3.2 (unselectableStatus: false, unselectableIgnore)",
                      unselectableStatus: false, unselectableIgnore: true},
                  {title: "n3.3.3"}
                ]}
              ]}
            ],
            init: function(event, data) {
                // Set key from first part of title (just for this demo output)
                data.tree.visit(function(n) {
                    n.key = n.title.split(" ")[0];
                    n.expanded = true;
                });
            },
            lazyLoad: function(event, ctx) {
                ctx.result = {url: "ajax-sub2.json", debugDelay: 1000};
            },
            loadChildren: function(event, ctx) {
                ctx.node.fixSelection3AfterClick();
            },
            select: function(event, data) {
                // Get a list of all selected nodes, and convert to a key array:
                var selKeys = $.map(data.tree.getSelectedNodes(), function(node){
                    return node.key;
                });
                $("#echoSelection3").text(selKeys.join(", "));
                // Get a list of all selected TOP nodes
                var selRootNodes = data.tree.getSelectedNodes(true);   //all top nodes
                // ... and convert to a key array:
                var selRootKeys = $.map(selRootNodes, function(node){
                    return node.key;
                });
                $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
                // $("#echoSelectionRoots3").text(selRootNodes.join(", "));
            },
            click: function (event, data) {
                clickEvent(event, data, ", targetType=" + data.targetType);
                // return false to prevent default behavior (i.e. activation, ...)
                //return false;
            },
            // The following options are only required, if we have more than one tree on one page:
            cookieId: "fancytree-Cb3",
            idPrefix: "fancytree-Cb3-"
        });
    });
    </script>
@{
    ViewBag.Title = "FancyTreeTest2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<p>
    <a href="#" id="btnSelectAll3">Select all</a> -
    <a href="#" id="btnDeselectAll3">Deselect all</a>
</p>
<div id="tree3"></div>
<div>Selected keys: <span id="echoSelection3">-</span></div>
<div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div>