fancytree table

fancytree table

@{
    ViewBag.Title = "FancyTreeTable";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/lib/jquery.js"></script>
<script src="~/Scripts/lib/jquery-ui.custom.js"></script>
<link href="~/Scripts/src/skin-win7/ui.fancytree.css" rel="stylesheet" />
<script src="~/Scripts/src/jquery.fancytree.js"></script>
<script src="~/Scripts/src/jquery.fancytree.table.js"></script>

<script type="text/javascript">
    $(function () {
        $("#treetable").fancytree({
            extensions: ["table"],
            //checkbox: true,
            table: {
                indentation: 20,      // indent 20px per node level
                //nodeColumnIdx: 2,     // render the node title into the 2nd column
                //checkboxColumnIdx: 0  // render the checkboxes into the 1st column
            },
            ajax: {
                type: "GET",
                data: { company: "microsoft" },
                contentType: "application/json"
            },
            source: {
                url: "/Handler2.ashx"
            },
            lazyLoad: function (event, data) {
                data.result = { url: "ajax-sub2.json" }
            },
            renderColumns: function (event, data) {
                var node = data.node,
                  $tdList = $(node.tr).find(">td");
                //// (index #0 is rendered by fancytree by adding the checkbox)
                //$tdList.eq(1).text(node.getIndexHier()).addClass("alignRight");
                //// (index #2 is rendered by fancytree)
                //$tdList.eq(3).text(node.key);
                //$tdList.eq(4).html("<input type='checkbox' name='like' value='" + node.key + "'>");
                //index #0 is rendered by fancytree
                $tdList.eq(1).html("<input type='checkbox' name='chk1' value='" + node.key + "'>");
                $tdList.eq(2).html("<input type='button' name='btn1' value='取消' value1='"+ node.key +"' >");
            }      
        });
        /* Handle custom checkbox clicks */
        $("#treetable").delegate("input[name=chk1]", "click", function (e) {
            var node = $.ui.fancytree.getNode(e),
               $input = $(e.target);
            e.stopPropagation();  // prevent fancytree activate for this row
            if ($input.is(":checked")) {
                alert("check " + $input.val());
            } else {
                alert("unCheck " + $input.val());
            }
        });
        $("#treetable").delegate("input[name=btn1]", "click", function (e) {
            var node = $.ui.fancytree.getNode(e),
               $input = $(e.target);
            e.stopPropagation();
          
            //刪除節點
            //$("#treetable").fancytree("getTree").getNodeByKey($input.attr('value1')).remove();
            //addChildren  加入子節點
            //$("#treetable").fancytree("getTree").getNodeByKey($input.attr('value1')).addChildren({
            //    title: "new node",
            //    key: "newKey"               
            //});
            //appendSibling   加入鄰居節點
            //$("#treetable").fancytree("getTree").getNodeByKey($input.attr('value1')).appendSibling({
            //    title: "new node",
            //    key: "newKey"
            //});
            //用json置換目標節點
            $("#treetable").fancytree("getTree").getNodeByKey($input.attr('value1')).fromDict({
                title: "fromDict",
                children: [{ title: "t1" }, { title: "t2" }]
            });
          
            //alert($input.attr('value1'));
        });
    });

    //展開
    $(function () {
        $("#Expend").click(function () {
            $("#treetable").fancytree("getTree").visit(function (node) {
                node.setExpanded();
            });
        })
    });
    //收合
    $(function () {
        $("#Collapse").click(function () {
            $("#treetable").fancytree("getTree").visit(function (node) {
                node.setExpanded(false);
            });
        })
    });
    //展收
    $(function () {
        $("#Toggle").click(function () {
            $("#treetable").fancytree("getTree").visit(function (node) {
                node.toggleExpanded();
            });
        })
    });
    //取得fancyTree json
    $(function () {
        $("#treetoDict").click(function () {
        var tree = $("#treetable").fancytree("getTree");
        var d = tree.toDict(true);
        alert(JSON.stringify(d));
        })
    });

    $(function () {
        $("#getRootNode").click(function () {
            var root = $("#treetable").fancytree("getRootNode");          
            //alert(root.title);
            alert(root.title);  //root
        })
    });
  
</script>

<table id="treetable">
    <colgroup>
        <col width="300px"></col>
        <col width="100px"></col>
        <col width="100px"></col>      
    </colgroup>
    <thead>
        <tr> <th>tree</th> <th>checkbox</th> <th>button</th>  </tr>
    </thead>
    <tbody></tbody>
</table>

<br/><br /><br />
<input type="button" value="展開" id="Expend" />
<input type="button" value="收合" id="Collapse" />
<input type="button" value="展收" id="Toggle" />
<input type="button" value="Get Tree Json" id="treetoDict" />
<input type="button" value="Get Root Node" id="getRootNode" />