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