xw-browse: Grid-Control für XML-Daten (Javascript)

Die xw-browse dient der performanten tabellarischen Darstellung von Daten im XML-Format; sie verfügt über ein spezielles API  und benötigt aus diesem Grund zur Initialisierung ein kleines "Hilfs"-Plugin. Zur Laufzeit werden die Bibliotheken  jQuery  und  jQuery UI  vorausgesetzt. jquery UI-Themes werden im Header und Footer unterstützt, das Aussehen kann weitgehend über CSS gesteuert werden.

Wird xw-browse so initialisiert, dass die Browse und deren Spalten nicht in der Größe verändert und die Spalten nicht verschoben werden können, kann auf jQuery UI verzichtet werden.

Demo 1: Standardfunktionen

Einträge verdoppeln

<link href="/css/xw-browse.css" rel="stylesheet"/>
<link href="/css/demo-courses.css" rel="stylesheet"/>
<script src="/js/xw-browse-bundle-1.min.js" ></script>

<div id="demoxwbrowse" class="demo-courses"></div>
<p>
  <button class="demobrowsedouble" >Einträge verdoppeln</button>
</p>

var xw = jQuery.fn.xwalk,
    demo_xwbrowse = $("#demoxwbrowse"),
    data = $($.parseXML('<pagexmldata>...</pagexmldata>'));

// format bools as symbols (defined by css-class "xw-bool-true")
xw.formatBool = function (v, opt, row, parent) {
    if (v == "true") { 
        $('<span class="xw-bool-true"></span>').appendTo(parent); 
        return null;
    }
    return "";
};

// initialize the browse
demo_xwbrowse.xwctrl({
    ctrlType: "browse",
    rows: data.find(">pagexmldata>demoBrowseCourses>course"),
    meta: data.find(">pagexmldata>demoBrowseCourses>xwmeta"),
    selectFirstRow: false,
    formatter: xw.format
});

// handle button click-event
$(".demobrowsedouble").click(function () {
    var browseApi = demo_xwbrowse.xwctrl(), 
        newRows = browseApi.cloneRows(),
        ofs = newRows.length + 1;
    
    // set unique primary key values at element "pk"
    newRows.each(function (i) { $(this).find("pk").text(i+ofs) });
    browseApi.insertRows(newRows);
}); 

.xw-browse .xw-bool-true:after {
    font-family: FontAwesome;
    content: "\f00c";
    color: #0a0;
}
.demo-courses { font-size:14px }
.demo-courses .pk { width:60px }
.demo-courses .name { width:250px }
.demo-courses .startdate { width:82px }
.demo-courses .fee
{
    text-align:right;
    width:70px;
}
.demo-courses .buchbar, .demo-courses .ab18 {
    text-align:center;
    width:70px;
} 
.demo-courses .ab18 .xw-bool-true:after {
    content: "\f12a";
    color: #e33;
} 

Demo 2: Browse mit Buttons

<link href="/css/xw-browse.css" rel="stylesheet"/>
<link href="/css/demo-courses.css" rel="stylesheet"/>
<script src="/js/xw-browse-bundle-1.min.js" ></script>

<div class="buttonbrowse buttons-right" id="demobuttonbrowse">
    <div class="browse demo-courses" />
    <div class="buttons">
        <button id="dbb_show" class="sel1" title="Anzeigen">
            <span class="fa fa-eye" />
        </button>
        <button id="dbb_add" title="Hinzufügen">
            <span class="fa fa-plus" />
        </button>
        <button id="dbb_del" class="sel1n button-sep-big" title="Löschen">
            <span class="fa fa-trash" />
        </button>
    </div>
</div> 

var xw = jQuery.fn.xwalk,
    demo_buttonbrowse = $("#demobuttonbrowse"),
    brws = demo_buttonbrowse.find(">.browse"),
    data = $($.parseXML('<pagexmldata>...</pagexmldata>'));

// format bools as symbols (defined by css-class "xw-bool-true")
xw.formatBool = function (v, opt, row, parent) {
    if (v == "true") { 
        $('<span class="xw-bool-true"></span>').appendTo(parent); 
        return null;
    }
    return "";
};

// make buttons jquery UI - buttons
demo_buttonbrowse.find(">.buttons>button").button();

// init browse
brws.xwctrl({
    ctrlType: "browse",
    rows: data.find(">pagexmldata>demoBrowseCourses>course"),
    meta: data.find(">pagexmldata>demoBrowseCourses>xwmeta"),
    connectButtons: true,
    selectFirstRow: false,
    formatter: xw.format
});

// button-click-events
$("#dbb_show").click(function () {
    alert(brws.xwctrl().selElements().find("name").text());
});

$("#dbb_add").click(function () {
    var browseApi = brws.xwctrl(),
        newRows = browseApi.cloneRows(), ofs = 0;
    if (newRows.length == 0) {
      newRows = data.find(">pagexmldata>demoBrowseCourses>course").clone();
    } 
    else {
      // set unique pk-values
      newRows.each(function () { 
        var pk = parseInt($(this).find("pk").text()); 
        if (pk > ofs) ofs = pk;
      });
      newRows.each(function (i) { $(this).find("pk").text(i + ofs + 1) });
    }
    browseApi.insertRows(newRows);
});

$("#dbb_del").click(function () { brws.xwctrl().deleteSelected() }); 

<link href="/css/xw-browse.css" rel="stylesheet"/>
<script src="/js/xw-browse-bundle.min.js" ></script>

<div class="buttonbrowse buttons-top" id="demobuttonbrowse">
    <div class="buttons">
        <button id="dbb_show" class="sel1" title="Anzeigen">
            <span class="fa fa-eye" />
        </button>
        <button id="dbb_add" title="Hinzufügen">
            <span class="fa fa-plus" />
        </button>
        <button id="dbb_del" class="sel1n button-sep-big" title="Löschen">
            <span class="fa fa-trash" />
        </button>
    </div>
    <div class="browse demo-courses" />
</div> 

CSS und XML ist identisch mit Demo 1.

Buttons können rechts oder oben platziert werden. Die CSS-Klassen "sel1" und "sel1n" steuern die Anklickbarkeit (enabled-Status) der Buttons in Abhängigkeit von der Selektion:

Klasse "sel1": Nur aktiv, wenn genau eine Zeile selektiert ist.
Klasse "sel1n": Nur aktiv, wenn mindestens eine Zeile selektiert ist.

Features und Einschränkungen

• Direkte Übergabe der XML-Daten zur Spaltendefinition und zum Befüllen der Browse
• Sortierbar nach Spalten (ein- oder zweistufig, für Letzteres kann durch Klick auf den ersten Sortierpfeil die Spalte für die Sortierung fixiert werden).
• Datentypen für Spalten sichern die korrekte Sortierung und Formatierung. Durch Übergabe einer Formatierungsfunktion können Zelleninhalte nahezu beliebig gestaltet werden.
• Optional: Spaltenreihenfolge kann per Drag and Drop geändert werden, Spalten oder die gesamte Browse können größenveränderlich gestaltet werden.
• Vollständige Kontrolle über die Darstellung per CSS (Header und Footer können per jQuery UI-Themes beeinflusst werden). Auch Spaltenbreiten werden per CSS definiert.
• Navigation und Markieren auch weitgehend mit Tastatur möglich (Cursortasten und Navigationstasten, auch mit Strg und Shift, Strg-A, etc.).
• (jQuery UI-) Buttons können verbunden werden, um ihre Aktivität (Anklickbarkeit) vom Selektionsstatus abhängig zu machen (je nach CSS-Klasse am Button: immer aktiv, nur bei genau einer selektierten Zeile aktiv oder dann aktiv, wenn mindestens eine Zeile selektiert ist; der Aktivitätsstatus kann auch völlig frei pro Button programmiert werden, indem ihm eine Funktion mitgegeben wird, die aufgrund des Inhalts der selektierten Zeile(n) über die Anklickbarkeit entscheiden kann; der erste Button ist der "Standard-Button", der – sofern aktiv – ausgelöst wird, wenn in der Browse die return-Taste gedrückt oder eine Zeile doppelgeklickt wird).
• xw-browse ist schnell, da nur der jeweils sichtbare Teil der XML-Daten tatsächlich aufbereitet wird ("virtual scrolling"). Allerdings nimmt die Geschwindigkeit – insbesondere bei aktiver Sortierung – bei sehr großen Datenmengen ab.
• xw-browse unterstützt ein minimalistisches Konzept von Business Entities: werden der xw-browse bei der Initialisierung ein Datentyp (z.B. "kunde") mitgegeben und eine oder mehrere Spalten in den Metainformationen als "key" definiert, werden unsere XML-Events "entities-deleted" und "entity-updated" für enthaltene passende Datensätze ausgewertet (die xw-browse löscht selbständig Zeilen oder aktualisiert deren Inhalt).
• Einschränkung: Die Zeilenhöhe kann zwar über CSS festgelegt werden, jedoch müssen alle Zeilen dieselbe Höhe aufweisen.
• Ein Editieren der Zelleninhalte ist nicht möglich, die xw-browse ist ein read-only Grid-Control.

Eine Testversion können Sie im geschützten Bereich unserer Website im Bereich "Medien" (ausschließlich für Testzwecke!) downloaden.