Dave Jarvis
2014-11-21 15:20:35 UTC
背景
米勒列描述了用戶界面設計,用於瀏覽和編輯層次結構列表。一些值得注意的實現包括:
問題
這些實現存在很多問題。
FrédéricHardy
演示和代碼。這幾乎是完美的,主要問題是無法預先設置層次結構。理想情況下,JSON代碼類似於:
{'id':'ID1','name':'Name2','parent':false},{'id':'ID2' ,'name':'Name2','parent':'ID1'},
第二項('ID2')引用其父ID('ID1')。不幸的是,'parent'
參數使用一個布爾值來指示是否存在父級。據我所知,這意味著使用該庫需要註冊事件並將層次結構數據實現為單獨的文件(請求)。
Christian Yates
Demo和代碼。似乎有一些嚴重的錯誤(例如,單擊沒有孩子的類別會導致孩子元素出現在下一列中)。沒有鉤子可用於創建/更新/刪除操作。
Jonathan Fine
演示和代碼。問題不勝枚舉:笨拙的用戶界面(使用輸入字段焦點進行鍵盤導航),未在多列佈局中進行結構化,包含大量JS庫文件,沒有用於創建/更新/刪除操作的鉤子。 >其他實現
遇到問題的其他實現:
- Christian Heilmann寫了關於複雜動態列表的文章,在其演示中使用HTML標記。
- Buwei Chiu開發了 hColumns,並帶有演示看起來幾乎滿足所有條件。
- Martin Wendt編寫了 fancy tree jQuery插件,該插件具有可換膚的 columnview擴展名,它使用嵌套數據,但僅支持三列。
- Carsten Griesheimer為Polymer Web框架編寫了 column-view-component; 演示的源代碼相當接近。
- SmartGWT框架具有米勒列 a
- GWT框架具有 Cell Browser。
- Vaadin框架(基於GWT?)具有米勒專欄,但是其插件演示中存在問題。
問題
哪種JavaScript庫符合以下條件:
- 以分層形式(也適用XML或HTML)讀取完整的JSON文檔;
- 創建帶有動態列的用戶界面;
- 完整準確地記錄下來(根據API和CSS);
- 具有“後退”按鈕或水平滾動條,可處理任意數量的列;
- 為創建/更新/刪除操作提供事件;
- 可以通過更改CSS模板來更新其UI;
- 可在所有主流瀏覽器(IE10 + )
- (可選)具有搜索功能(帶有或不帶有正則表達式);和
- 是免費的開源軟件嗎?
Vanilla JS,jQuery,MooTools或Closure都可以。