Grails gsp 嵌套两个选择
Grails gsp nested two selects
我有以下对象
companies = [
{ id: 1, code: "cod1", employessList : [{id:1, name:"name1"}, {id:2, name:"name2"}, ...]},
{ id: 2, code: "cod2", employessList : [{id:4, name:"name1"}, {id:5, name:"name2"}, ...]},
{ id: 3, code: "cod3", employessList : [{id:11, name:"name1"}, {id:12, name:"name2"}, ...]},
...
]
我需要输入 gsp,两个 <g:select>
一个选择公司,另一个 select 嵌套的雇员。当我更改公司时,员工列表会更新。
例如,
<div>
<g:select id="companiesSelect" name="companies" from="${companies}"
class="form-control" optionKey="id"
optionValue="code" />
<div>
<div>
<!-- Div with nested elements -->
</div>
有人可以帮我解决这个问题吗?
这里有 4 个选项:
- 在服务器端呈现两个 select。
控制器操作:
def somePage() {
def companies = [...]
def employees = params.companyId ? companies.findResult{ it.id == params.companyId ? it.employessList : null } : []
[ companies:companies, employees:employees ]
}
普惠制:
<div>
<g:select id="companiesSelect" from="${companies}" onChange="refreshPage( this.value )" .../>
<div>
<div>
<g:select id="employeesSelect" from="${employees}" .../>
</div>
其中 refreshPage( this.value )
是 JS-function 将公司 ID 发送到控制器操作。
将公司+员工的完整列表作为 JSON 加载到页面中,将数据呈现为 selects,并使用 onChange-JS 侦听器进行刷新第二个 select.
使用Ajax调用将基于公司id的数据加载到员工select。
选项2和3需要大量的JS,这里就不post了
- 使用像 react 这样的现代 JS 框架来进行渲染,这样服务器就可以通过 REST 端点进行通信。
我有以下对象
companies = [
{ id: 1, code: "cod1", employessList : [{id:1, name:"name1"}, {id:2, name:"name2"}, ...]},
{ id: 2, code: "cod2", employessList : [{id:4, name:"name1"}, {id:5, name:"name2"}, ...]},
{ id: 3, code: "cod3", employessList : [{id:11, name:"name1"}, {id:12, name:"name2"}, ...]},
...
]
我需要输入 gsp,两个 <g:select>
一个选择公司,另一个 select 嵌套的雇员。当我更改公司时,员工列表会更新。
例如,
<div>
<g:select id="companiesSelect" name="companies" from="${companies}"
class="form-control" optionKey="id"
optionValue="code" />
<div>
<div>
<!-- Div with nested elements -->
</div>
有人可以帮我解决这个问题吗?
这里有 4 个选项:
- 在服务器端呈现两个 select。
控制器操作:
def somePage() {
def companies = [...]
def employees = params.companyId ? companies.findResult{ it.id == params.companyId ? it.employessList : null } : []
[ companies:companies, employees:employees ]
}
普惠制:
<div>
<g:select id="companiesSelect" from="${companies}" onChange="refreshPage( this.value )" .../>
<div>
<div>
<g:select id="employeesSelect" from="${employees}" .../>
</div>
其中 refreshPage( this.value )
是 JS-function 将公司 ID 发送到控制器操作。
将公司+员工的完整列表作为 JSON 加载到页面中,将数据呈现为 selects,并使用 onChange-JS 侦听器进行刷新第二个 select.
使用Ajax调用将基于公司id的数据加载到员工select。
选项2和3需要大量的JS,这里就不post了
- 使用像 react 这样的现代 JS 框架来进行渲染,这样服务器就可以通过 REST 端点进行通信。