modifier un tableau dans metawidget

Question

J'utilise metawidget de javascript.
objet Mon JSON contient un tableau:
{"db_host" : ["1054.iil", "070.iil", "1031.iil"]}

Lors de l'affichage avec metawidget il est readonly sans option pour modifier/ajouter/supprimer. Est-il possible de changer cela?

Answer 1

Oui. J'ai blogué quelques exemples complets ici: http://blog.kennardconsulting.com/2013/07/json-ui-generator-array-support.html

Answer 2

La manipulation de matrices est lourde de choix personnels sur la conception de l'interface utilisateur. Par exemple: la suppression est-elle effectuée par un menu contextuel? Ou une icône de suppression à la fin de chaque ligne? Ou au début de chaque rangée? Est-ce que l'addition est faite en utilisant une rangée vide à la fin de la table, ou en tant que ligne de bas de page? Etc etc.

Pour cette raison, Metawidget prêt à l'emploi ne va pas si loin. Vous devriez le voir rendre le tableau en tant que table? Ceci est fait par metawidget.widgetbuilder.HtmlWidgetBuilder.

Pour les cas d'utilisation personnalisés, vous pouvez créer votre propre WidgetBuilder et l'enchaîner avec les originaux en utilisant CompositeWidgetBuilder. Ensuite, votre propre WidgetBuilder peut gérer des cas spéciaux (comme les tableaux) et «retomber» dans les WidgetBuilders d'origine pour tout le reste.

En tant que raccourci, le HtmlWidgetBuilder existant possède également des méthodes que vous pouvez remplacer comme 'createTable' et 'addColumn'. Donc, à peu près, quelque chose comme le dessous. Cela supprimera une ligne lorsque vous cliquerez dessus.

var _myWidgetBuilder = new metawidget.widgetbuilder.HtmlWidgetBuilder(); 
var _superAddColumn = _myWidgetBuilder.addColumn; 
_myWidgetBuilder.addColumn = function(tr, value, attributes, mw) { 

    var td = _superAddColumn(tr, value, attributes, mw); 

    // Warp column contents with an anchor 

    var anchor = document.createElement('a'); 
    anchor.setAttribute('href', '#'); 
    anchor.setAttribute('onclick', 'this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'); 
anchor.innerHTML = td.innerHTML; 
    td.innerHTML = ''; 
    td.appendChild(anchor); 
}; 
var mw = new metawidget.Metawidget(document.getElementById('metawidget'), { 
    widgetBuilder: _myWidgetBuilder 
}); 
mw.toInspect = { 
    firstname: 'Homer', 
    surname: 'Simpson', 
    age: 36, 
    family: [ { 
     firstname: 'Marge', 
     surname: 'Simpson' 
    }, { 
     firstname: 'Bart', 
     surname: 'Simpson' 
    } ] 
};