6

Background

Miller Columns describe a user interface design for browsing and editing hierarchical lists. Some notable implementations include:

Problem

There are a number of problems with these implementations.

Frédéric Hardy

Demo and code. This is nearly perfect, the main issue is that the hierarchy cannot be set up in advance. Ideally, the JSON code would resemble:

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

Where the second item ('ID2') refers to its parent ID ('ID1'). Unfortunately, the 'parent' parameter takes a boolean to indicate whether or not a parent exists. This means that using the library requires registering events and implementing the hierarchy data as separate files (requests), as far as I can tell.

Christian Yates

Demo and code. Seems to have some severe bugs (e.g., clicking on a category without children causes a child element to appear in the next column). No hooks for create/update/delete operations.

Jonathan Fine

Demo and code. The issues abound: awkward user interface (keyboard navigation using input field focus), not structured in a multi-column layout, large number of JS library files to include, no hooks for create/update/delete operations.

Additional Implementations

Other implementations that are encumbered with problems:

Question

What JavaScript library meets the following criteria:

  • reads a complete JSON document in hierarchical form (XML or HTML are suitable, too);
  • creates a user interface with dynamic columns;
  • fully and accurately documented (in terms of API and CSS);
  • has a "back" button or horizontal scrollbar to handle any number of columns;
  • offers events for create/update/delete operations;
  • can have its UI updated by changing a CSS template;
  • works in all major browsers (IE10+),
  • optionally, has a search feature (with or without regular expressions); and
  • is free, open-source software?

Vanilla JS, jQuery, MooTools, or Closure are fine.

4

After an extensive search, no suitably simple Miller Columns software could be found. Here is my implementation that provides the desired functionality:

The editing operations are equally trivial:

$(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" );
      }
    );
  });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.