Question

我正在使用javascript中的metawidget 我的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

操纵阵列充满了关于UI设计的个人选择。例如：是否通过右键单击菜单进行删除？或者每行末尾的删除图标？还是在每一行的开头？是使用表格末尾的空白行还是作为页脚行添加？等等。

因此，开箱即用的Metawidget只能走到这一步。您应该看到它将数组渲染为表格吗？这是由metawidget.widgetbuilder.HtmlWidgetBuilder完成的。

对于自定义用例，您可以使用CompositeWidgetBuilder创建自己的WidgetBuilder并将其与原始WidgetBuilder链接在一起。然后你自己的WidgetBuilder可以处理特殊情况（比如数组），然后“回退”到原始的WidgetBuilders以获取其他所有内容。

作为一种快捷方式，现有的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'
    } ]
};

在metawidget中编辑一个数组

2 个答案: