Miller-Spalten beschreiben ein Benutzeroberflächendesign zum Durchsuchen und Bearbeiten hierarchischer Listen . Einige bemerkenswerte Implementierungen umfassen:
Es gibt eine Reihe von Problemen mit diesen Implementierungen.
Demo und Code . Das ist nahezu perfekt, das Hauptproblem ist, dass die Hierarchie nicht im Voraus eingerichtet werden kann. Idealerweise würde der JSON-Code wie folgt aussehen:
{ 'id': 'ID1', 'name': 'Name2', 'parent': false },
{ 'id': 'ID2', 'name': 'Name2', 'parent': 'ID1' },
Wobei das zweite Element ('ID2') auf seine Eltern-ID ('ID1') verweist. Leider 'parent'nimmt der Parameter einen booleschen Wert an, um anzugeben, ob ein Elternteil existiert oder nicht. Dies bedeutet, dass die Verwendung der Bibliothek, soweit ich das beurteilen kann, die Registrierung von Ereignissen und die Implementierung der Hierarchiedaten als separate Dateien (Anforderungen) erfordert.
Demo und Code . Scheint einige schwerwiegende Fehler zu haben (z. B. bewirkt das Klicken auf eine Kategorie ohne untergeordnete Elemente, dass ein untergeordnetes Element in der nächsten Spalte erscheint). Keine Hooks für Erstellungs-/Aktualisierungs-/Löschvorgänge.
Demo und Code . Die Probleme sind zahlreich: umständliche Benutzeroberfläche (Tastaturnavigation mit Eingabefeldfokus), nicht in einem mehrspaltigen Layout strukturiert, große Anzahl von einzuschließenden JS-Bibliotheksdateien, keine Hooks für Erstellungs-/Aktualisierungs-/Löschvorgänge.
Andere Implementierungen, die mit Problemen behaftet sind:
Welche JavaScript-Bibliothek erfüllt die folgenden Kriterien:
Vanilla JS, jQuery, MooTools oder Closure sind in Ordnung.
Nach umfangreicher Suche tauchte keine entsprechend einfache Miller Columns-Software auf. Hier ist meine Software, die die angegebene Funktionalität hat:
Die Bearbeitungsoperationen sind ebenso 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" );
}
);
});
});