所以我有能力从一个视图中的数据库中列出所有用户,但我想按字母顺序和标签列出它们。例如,我会有"所有"、"a"、"B"、"C"等选项卡。我希望发生的是,当用户单击"A"选项卡时,它只显示姓氏以"A"开头的用户。
我的想法是这样的:
<ul class="tabs">
<li><a href="#A">A</a></li>
<li><a href="#B">B</a></li>
<li><a href="#C">C</a></li>
...
</ul>
<div class="tabcontents">
<div id="All">
<nav>
<ul>
<g:each var="user" in="${users}" ID="">
<li><g:link controller="user" action="profile" id="${user.employeeNumber}">${user.lastName}, ${user.firstName}</g:link></li>
</g:each>
</ul>
</nav>
</div>
<div id="A">
<nav>
<ul>
<g:each var="user" in="${users}" ID="A">
<li><g:link controller="user" action="profile" id="${user.employeeNumber}">${user.lastName}, ${user.firstName}</g:link></li>
</g:each>
</ul>
</nav>
</div>
...
</div>
与后端UserController包含类似
的内容class UserController {
def index() {
def users = UserFeed.createCriteria().list {
eq('lastName[0]', '${ID}')
}
render(view: 'index', model: [users: users])
}
def search() {
}
def results(String lastName) {
def users = UserFeed.where {
lastName =~ "%${lastName}%"
}.list()
return [ users: users,
term: params.lastName,
totalUsers: UserFeed.count() ]
}
def profile(String id) {
def user = UserFeed.findByEmployeeNumber(id)
render(view: 'profile', model: [user: user])
}
}
所以这个想法是,当用户单击选项卡时,选项卡的字母被发送到控制器,在控制器中比较数据库中姓氏的第一个字母,如果匹配则添加到列表中。这可能吗?有什么巧妙的方法吗?
提前感谢!
编辑:我可以使用蛮力,我只是想避免每个字母都有26组用户。
编辑2:我试过这样做,但是没有用<div id="A">
<nav>
<ul>
<g:each var="user" in="${users}">
<g:if test="${user.lastName.charAt(0)} == 'A'">
<li style="padding-left:5px;"><g:link controller="user" action="profile" id="${user.employeeNumber}">${user.lastName}, ${user.firstName}</g:link></li>
</g:if>
</g:each>
</ul>
</nav>
</div>
我已经验证了user.lastName.charAt(0)打印出正确的字母,但是出于某种原因,g:if
语句没有将列表限制为只有A。知道为什么吗?
我认为一个很容易渲染成选项卡的模型是一个很好的开始。例如,控制器方法可以返回一个模型,该模型包含一个Map,其中包含用于键的字母和用于值的每个字母下的用户。
从用户列表和所选字母开始,下面是一个如何在Groovy中创建这样一个Map的示例:
def selectedLetter = 'A'
def tabs = users
.groupBy { it.lastName[0].toUpperCase() }
.collectEntries { k, v -> [k, v.sort() {a, b -> a.lastName <=> b.lastName}] }
.collectEntries { k, v -> k == selectedLetter ? [k, v] : [k, null] }
返回一个稀疏映射;通过将所有其他字母设置为空,只包括所选字母的用户。接下来,返回一个包含制表符的模型:
render(view: 'index', model: [tabs: tabs])
有了这样一个模型,选项卡就可以动态地呈现如下:
<ul class="tabs">
<g:each var="letter" in="${tabs.keySet().sort()}">
<li class="${tabs.letter != null ? 'active' : ''">
<a href="#${letter}">${letter}</a>
</li>
</g:each>
</ul>
选项卡的内容可以这样呈现:
<div class="tabcontents">
<g:each var="letter" in="${tabs.keySet().sort()}">
<div id="${letter}">
<nav>
<ul>
<g:each var="user" in="${tabs.letter}">
<li><g:link controller="user" action="profile" id="${user.employeeNumber}">${user.lastName}, ${user.firstName}</g:link></li>
</g:each>
</ul>
</nav>
</div>
</g:each>
</div>