javascript - メタウィジェットで配列を編集する

Question

JavaScriptのメタウィジェットを使用しています。
私のJsonオブジェクトには配列が含まれています：
{"db_host" : ["1054.iil", "070.iil", "1031.iil"]}

それを表示する場合、編集/追加/削除するオプションmetawidgetはありません。readonlyそれを変更することは可能ですか？

Answer 1

配列の操作には、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'
    } ]
};