表格查询的魔法：橄榄球阵容“引发”的表格探索之旅

最新推荐文章于 2021-06-26 16:53:27 发布

「已注销」

最新推荐文章于 2021-06-26 16:53:27 发布

阅读量222

点赞数

文章标签： html 数据可视化 css 搜索引擎 qml

本文链接：https://blog.csdn.net/duxinshuxiaobian/article/details/109476233

版权

全文共2793字，预计学习时长7分钟

图源：unsplash

当笔者在Flatiron School进行Mod2（游戏模组）项目时，冒出了写这个博客的想法。那时，笔者正和搭档奥斯汀·布勒（Austin Buhler）决定创建一个梦幻橄榄球阵容优化器。我们构建了一个庞大的NFL（美国国家橄榄球联盟）球员储备库，但很快就意识到这个表格需要根据多重属性进行排序和筛选，并查询其中的特定值。

可惜，笔者对此毫无头绪。于是，从那之后我就一头栽进了表格、HTML和Rails的世界中。

用HTML视图界面创建表格

首先，从定义NFL球员表开始。每个球员都带有姓名属性、比赛位置属性和总排行名次。

#views/players/index.html.erb<h1>PlayersList</h1><table>  <tr>    <th>Player Name</th>              <-- Each ofthese    <th>Position </th>                      is a column header    <th>Avg. Ranking </th>  </tr> <% @players.each do |player| %>  <tr>    <td><%=player.name%></td>        <-- Each of these adds    <td><%=player.position%></td><td>     data tothe corresponding    <td><%=player.avg_ranking%></td>      column in the samerow  </tr>  <% end %> </table>

这是HTML标签和Rails方法的结合：

· 用<table>标签定义一个HTML表格

· 表中每行都由一个<tr>标签定义

· 每个表格标题都由一个<th>标签定义

· 表中每个数据或单元格由一个<td>标签定义

· 包装器‘<%=’ and ‘%>’指示了Rudy代码

排序

现在，表格已经设置好了，需要增添一些功能使其排起序来更轻松。

首先，设置表头链接，在表头单元格中输入文字前，先添加link_to 。每个链接指向的页面就是当前所处页面，只是具有不同的查询字符串参数。为实现这一步，需要指定一个散列作为link_to的第二个参数。新代码如下所示：

<h1>Players List</h1><table>  <tr>    <th><%= link_to "PlayerName", :sort => "name"%> </th>    <th><%= link_to "Position",:sort => "position"%> </th>    <th><%= link_to "Avg.Ranking", :sort => "avg_ranking"%> </th>  </tr><% @players.each do |player| %>  <tr>    <td><%=player.name%></td>    <td><%=player.position%></td><td>    <td>  <%=player.avg_ranking %></td>  </tr>  <% end %>  </table>

下图为表格呈现效果：

还需要再添加一些CSS样式（层叠样式表）。现在，修改PlayersController（球员管理器）中的索引操作：

class PlayersController < ApplicationController  def index    @players = Player.order(params[:sort])  end

当单击某列时，它将通过索引绘制一个按相应列属性排序的新表格。如下所示：

注意URL的变化

这很不错，但由于平均排名创建为一种方法，并非一个列，也没有属性，若试图使用它进行排序，就会造成错误，需要使用条件逻辑来进行修复（笔者急需Mod2搭档奥斯汀的帮助）。

class PlayersController < ApplicationController  def index    if params[:sort] !="avg_ranking"      @players = Player.order(params[:sort])    elsif params[:sort] =="avg_ranking"      @players = Player.all.sort_by{|player| player.avg_ranking}    else      @players = Player.all    end  end

查询

最终，需要能在表中查询特定球员的姓名。

首先，使用下列代码在球员页面增加一个查询栏：

<%= form_tag(players_path, method: :get) do %>  <p> Search for a player</p>  <%= text_field_tag(:search,params[:search]) %>  <%= submit_tag ("Search")%><% end %>

现在，页面如图所示：

无论在查询栏中输入什么，都将设置为params（参数）散列中的:search（搜索）值（params[:search]）。现在，对Players Controller进行修改，以进一步更新索引操作。

class PlayersController < ApplicationController  def index    if params[:search]      search_players    if params[:sort] =="avg_ranking"      @players = Player.all.sort_by{|player|player.avg_ranking}          elsif params[:sort] !="avg_ranking"     @players = Player.order(params[:sort])    else      @players = Player.all    end  enddef search_players    if @player =Player.all.find{|player| player.name.include?(params[:search])}      redirect_to player_path(@player)    end  enddef show    @player =Player.find(params[:id])  endend

在球员表中查询姓名，能得到如下结果：