Cet article montre comment utiliser un contrôle Tree en utilisant une librairie javascript gratuit D3.js (Site officiel http://d3js.org/) et WebMethod C# pour remplir les éléments du Tree.
 |
| ASP.NET Tree avec D3.js et WebMethod C# |
Default.aspx
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="tree_asp.net_json._Default" %> <asp:Content runat="server" ID="ContentHead" ContentPlaceHolderID="HeadContent"> </asp:Content> <asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent"> <section class="featured"> <div class="content-wrapper"> <hgroup class="title"> <h1>Collapsible Tree ASP.NET.</h1> <h2></h2> </hgroup> </div> </section> </asp:Content> <asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> <ol class="round"> <li class="one"> <%-- Div utilisant pour l'affichage du Tree--%> <div id="test"> </div> <%-- Fin Div utilisant pour l'affichage du Tree--%> </li> </ol> <style> .node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: orange; stroke-width: 1.8px; } </style> <script src="Scripts/jquery.1.9.1.min.js"></script> <%--Libraire D3.js--%> <script src="http://d3js.org/d3.v3.min.js"></script> <script> $.ajax({ type: "POST", url: "Services/Rapport.aspx/GetTree", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { var result = data.d var margin = { top: 20, right: 120, bottom: 20, left: 120 }, width = 960 - margin.right - margin.left, height = 500 - margin.top - margin.bottom; var i = 0, duration = 750, root; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function (d) { return [d.y, d.x]; }); var svg = d3.select("#test").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Récupération des données du Tree avec JSON root = result; root.x0 = height / 2; root.y0 = 0; function collapse(d) { if (d.children) { d._children = d.children; d._children.forEach(collapse); d.children = null; } } root.children.forEach(collapse); update(root); d3.select(self.frameElement).style("height", "500px"); function update(source) { var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); nodes.forEach(function (d) { d.y = d.depth * 180; }); var node = svg.selectAll("g.node") .data(nodes, function (d) { return d.id || (d.id = ++i); }); var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function (d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on("click", click); nodeEnter.append("circle") .attr("r", 1e-6) .style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff"; }); nodeEnter.append("text") .attr("x", function (d) { return d.children || d._children ? -15 : 15; }) .attr("dy", ".40em") .attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; }) .text(function (d) { return d.name; }) .style("fill-opacity", 1e-6); var nodeUpdate = node.transition() .duration(duration) .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; }); nodeUpdate.select("circle") .attr("r", 10) .style("fill", function (d) { return d._children ? "DarkBlue" : "#fff"; }); nodeUpdate.select("text") .style("fill-opacity", 1); var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function (d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); nodeExit.select("circle") .attr("r", 1e-6); nodeExit.select("text") .style("fill-opacity", 1e-6); var link = svg.selectAll("path.link") .data(links, function (d) { return d.target.id; }); link.enter().insert("path", "g") .attr("class", "link") .attr("d", function (d) { var o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); }); link.transition() .duration(duration) .attr("d", diagonal); link.exit().transition() .duration(duration) .attr("d", function (d) { var o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }) .remove(); nodes.forEach(function (d) { d.x0 = d.x; d.y0 = d.y; }); } function click(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); } } }); </script> </asp:Content>
Tree.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace tree_asp.net_json.Classes { public class Tree { public string name; public int size; public List<Tree> children=new List<Tree>(); } }
WebMethod
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static Tree GetTree() { Tree tr = new Tree(); tr.name = "General culture"; tr.size = 6000; List<Tree> lis = new List<Tree>(); Tree child = new Tree(); child.name = "Sports"; child.size = 5222; Tree child_sport = new Tree(); child_sport.name = "Foot Ball"; child_sport.size = 5222; child.children.Add(child_sport); child_sport = new Tree(); child_sport.name = "Basket Ball"; child_sport.size = 5222; child.children.Add(child_sport); child_sport = new Tree(); child_sport.name = "Hand Ball"; child_sport.size = 5222; child.children.Add(child_sport); child_sport = new Tree(); child_sport.name = "Tenis"; child_sport.size = 5222; child.children.Add(child_sport); child_sport = new Tree(); child_sport.name = "Box"; child_sport.size = 5222; child.children.Add(child_sport); lis.Add(child); child = new Tree(); child.name = "Countries"; child.size = 5222; Tree child_countries= new Tree(); child_countries.name = "Morocco"; child_countries.size = 5222; child.children.Add(child_countries); child_countries = new Tree(); child_countries.name = "Egypt"; child_countries.size = 5222; child.children.Add(child_countries); child_countries = new Tree(); child_countries.name = "Algeria"; child_countries.size = 5222; child.children.Add(child_countries); child_countries = new Tree(); child_countries.name = "Tunisia"; child_countries.size = 5222; child.children.Add(child_countries); child_countries = new Tree(); child_countries.name = "Lybia"; child_countries.size = 5222; child.children.Add(child_countries); child_countries = new Tree(); child_countries.name = "Qatar"; child_countries.size = 5222; child.children.Add(child_countries); child_countries = new Tree(); child_countries.name = "Syria"; child_countries.size = 5222; child.children.Add(child_countries); lis.Add(child); child = new Tree(); child.name = "Colors"; child.size = 5222; Tree child_d = new Tree(); child_d.name = "Red"; child_d.size = 5222; child.children.Add(child_d); child_d = new Tree(); child_d.name = "Green"; child_d.size = 5222; child.children.Add(child_d); child_d = new Tree(); child_d.name = "Blue"; child_d.size = 5222; child.children.Add(child_d); child_d = new Tree(); child_d.name = "Yellew"; child_d.size = 5222; child.children.Add(child_d); child_d = new Tree(); child_d.name = "Silver"; child_d.size = 5222; child.children.Add(child_d); lis.Add(child); tr.children = lis; return tr; }
Démo : vs2010_demo
Aucun commentaire:
Enregistrer un commentaire