#тут намешан perl, js, html ...
#не нравится? проходи мимо.
sub make_tree {
    my $self = shift;
    my ( $attr, $id ) = @_;
    my $result = '';
    #тут определяем как будет работать наше дерево, задаем параметры
    #которые потом передадим в JS
    my %all;
    $all{core}{themes} = ( { variant => 'medium', responsive => 'true' } )
      if !$attr->{core}->{themes};
    $all{plugins} = ( $attr->{plugins} ) ? $attr->{plugins} : 'search';
    $all{search} =
      ( $attr->{search} )
      ? $attr->{search}
      : ( { case_insensitive => 'true', show_only_matches => 'false' } );
    #здесь цепляем хеш с подготовленными ранее данными
    %all = ( %all, %$attr );
    #перекодируем в JSON
    my $DATA = JSON->new->indent->encode( \%all );
    #немного подчишаем, возможно есть другой способ
    #получить на выходе из json логические операторы без кавычек
    $DATA =~ s/"false"/false/g;
    $DATA =~ s/"true"/true/g;
    $DATA =~ s/"\*|\*"/ /g;
    $DATA =~ s/"/'/g;
    #подключаем стили и библиотеку(хотя никто не мешает
    #поключить в любом другом месте) и готовим DIV для нашего дерева
    $result .= qq{
    <link rel='stylesheet' href='/styles/lte_adm/plugins/jstree/themes/default/style.min.css' />
    <script type='text/javascript' src='/styles/lte_adm/plugins/jstree/jstree.min.js'></script>
    <div id='MY_TREE' align='left'></div>
  };
    #заливаем наши данные в js
    $result .= qq(
    <script>
      jQuery('#MY_TREE').jstree($DATA);
      </script>
   );
    #уфф, всё, рисуем дерево
    return $result;
}

#в хеше %lang у меня локализация
sub nms_show {
    my ($attr) = @_;
    $snmpparms{UseSprintValue} = 1;
    #я рисую через готовый API, тут уж кто во что
    my $table = $html->table(
        {
            ID      => 'SNMP_SHOW',
            caption => $label,
        }
    );
    #Набиваем информационный блок по-максимуму, мало ли что в будущем пригодится
    $table->addrow( $html->b('objectID'),
        $SNMP::MIB{ $attr->{OID} }{objectID} );
    $table->addrow( $html->b( $lang{TYPE} ), $SNMP::MIB{ $attr->{OID} }{type} )
      if $SNMP::MIB{ $attr->{OID} }{type};
    $table->addrow( $html->b('Module'), $SNMP::MIB{ $attr->{OID} }{moduleID} );
    $table->addrow( $html->b('Varbinds'),
        "@{$SNMP::MIB{ $attr->{OID} }{varbinds}}" ) if $SNMP::MIB{ $attr->{OID} }{varbinds};;
    $table->addrow( $html->b( $lang{ACCESS} ),
        $SNMP::MIB{ $attr->{OID} }{access} );
    $table->addrow( $html->b('Syntax'), $SNMP::MIB{ $attr->{OID} }{syntax} )
      if $SNMP::MIB{ $attr->{OID} }{syntax};
    $table->addrow(
        $html->b( $lang{RANGE} ),
"$SNMP::MIB{$attr->{OID}}{ranges}[0]{low} .. $SNMP::MIB{$attr->{OID}}{ranges}[0]{high}"
    ) if $SNMP::MIB{ $attr->{OID} }{ranges}[0];
    $table->addrow( $html->b( $lang{DESCRIBE} ),
        $SNMP::MIB{ $attr->{OID} }{description} )
      if $SNMP::MIB{ $attr->{OID} }{description};
    $table->addrow( $html->b('Reference'),
        $SNMP::MIB{ $attr->{OID} }{reference} )
      if $SNMP::MIB{ $attr->{OID} }{reference};
    $table->addrow( $html->b('Index(es)'),
        "@{$SNMP::MIB{$attr->{OID}}{indexes}}" )
      if $SNMP::MIB{ $attr->{OID} }{indexes}[0];
    $table->addrow( $html->b('Value List'),
        oid_enums( $attr->{OID}, { STR => 1 } ) )
      if keys %{ $SNMP::MIB{ $attr->{OID} }{enums} };
    return $table->show();
}
#тут разворачиваем идентификаторы имеющие enums
sub oid_enums {
    my ( $oid, $attr ) = @_;
    my %enums;
    my $str = '';
    foreach my $el ( keys %{ $SNMP::MIB{$oid}{enums} } ) {
        $enums{ $SNMP::MIB{$oid}{enums}{$el} } = $el;
    }
    if ($attr) {
        foreach my $key ( sort { $a <=> $b } keys %enums ) {
            $str .= "$key = $enums{$key} </br>";
        }
        return $str;
    }
    return %enums;
}

#Привожу пример только для snmpget
sub mibs_browser {
    my ($attr) = @_;
    if ( $FORM{OID} ) {
        #Обновляем информацию о идентификаторе
        print nms_show( { OID => $FORM{OID} } } );
        if ( $FORM{GET} ) {
            $snmpparms{UseSprintValue} = 1;
            #Будем считать, что в этом месте нам уже известен IP оборудования
            #и мы его получаем в хеше $obj
            my $sess = SNMP::Session->new( DestHost => $obj->{ip}, %snmpparms );
            my $iid = $attr->{IID} || 0;
            my $result = $sess->get( [ $FORM{OID}, $iid ] );
            #Проверяем на ошибки
            if ( $sess->{ErrorNum} ) {
                    return $html->message( 'err', $lang{ERROR}, $sess->{ErrorStr} );
            }
            my $result_tbl = $html->table( {} );
            $result_tbl->addrow( $html->b( $lang{RESULT} ), $result );
            print $result_tbl->show();
            return 1;
        }
        elsif ( ... ) {
                #ну и дальше обработчики различных событий
        }
        #выходим
        return 1
    }
    #создаем блок куда будут отрисовываться 2-й и 3-й блоки
    my $res = $html->element('div', '', { id => 'RESULT'});
    #Рисуем наше дерево
    my $tree = $html->element( 'div', mibs_tree());
    #Ну и сваливаем все это в один блок
    print $html->element( 'div', $tree . $res, { class => 'row' } );
    return 1;
}

//$ID в данном случае уникальный идентификатор,
//благодаря которому мы сможем узнать IP уст-ва
function renewLeftBox(itemName,Action,id,iid){
      iid = iid ? iid : 0 ;
      var url = 'index.cgi?OID=' + itemName + '&IID=' + iid + '&' + Action + '=$ID';
      jQuery('#RESULT').load(url);
    };
jQuery('#MY_TREE').on("changed.jstree", function (e, data) {
  renewLeftBox(data.instance.get_node(data.selected[0]).id,'SHOW', '$ID')
});

//Пример мне кажется достаточно простой
//по подобию можно создавать свои менюшки
function customMenu(node) {
          var items = {};
  //Здесь и далее, я проверяю тип ноды, ну и в зависимости от этого
  //возвращаю нужное контекстное меню
          if (node.type === 'scalar') {
            items.Get =  {
                  label: 'Get',
                  icon : 'fa fa-angle-down',
                  action: function () {
                    renewLeftBox(node.id,'GET');
                  }
            }
          }
          if (node.type === 'row' || node.type === 'table' || node.type === 'indexes') {
            items.Walk = {
                  label: 'Walk',
                  icon : 'fa fa-angle-double-down',
                  action: function () {
                    renewLeftBox(node.id,'WALK');
                  }
            }
          }
          if (node.type === 'table') {
            items.Table = {
                  label: 'Table',
                  icon : 'fa fa-table',
                  action: function () {
                    renewLeftBox(node.id,'TABLE');
                  }
            }
          }
          return items;
      }