0

我正在为 HTML 和 javascript 中的某些浏览器应用程序制作 GUI。

目前，我面临着实现一个需要进行三级深度“级联选择”的页面的挑战。我只是想知道是否有我可以坚持的设计模式，以使我的代码更易于管理，因为这不是一个非常罕见的问题。

我需要实现的结构如下：

{ A => { B => [C, C, ...] }

我会大致使用以下 GUI 布局（使用Balsamiq制作）：

Balsamiq 的 GUI 模型

如您所见，问题是视图的某些部分一直被隐藏/删除，最重要的是，我需要在页面的生命周期内存储更改。它不像样机那么简单，因为我不只使用多选来处理所有事情......

您通常如何解决此类问题？

4

2 回答 2

1

这不会自动化很多事情，但似乎是Observer模式的问题。

基本上，您将有一个观察者观察第一个选择的动作，而不是另一个观察第二个选择的动作，依此类推......

当通知一个观察者时，它将采取行动，例如显示另一个选择。

这只是一个原始的想法，如果没有关于你正在尝试做什么的更多细节，很难给你一个更详细的建议。

于 2013-05-24T21:18:28.303 回答
1

只需将每个列表放入一个 json 容器中
，然后在该列表上放置一个点击侦听器，并将特定的 json 项添加到下一个列表中

//// PSEUDOCODE ////
var json{
  "a": {
    "a1": {
       "b1": "item",
       "b2": "item",
       "b4": "item"
    },
    "a2": {
     //stuff
    }
   },
   "b":{
     "b1": "items"
      //etc
   }
  }


select(){
 var item = clickedItem.id;
 case: a
   putintoB(json.item)
 case: b
   putintoC(json.item)
}
于 2013-05-23T12:49:28.587 回答