[Resolvido] Ligando o jsTree programaticamente a entidades do ser

[RSS iMasters 5]

jsTree éum componente jQuery baseado em JavaScript muito útil para exibição de conteúdoem uma estrutura de árvore de forma hierárquica. Darei uma demonstração decomo você pode ligar o jsTree de maneira programática com os dados do Server sideutilizando JSON.

Antes de irmos para a implementação, vamos primeiro dar uma olhada no formato de entrada do JSON para criar nós.

1.json:  [   { attributes:  { id: "root1", rel: "root" },

2.state: "open", data: "Root node 1",

3.children: [ { attributes: { id: "root1_child1", rel: "folder" },

4.data: { title: "Custom icon", icon: "../images/ok.jpg" }

5.},

6.//.. . other nodes

7.]

Eaqui está a implementação baseada na entidade de um jsTree node.

001.using System;

002.using System.Collections.Generic;

003.using System.Linq;

004.using System.Web;

005.

006.public class JsTreeNode

007.{

008.public JsTreeNode()

009.{

010.}

011.Attributes _attributes;

012.public Attributes attributes

013.{

014.get

015.{

016.return _attributes;

017.}

018.set

019.{

020._attributes = value;

021.}

022.}

023.Data _data;

024.public Data data

025.{

026.get

027.{

028.return _data;

029.}

030.set

031.{

032._data = value;

033.}

034.}

035.string _state;

036.public string state

037.{

038.get

039.{

040.return _state;

041.}

042.set

043.{

044._state = value;

045.}

046.}

047.List<jstreenode> _children;

048.public List<jstreenode> children

049.{

050.get

051.{

052.return _children;

053.}

054.set

055.{

056._children = value;

057.}

058.}

059.

060.}

061.public class Attributes

062.{

063.string _id;

064.

065.public string id

066.{

067.get

068.{

069.return _id;

070.}

071.set

072.{

073._id = value;

074.}

075.}

076.string _rel;

077.

078.public string rel

079.{

080.get

081.{

082.return _rel;

083.}

084.set

085.{

086._rel = value;

087.}

088.}

089.string _mdata;

090.

091.public string mdata

092.{

093.get

094.{

095.return _mdata;

096.}

097.set

098.{

099._mdata = value;

100.}

101.}

102.}

103.

104.public class Data

105.{

106.string _title;

107.

108.public string title

109.{

110.get

111.{

112.return _title;

113.}

114.set

115.{

116._title = value;

117.}

118.}

119.

120.string _icon;

121.

122.public string icon

123.{

124.get

125.{

126.return _icon;

127.}

128.set

129.{

130._icon = value;

131.}

132.}

133.}

134.

135.

136.

137.

138.</jstreenode></jstreenode>

Como vocêpode ver no JSON, o jsTree espera cada nó da coleção contendo a seguinte estrutura

1.{  attributes: { id: "pjson1_5", rel: "root2" },  data: "Root node 2" }

ondeestados e filhos são campos opcionais a serem criados. Ao manter a anatomiaacima no jsTree node, podemos criar classes server side para ter omapeamento um-a-um esses objetos json, com composições/agregaçõesnecessárias, de modo que podemos conectá-las com o node collection, preenchido apartir do server side. Vamos criar um jsTreeNode principal e as outrasentidades que compõe sua anatomia como mostrado acima.

 < OjsTreeNode é capaz de mapear o tipo de node do json no jsTree completamente. Eagora é hora de preencher a collection do jsTreeNode e a ligar ao JsTree.

01.using System;

02.using System.Collections.Generic;

03.using System.Linq;

04.using System.Web;

05.using System.Web.UI;

06.using System.Web.UI.WebControls;

07.using System.Web.Script.Serialization;

08.

09.public partial class _Default : System.Web.UI.Page

10.{

11.protected void Page_Load(object sender, EventArgs e)

12.{

13.if (!IsPostBack)

14.{

15.RouteCallbacks();

16.}

17.}

18.void RouteCallbacks()

19.{

20.string callback = Request.Params["callback"];

21.if (string.IsNullOrEmpty(callback))

22.return;

23.

24.if (callback == "GetNodesJson")

25.this.GetNodesJson();

26.}

27.void GetNodesJson()

28.{

29.List<jstreenode> nodesList = new List<jstreenode>();

30.for (int i = 1; i < 10; i++)

31.{

32.JsTreeNode node = new JsTreeNode();

33.node.attributes = new Attributes();

34.node.attributes.id = "rootnod" + i;

35.node.attributes.rel = "root" + i;

36.node.data = new Data();

37.node.data.title = "Root node:" + i;

38.node.state = "open";

39.

40.node.children = new List<jstreenode>();

41.

42.for (int j = 1; j < 4; j++)

43.{

44.JsTreeNode cnode = new JsTreeNode();

45.cnode.attributes = new Attributes();

46.cnode.attributes.id = "childnod1" + j;

47.node.attributes.rel = "folder";

48.cnode.data = new Data();

49.cnode.data.title = "child node: " + j;

50.cnode.attributes.mdata = "{draggable : true,max_children : 1,max_depth : 1 }";

51.node.children.Add(cnode);

52.

53.}

54.node.attributes.mdata = "{draggable : false,max_children : 1, max_depth :1}";

55.nodesList.Add(node);

56.}

57.JavaScriptSerializer ser = new JavaScriptSerializer();

58.string res = ser.Serialize(nodesList);

59.Response.ContentType = "application/json";

60.Response.Write(res);

61.Response.End();

62.}

63.}

64.</jstreenode></jstreenode></jstreenode>

Aseguir, está o fragmento do código completo do client side necessário para ligaro jsTree às entidades do server side baseadas em dados JSON. Por favor, não seesqueça de adicionar o jQuery e seus arquivos js do jsTree relacionados à suapágina. A configuração "rule{}" é opcional. Só é obrigatória quandovocê quer que seu jsTree seja totalmente ***able.

01.<script type="text/javascript">

02.$(function() {

03.$("#divJsTreeDemo").tree({

04.data: {

05.type: "json",

06.url: "Default.aspx?callback=GetNodesJson",

07.async: true

08.

09.},

10.

11.rules: {

12.metadata: "mdata",

13.use_inline: true,

14.clickable: ["root2", "folder"],

15.deletable: "none",

16.renameable: "all",

17.creatable: ["folder"],

18.draggable: ["folder"],

19.dragrules: ["folder * folder", "folder inside root", "tree-drop inside root2"],

20.drag_button: "left",

21.droppable: ["tree-drop"]

22.

23.}

24.});

25.

26.});

27.

28.</script>

Aseguir está a marcação da página.

1.<form id="form1" runat="server">

2.<div id="divJsTreeDemo">

3.</div>

4.</form>

Aquiestá, dê uma olhada.

 Esperoque ajude. Para mais sobre jsTree, acesse seu website.

?

Texto original disponível em http://mohyuddin.blogspot.com/2009/05/binding-jstree-programmatically-with.html

 

http://imasters.com.br/artigo/22510/jquery/ligando-o-jstree-programaticamente-a-entidades-do-server-side-usando-json-no-aspnet