題:
客戶端基於JavaScript的Miller列
Dave Jarvis
2014-11-21 15:20:35 UTC
view on stackexchange narkive permalink

背景

米勒列描述了用戶界面設計,用於瀏覽和編輯層次結構列表。一些值得注意的實現包括:

問題

這些實現存在很多問題。

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庫文件,沒有用於創建/更新/刪除操作的鉤子。 >其他實現

遇到問題的其他實現:

問題

哪種JavaScript庫符合以下條件:

  • 以分層形式(也適用XML或HTML)讀取完整的JSON文檔;
  • 創建帶有動態列的用戶界面;
  • 完整準確地記錄下來(根據API和CSS);
  • 具有“後退”按鈕或水平滾動條,可處理任意數量的列;
  • 為創建/更新/刪除操作提供事件;
  • 可以通過更改CSS模板來更新其UI;
  • 可在所有主流瀏覽器(IE10 + )
  • (可選)具有搜索功能(帶有或不帶有正則表達式);和
  • 是免費的開源軟件嗎?

Vanilla JS,jQuery,MooTools或Closure都可以。

一 回答:
Dave Jarvis
2014-12-30 14:24:57 UTC
view on stackexchange narkive permalink

廣泛搜索之後,沒有出現合適的簡單Miller Columns軟件。這是我的具有指定功能的軟件:

編輯操作同樣簡單:

  $(document).ready(function(){$ .getScript(“ js / columns.js”,function(){var $ current; $(“ div.columns”)。millerColumns({current: function($ item){$ current = $ item;}}); / **在單擊編輯鏈接時調用* / update = function(link,def,undef){$(link).on(“ click” ,function(event){event.preventDefault();($ current === undefined)?typeof undef ===“ function” && undef():typeof def ===“ function” && def();返回false; });} update(“ #new”,function(){console.log(“新子代:” + $ current);},function(){console.log(“ new root sibling”);}); update(“ #edit”,function(){console.log(“ edit”);}); update(“ #del “,function(){console.log(” delete“); }); });});  


該問答將自動從英語翻譯而來。原始內容可在stackexchange上找到,我們感謝它分發的cc by-sa 3.0許可。
Loading...