Рубрика «jstree»

Привет! Это мой первый пост, который рассчитан на новичков в веб-программировании. Требуются знания:

— Java;
— Знать как создавать сервлет;
— HTML;
— JavaScript;
— JQuery.

Задача такова:

— На основе данных БД построить дерево на веб-странице, все дерево сразу грузить было нельзя так, как слишком много данных.
Читать полностью »

Лет пять назад подсел на разработку сайтов, причем чисто из интереса к вебу. Хотелось осознать, как их делать и делать лучше, чем другие. Начиналось всё это, как и для большинства разработчиков, с простого познания HTML, CSS и, конечно, популярных CMS, таких как Joomla, WordPress и Data Life Engine. По мере роста приходилось углубляться в Javascript и, конечно, в мой любимый сейчас PHP. Но все шло не так быстро, как хотелось. Тренируясь на простом, хотелось понять сложные вещи. PHP поначалу плохо давался, но характер взял верх и все же через некоторое время написал что-то вроде похожее на мини-социальную сеть.

Ну а затем пошло-поехало: ООП, MVC и, наконец, пришло время покорять фреймворки. На тот момент самыми известными для меня были Zend, Kohana и CodeIgniter. Позже узнал о Symphony и YII. Выбор пал на Kohana, т.к. для новичка была проще в освоении и с нормальной документацией. Ну и недостатков в принципе для себя не видел в этом фреймворке.
Читать полностью »

* Надеюсь, ilusha_sergeevich не обвинит меня в плагиате.
Если что, пост переименую.

image
(Иллюстрация к donut.js)

Всем привет! За время работы постепенно накапливаются наработки, которыми можно было бы поделиться с сообществом. Но ни одна из этих наработок не тянет на большой полноценный пост. Поэтому я собрал все мелочи, что вспомнил, в одной статье: несколько простых опен-сорц проектов, пара советов и находок. Каждый из предложенных скриптов в этой статье поставляется как есть, под лицензией WTFPL (кроме Балалайки). С радостью приму пулл реквесты с исправлением багов или изменениями в README.

donut.js — микро-библиотека, рисующая бубликовые (donut) и круговые диаграммы

Во время работы над очередным проектом, появилась задача нарисовать много информативных бубликов на карте мира, и не просто нарисовать, а еще и поддержать ИЕ8, который, как известно, не умет SVG, а только безобразный VML. Первое, что приходит в голову, это Raphael. Порывшись некоторое время, я нашел это решение. К сожалению, автор проявил изобретательность простым хаком: на круговой диаграмме (pie chart) он нарисовал белый круг. Это решение не подошло, так как дырка бублика должна быть прозрачной. Изучение возможности рисования при помощи Raphael таких диаграмм мне показалось чересчур трудоёмким. Остальные скрипты на просторах интернета мне так же не подошли. Пришлось писать свой костыль, взяв за основу математику рисования арок этого проекта. Арки для VML версии нарисованы используя элемент arc.

var myDonutDiv = donut(options);

Читать полностью »

Здравствуйте. Я хочу рассказать о решении достаточно простой задачи, с которой я столкнулся и не сразу получил нужный результат. Необходимо реализовать дерево, источником данных для которого выступает таблица вида
Id Parent
1 Null
2 1
3 2
4 1Читать полностью »

Привет!

О плагине JsTree на хабре упоминалось лишь в далеком 2009 году. С тех времен все довольно сильно поменялось. Плагин активно развивается. Страница проекта на гитхабе.

Учитывая специфику проекта, над которым сейчас работаю(справочная система), этот плагин оказался просто незаменимым, и я использую 90% его функционала с превеликим удовольствием. И я до сих пор не видел такой же мощной альтернативы.

JsTree — деревья это так просто

Если вам нужно отрисовать в брауезере просто дерево, то, конечно можно использовать и другие плагины, или вовсе написать это самому и лаконично, но для более широкого функционала — JsTree — просто отличный вариант.

Что мы имеем?

  • Построение дерева на основе html разметки, json и xml формата
  • Drag & drop с тонкой настройкой возможности перемещения нодов по дереву
  • Динамическо добавление/удаление/изменение нодов
  • Возможность построения нескольких деревьев на одной странице и манипуляция нодами между этими деревьями
  • Возможность присвоения нодам произвольных типов (file, folder, drive, да какой угодно), и указать отдельное поведения для каждого
  • Поддержка тем оформления (на скрине в начале статьи пример того, как это реализовал я)
  • Управление с клавиатуры
  • Использование нативных и кастомных чекбоксов
  • AJAX подгрузка нодов, запоминание состояния дерева
  • Плагин красиво и читабельно написан, позволяет писать дополнительные плагины к нему и без проблем кастомизировать.
  • Удобная система байндингов для обработки событий
  • Мультиязычность
  • Управление анимацией раскрытия
  • Поиск по дереву
  • Кастомное контекстное меню
  • Поддержка браузеров: IE 6+, Firefox 2+, Safari 3+, Opera 9+, Chrome
  • Мини-фича, которая меня особенно порадовала — плагин wholerow — выделения нода во всю ширину. А-ля mac style

Читать полностью »