跳到主要內容

fancytree load data

@{
    ViewBag.Title = "FancyTreeLoadData";
    //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-xp/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>
    $(function () {
        $("#tree2").fancytree({
            checkbox: true,
            selectMode: 3,
          
            ajax: {
                type: "GET",
                data: { company: "microsoft" },
                contentType: "application/json"
            },
            source: {
                 url: "/Handler2.ashx"
            }
            ,
            select: function(event, data) {             
            var selNodes = data.tree.getSelectedNodes();
            var selKeys = $.map(selNodes, function(node){
                return "[" + node.key + "]: '" + node.title + "'";
            });
            $("#echoSelection2").text(selKeys.join(", "));              
            },
            click: function(event, data) {
               alert(data.node.key);
               alert(data.node.title);
            }
         })

        //urlToHandler = '/Handler1.ashx';
        //jsonData = { PRDNAME:"APPLE", PRDAMOUNT: "30" };
        ////alert(jsonData);
        //$.ajax({
        //    url: urlToHandler,
        //    data: jsonData,
        //    dataType: 'json',
        //    type: 'GET',
        //    contentType: 'application/json',
        //    success: function (data) {
        //        alert(data.resultData);
        //    },
        //    error: function (xhr, ajaxOptions, thrownError) {
        //        alert(xhr.responseText);
        //    }
        //});
        //$.ajax({
        //    url: '/Handler1.ashx' ,
        //    data: { PRDNAME: "APPLE" },
        //    type: 'GET',
        //    contentType: 'application/json; charset=utf-8',
        //    dataType: 'json',
        //    success: function (data) {
        //        if(data)
        //            alert(data.resultData);
        //    }
        //});

    });
</script>

<div id="tree2" data-source="ajax" class="sampletree">
</div>
<div>Selected keys: <span id="echoSelection2">-</span></div>
---------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVCTest
{
    /// <summary>
    /// Handler2 的摘要描述
    /// </summary>
    public class Handler2 : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string company = (string)context.Request["company"];
            //所有字串都要加上 \"xxx\"
            string json = "";
            json += " {\"Root\": \"RootChildren\", \"children\": ";
            json += "  [ ";
            json += "  {\"title\": \"node 1\" , \"folder\": true, \"key\": \"node1\" , \"selected\": true}, ";
            json += "  {\"title\": \"node 2\", \"folder\": true , \"key\": \"node2\" ,\"expanded\": true , ";
            json += "   \"children\": [  {\"title\": \"node 2.1\" , \"key\": \"node2.1\", \"folder\": false} ,  ";
            json += "  {\"title\": \"node 2.2\" , \"key\": \"node2.2\" } ,  ";
            json += "  {\"title\": \"node 2.3\" , \"key\": \"node2.3\" } ,  ";
            json += "  {\"title\": \"node 2.4\" , \"key\": \"node2.4\", \"folder\": true ,\"children\": [ ";
            json += "  {\"title\": \"node 2.4.1\" , \"key\": \"node2.4.1\" ,\"selected\": true } ,   ";
            json += "  {\"title\": \"node 2.4.2\" , \"key\": \"node2.4.2\" } ,   ";
            json += "  {\"title\": \"node 2.4.3\" , \"key\": \"node2.4.3\" , \"unselectable\": true }   ";
            json += "] }   ";
            json += " ]} ";
            json += " ]} ";
          
            context.Response.ContentType = "application/json";
            context.Response.Write(json);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}