在metawidget中编辑一个数组

时间:2013-07-24 12:42:17

标签: javascript json metawidget

我正在使用javascript中的metawidget 我的Json对象包含一个数组:
{"db_host" : ["1054.iil", "070.iil", "1031.iil"]}

使用metawidget显示时,readonly没有选项可以编辑/添加/删除。是否有可能改变它?

2 个答案:

答案 0 :(得分:2)

答案 1 :(得分:0)

操纵阵列充满了关于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'
    } ]
};