javascript - 在 metawidget 中编辑数组

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 完成的。

对于自定义用例，您可以创建自己的 WidgetBuilder 并使用 CompositeWidgetBuilder 将其与原始的链接在一起。然后您自己的 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'
    } ]
};