Question

我有一个看起来像这样的表：

+------------+---------+-----+
|System      |Title    |Genre|
+------------+---------+-----+
|PC          | A       | RPG |
|PC          | B       | FPS |
|Console     | C       | RPG |
|Console     | D       | RPG |
|Console     | E       | FPS |
+------------+---------+-----+

每个标题属于一个系统，但每个类型可能属于许多标题。

我的目标是有三个HTML选择元素，每个元素都填充了上表中的不同元素，但前面加上了ALL选项。当从任何选择列表中选择一个选项时，只应看到其他选择元素中的那些有效选项。

例如，如果选择了“系统PC”选项，则只应显示值为A和B的“标题”元素。如果选择了Genre FPS，则应显示所有系统选项，但只能看到标题选项B和E.希望ALL选项行为应该是显而易见的。

我的控制器操作如下所示：

def filter() {
  def attributes = Publication.createCriteria().list {
    projections {
      groupProperty 'system'
      groupProperty 'title'
      groupProperty 'genre'
    }
    cache(true)
  }

  [ attributes: attributes ]
}

这将显示在以下视图中：

<div id="container">
    <form>
        <div>
            <label for="filterSystem">System</label>
            <select id="filterSystem">
                <option value="ALL">ALL</option>
                <g:each in="${attributes.collect { it[0] }.unique().sort()}">
                    <option value="${it}">${it}</option>
                </g:each>
            </select>
        </div>

        <div>
            <label for="filterTitle">Title</label>
            <select id="filterTitle">
                <option value="ALL">ALL</option>
                <g:each in="${attributes.collect { it[1] }.unique().sort()}">
                    <option value="${it}">${it}</option>
                </g:each>
            </select>
        </div>

        <div>
            <label for="filterGenre">Genre</label>
            <select id="filterGenre">
                <option value="ALL">ALL</option>
                <g:each in="${attributes.collect { it[2] }.unique().sort()}">
                    <option value="${it}">${it}</option>
                </g:each>
            </select>
        </div>
    </form>
</div>

我认为我需要做一些客户端脚本来动态更新选项值，但我不确定如何弥合Grails模型与其他所有内容之间的差距。

A potential answer to my problem exists here，但条件略有不同。在那里，所有记录都可以在表格中找到，而我已经汇总了我的结果以获得不同的组合。不过，我想我仍然可以使用该问题的一些基本思路。我的第一个想法是将Grails Domain对象转换为JSON对象，无论是在响应中还是之后在脚本中。从那里我可以根据选择的内容过滤掉选项值。

跨多个选择元素动态过滤条件

0 个答案: