Редактировать массив в мета-виджете

Question

Я использую мета-виджет из JavaScript.
Мой объект Json содержит массив:
{"db_host" : ["1054.iil", "070.iil", "1031.iil"]}

При отображении с metawidget это readonly без вариантов редактирования / добавления / удаления. Можно ли это изменить?

Answer 1

Да. Я опубликовал несколько полных примеров здесь: http://blog.kennardconsulting.com/2013/07/json-ui-generator-array-support.html

Answer 2

Управление массивами чревато личным выбором дизайна пользовательского интерфейса. Например: удаление выполняется с помощью меню, вызываемого правой кнопкой мыши? Или значок удаления в конце каждой строки? Или в начале каждого ряда? Производится ли добавление с использованием пустой строки в конце таблицы или строки нижнего колонтитула? И т. Д.

Из-за этого, из коробки Metawidget только идет так далеко. Вы должны увидеть, как он отображает массив в виде таблицы? Это делается с помощью metawidget.widgetbuilder.HtmlWidgetBuilder.

Для пользовательских сценариев использования вы можете создать свой собственный WidgetBuilder и связать его вместе с оригинальными, используя CompositeWidgetBuilder. Тогда ваш собственный WidgetBuilder может обрабатывать особые случаи (например, массивы) и "отступать" к оригинальному WidgetBuilder для всего остального.

В качестве ярлыка, в существующем HtmlWidgetBuilder также есть некоторые методы, которые вы можете переопределить, такие как 'createTable' и 'addColumn'. Итак, примерно, что-то вроде ниже. Он удалит строку, когда вы нажмете на нее.

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'
    } ]
};