Criando MenuTreeView no Javascript

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja neste artigo como criar MenuTreeView no Javascript, um TreeView sem linhas igual ao OutLook 2010.

Nesse artigo vou mostrar como criar um TreeView igual ao OutLook 2010.

Layout do Menu

Figura 1. Layout do Menu

Para construir o TreeView vamos utilizar recursividade. Cada item pode ter nenhuns ou muitos filhos, e cada filho também pode ter nenhuns ou muitos filhos.

Abaixo a figura do modelo de classes.

Modelo da Classe

Figura 2. Modelo da Classe


Classe MenuTreeView.

  • Id: Identificador da classe.
  • Recipient: Elemento aonde vai ser construído o TreeView.
  • Items: Nós do TreeView.
  • LastSelectedItem: Último nó selecionado.
  • OnSelectedIndex: Evento quando algum nó é selecionado.

Classe ItemMenuTreeView.

  • Id: Identificador da classe.
  • Text: Texto do nó.
  • Value: Valor do nó.
  • UrlImagem: Imagem do nó.
  • Tooltip: Tooltip do nó
  • IsOpen: Indica se o nó está expandido ou recolhido.
  • Items: Nós filhos.
  • ObjTr: Elemento TR do HTML.
  • ObjArrowImage: Elemento IMG do Html.
  • oMenuTreeView: Objeto da classe MenuTreeView.
  • Parent: Pai do nó.
  • Listagem 1: Construtores.
function MenuTreeView(id, recipient) {
    this.Id = id;
    this.Recipient = recipient;
    
    this.Items = [];

    this.LastSelectedItem;

    this.OnSelectedIndex;
}

function ItemMenuTreeView(id, text, value, urlImagem, tooltip, isExpand) {
    this.Id = id;
    this.Text = text;
    this.Value = value;
    this.UrlImagem = urlImagem;
    this.Tooltip = tooltip;
    this.IsOpen = isExpand;
    this.Items = [];

    this.ObjTr;
    this.ObjArrowImage;

    this.oMenuTreeView;

    this.Parent;
}

Os métodos que criaremos agora são para adicionar e remover os nós.

  • ItemMenuTreeView.prototype.AddItem: Adiciona um nó filho.
  • ItemMenuTreeView.prototype.ClearItems: Limpa a coleção de nós.
  • MenuTreeView.prototype.AddItem: Adiciona um nó filho.
  • MenuTreeView.prototype.ClearItems: Limpa a coleção de nós.

Listagem 2: Adicionando nós.

MenuTreeView.prototype.AddItem = function (id, text, value, urlImagem, 
tooltip, isExpand) {
    var index = this.Items.length;

    this.Items[index] = new ItemMenuTreeView(id, text, value, urlImagem, 
tooltip, isExpand);
    this.Items[index].oMenuTreeView = this;
    this.Items[index].Parent = this;

    return this.Items[index];
};

MenuTreeView.prototype.ClearItems = function () {
    this.Items = null;
    this.Items = [];
};

ItemMenuTreeView.prototype.AddItem = function (id, text, value, urlImagem, 
tooltip, isExpand) {
    var index = this.Items.length;

    this.Items[index] = new ItemMenuTreeView(id, text, value, urlImagem, 
tooltip, isExpand);
    this.Items[index].oMenuTreeView = this.oMenuTreeView;
    this.Items[index].Parent = this;

    return this.Items[index];
};

ItemMenuTreeView.prototype.ClearItems = function () {
    this.Items = null;
    this.Items = [];
};

Agora vamos criar os métodos que serão chamados quando os eventos OnMouseOver, OnMouseOut, OnClick, OnDblClick forem disparados.

  • ItemMenuTreeView.prototype.item_OnMouseOver: Quando o mouse passa sobre o objeto.
  • ItemMenuTreeView.prototype.item_OnMouseOut: Quando o mouse deixa de estar em cima do objeto.
  • ItemMenuTreeView.prototype.item_OnClick: Seleciona o nó.
  • ItemMenuTreeView.prototype.item_OnDblClick: Expandi ou recolhe os nós filhos.

Listagem 3: Eventos.

ItemMenuTreeView.prototype.item_OnMouseOver = function (element) {
    element.style.backgroundColor = "#FFE6A0";
};

ItemMenuTreeView.prototype.item_OnMouseOut = function (element) {
    element.style.backgroundColor = "";
};

ItemMenuTreeView.prototype.item_Click = function (element) {
    if (this.oMenuTreeView.LastSelectedItem != null) {
        this.oMenuTreeView.LastSelectedItem.ObjTr.bgColor = '';
    }

    this.oMenuTreeView.LastSelectedItem = this;
    this.oMenuTreeView.LastSelectedItem.ObjTr.bgColor = '#BEBEBE';

    if (this.oMenuTreeView.OnSelectedIndex != null) {
        this.oMenuTreeView.OnSelectedIndex();
    }
};

ItemMenuTreeView.prototype.item_DblClick = function () {
    if (this.ObjArrowImage != null) {
        if (this.IsOpen == false) {
            this.IsOpen = true;
            this.ObjArrowImage.src = 'Imagens/Seta1.png';
            this.Expand();
        }
        else {
            this.IsOpen = false;
            this.ObjArrowImage.src = 'Imagens/Seta2.png';
            this.Collapse();
        }
    }
};

Os próximos métodos servem para expandir e recolher os nós filhos do TreeView.

  • ItemMenuTreeView.prototype.Expand: Expande os nós filhos.
  • ItemMenuTreeView.prototype.Collapse: Recolhe os nós filhos.

Listagem 4: Expandir e Recolher.

ItemMenuTreeView.prototype.Expand = function () {
    for (var index = 0; index < this.Items.length; index++) {
        if (window.ActiveXObject) {
            this.Items[index].ObjTr.style.display = 'block';
        }
        else {
            this.Items[index].ObjTr.style.display = 'table-row';
        }

        if (this.Items[index].IsOpen == true) {
            this.Items[index].Expand();
        }
    }
}

ItemMenuTreeView.prototype.Collapse = function () {
    for (var index = 0; index < this.Items.length; index++) {
        this.Items[index].ObjTr.style.display = 'none';
        this.Items[index].Collapse();
    }
}

Listagem 5: Criando o TreeView.

MenuTreeView.prototype.Create = function () {
    var objTable = document.createElement('TABLE');
    var objTBody = document.createElement('TBODY');

    objTable.style.width = '100%';
    objTable.cellPadding = 2;
    objTable.cellSpacing = 0;
    objTable.border = 0;
    objTable.style.whiteSpace = 'nowrap';

    var self = this;

    for (var index = 0; index < this.Items.length; index++) {
        this.Items[index].Create(objTBody, this.Items[index], '');
    }

    objTable.appendChild(objTBody);
    this.Recipient.appendChild(objTable);
}; 

ItemMenuTreeView.prototype.Create = function (objTBody, 
    objItemMenuTreeView, space, isOpen) {
    var objTr = document.createElement('TR');

    objTr.id = objItemMenuTreeView.Id;
    objTr.title = objItemMenuTreeView.Tooltip;
    objTr.style.cursor = 'default';

    objTr.onmouseover = function () { objItemMenuTreeView.item_OnMouseOver(this); }
    objTr.onmouseout = function () { objItemMenuTreeView.item_OnMouseOut(this); }
    objTr.onclick = function () { objItemMenuTreeView.item_Click(this); }
    objTr.ondblclick = function () { objItemMenuTreeView.item_DblClick(); }

    //################# TEXT #######################
    var textTd = document.createElement('TD');
    var objSpan = document.createElement('SPAN');
    var objSpace = document.createElement('LABEL');
    var objImg = document.createElement('IMG');
    var objLabel = document.createElement('LABEL');
    var objSpace2 = document.createElement('LABEL');
    var imageImg = document.createElement('IMG');

    textTd.style.whiteSpace = 'nowrap';

    if (objItemMenuTreeView.IsOpen) {
        objImg.src = 'Imagens/Seta1.png';
    }
    else {
        objImg.src = 'Imagens/Seta2.png';
    }

    if (isOpen != null) {
        if (isOpen) {
            if (window.ActiveXObject) {
                objTr.style.display = 'block';
            }
            else {
                objTr.style.display = 'table-row';
            }
        }
        else {
            objTr.style.display = 'none';
        }
    }

    objLabel.innerHTML = ' ' + objItemMenuTreeView.Text;
    objLabel.className = 'itemMenuTreeViewLabel';

    objSpace.innerHTML = space;

    objSpan.appendChild(objSpace);

    if (objItemMenuTreeView.Items.length > 0) {
        objItemMenuTreeView.ObjArrowImage = objImg;
        objSpan.appendChild(objImg);
    }

    imageImg.src = objItemMenuTreeView.UrlImagem;
    objSpace2.innerHTML = ' ';

    objSpan.appendChild(objSpace2);
    objSpan.appendChild(imageImg);
    objSpan.appendChild(objLabel);
    textTd.appendChild(objSpan);
    objTr.appendChild(textTd);
    //################# TEXT #######################

    objTBody.appendChild(objTr);

    objItemMenuTreeView.ObjTr = objTr;

    for (var index = 0; index < objItemMenuTreeView.Items.length; index++) {
        objItemMenuTreeView.Create(objTBody, objItemMenuTreeView.Items[index], 
        space + '   ', objItemMenuTreeView.IsOpen);
    }
};

Listagem 6: HTML da página.

<html>
<head>
  <title>TreeView</title>
  <link rel="stylesheet" href="MainStyleSheet.css" type="text/css" />

  <script language="javascript" type="text/javascript" src="MenuTreeView.js"></script>
  <script language="javascript" type="text/javascript">
      var oMenuTreeView;

      function document_OnLoad() {
          oMenuTreeView = new MenuTreeView('oMenuTreeView', document.getElementById('recipientDIV'));
          oMenuTreeView.OnSelectedIndex = oMenuTreeView_SelectedIndex;


          var caixaEntrada = oMenuTreeView.AddItem('caixaEntrada', 'Caixa de Entrada', '0', 
						    'Imagens/Image1.png', '1 E-mail', true);

          caixaEntrada.AddItem('pasta1', 'Pasta 1', '4', 'Imagens/pasta.gif', 'Pasta', true);

          var caixaSaida = oMenuTreeView.AddItem('caixaSaida', 'Caixa de Saída', '1', 
						  'Imagens/Image2.png', '2 E-mail', true);

          caixaSaida.AddItem('pasta2', 'Pasta 2', '4', 'Imagens/pasta.gif', 'Pasta', true);

          oMenuTreeView.AddItem('itensExcluido', 'Itens excluídos', '2', 
					            'Imagens/Image3.png', '3 E-mail', true);

          var rascunhos = oMenuTreeView.AddItem('rascunhos', 'Rascunhos', 
											    '3', 'Imagens/Image4.png', '', true);

          rascunhos.AddItem('pasta3', 'Pasta 3', '4', 'Imagens/pasta.gif', 'Pasta', true);
          rascunhos.AddItem('pasta4', 'Pasta 4', '5', 'Imagens/pasta.gif', 'Pasta', true);

          oMenuTreeView.Create();
      }

      function oMenuTreeView_SelectedIndex() {
          document.getElementById('clickLabel').innerHTML = oMenuTreeView.LastSelectedItem.Text;
      }
  </script>
</head>
<body onload="document_OnLoad();" >
    <div id="recipientDIV" style="height:200px;width:150px" class="borda">
    </div>
    <label id="clickLabel"></label>
</body>
</html>
Exemplo Completo

Figura 3. Exemplo Completo

Até o próximo artigo.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?