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