我正在使用javascript中的metawidget
我的Json对象包含一个数组:
{"db_host" : ["1054.iil", "070.iil", "1031.iil"]}
使用metawidget
显示时,readonly
没有选项可以编辑/添加/删除。是否有可能改变它?
答案 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'
} ]
};