Клиентские столбцы Миллера на основе JavaScript

Фон

Столбцы Миллера описывают дизайн пользовательского интерфейса для просмотра и редактирования иерархических списков . Некоторые известные реализации включают:

Проблема

Есть ряд проблем с этими реализациями.

Фредерик Харди

Демо и код . Это почти идеально, главная проблема в том, что иерархию нельзя настроить заранее. В идеале код JSON будет выглядеть так:

{ 'id': 'ID1', 'name': 'Name2', 'parent': false },
{ 'id': 'ID2', 'name': 'Name2', 'parent': 'ID1' },

Где второй элемент («ID2») ссылается на свой родительский идентификатор («ID1»). К сожалению, 'parent'параметр принимает логическое значение, чтобы указать, существует ли родитель. Это означает, что использование библиотеки требует регистрации событий и реализации данных иерархии в виде отдельных файлов (запросов), насколько я могу судить.

Кристиан Йейтс

Демо и код . Кажется, есть некоторые серьезные ошибки (например, щелчок по категории без дочерних элементов приводит к появлению дочернего элемента в следующем столбце). Нет хуков для операций создания/обновления/удаления.

Джонатан Файн

Демо и код . Проблем предостаточно: неудобный пользовательский интерфейс (навигация с помощью клавиатуры с использованием фокуса поля ввода), отсутствие структуры в макете с несколькими столбцами, большое количество файлов библиотеки JS для включения, отсутствие перехватчиков для операций создания/обновления/удаления.

Дополнительные реализации

Другие реализации, которые обременены проблемами:

Вопрос

Какая библиотека JavaScript соответствует следующим критериям:

  • читает полный документ JSON в иерархической форме (подходят также XML или HTML);
  • создает пользовательский интерфейс с динамическими столбцами;
  • полностью и точно документировано (с точки зрения API и CSS);
  • имеет кнопку «назад» или горизонтальную полосу прокрутки для обработки любого количества столбцов;
  • предлагает события для операций создания/обновления/удаления;
  • может обновить свой пользовательский интерфейс, изменив шаблон CSS;
  • работает во всех основных браузерах (IE10+),
  • опционально имеет функцию поиска (с регулярными выражениями или без них); а также
  • бесплатное программное обеспечение с открытым исходным кодом?

Подойдет Vanilla JS, jQuery, MooTools или Closure.

Ответы (1)

После долгих поисков подходящей простой программы Miller Columns не нашлось. Вот мое программное обеспечение с указанной функциональностью:

Операции редактирования одинаково тривиальны:

$(document).ready( function() {
  $.getScript( "js/columns.js", function() {
    var $current;

    $("div.columns").millerColumns({
      current: function( $item ) {
        $current = $item;
      }
    });

    /** Called when an edit link is clicked. */
    update = function( link, def, undef ) {
      $(link).on( "click", function( event ) {
        event.preventDefault();

        ($current === undefined) ?
          typeof undef === "function" && undef() :
          typeof def === "function" && def();

        return false;
      });
    }

    update( "#new",
      function() {
        console.log( "new child of: " + $current );
      },
      function() {
        console.log( "new root sibling" );
      }
    );

    update( "#edit",
      function() {
        console.log( "edit" );
      }
    );

    update( "#del",
      function() {
        console.log( "delete" );
      }
    );
  });
});
Клиентские столбцы Миллера на основе JavaScript
СпросиСетьПолитика конфиденциальности1y, 0v