JavaScriptのメタウィジェットを使用しています。
私のJsonオブジェクトには配列が含まれています:
{"db_host" : ["1054.iil", "070.iil", "1031.iil"]}
それを表示する場合、編集/追加/削除するオプションmetawidget
はありません。readonly
それを変更することは可能ですか?
JavaScriptのメタウィジェットを使用しています。
私のJsonオブジェクトには配列が含まれています:
{"db_host" : ["1054.iil", "070.iil", "1031.iil"]}
それを表示する場合、編集/追加/削除するオプションmetawidget
はありません。readonly
それを変更することは可能ですか?
配列の操作には、UI デザインに関する個人的な選択が伴います。例: 削除は右クリック メニューで行いますか? または、各行の最後にある削除アイコン? それとも、各行の開始時ですか? 表の最後に空白行を使用して追加しますか、それともフッター行として追加しますか? などなど
このため、すぐに使用できる Metawidget はこれまでのところしか機能しません。配列をテーブルとしてレンダリングするのが見えるはずですか? これは、metawidget.widgetbuilder.HtmlWidgetBuilder によって行われます。
カスタム ユース ケースでは、独自の WidgetBuilder を作成し、CompositeWidgetBuilder を使用して元の 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'
} ]
};