专为 Rails 设计的前端模块化框架

表格组件在基础表格样式的基础上提供了选择和展开交互。

普通表格

<%= tao_table do |t| %>
  <%= t.head do |head| %>
    <%= head.cell '姓名' %>
    <%= head.cell '工号' %>
    <%= head.cell '状态' %>
    <%= head.cell '入职日期' %>
    <%= head.cell '操作', class: 'align-right' %>
  <% end %>

  <%= t.body do |body| %>
    <%= body.row do |row| %>
      <%= row.cell '小徐' %>
      <%= row.cell '001' %>
      <%= row.cell '在职' %>
      <%= row.cell '2017-01-01' %>
      <%= row.cell class: 'align-right' do %>
        <%= link_to "编辑", '#' %>
        <%= link_to "删除", '#', class: 'warn' %>
      <% end %>
    <% end %>

    <%= body.row do |row| %>
      <%= row.cell '小董' %>
      <%= row.cell '002' %>
      <%= row.cell '在职' %>
      <%= row.cell '2017-01-01' %>
      <%= row.cell class: 'align-right' do %>
        <%= link_to "编辑", '#' %>
        <%= link_to "删除", '#', class: 'warn' %>
      <% end %>
    <% end %>
  <% end %>
<% end %>
姓名 工号 状态 入职日期 操作
小徐 001 在职 2017-01-01 编辑 删除
小董 002 在职 2017-01-01 编辑 删除

可展开、可选择的表格

<%= tao_table selectable: true, expandable: true do |t| %>
  <%= t.head do |head| %>
    <%= head.cell '姓名' %>
    <%= head.cell '工号' %>
    <%= head.cell '状态' %>
    <%= head.cell '入职日期' %>
    <%= head.cell '操作', class: 'align-right' %>
  <% end %>

  <%= t.body do |body| %>
    <%= body.row do |row| %>
      <%= row.content class: 'employee-1' do |content| %>
        <%= content.cell '小徐' %>
        <%= content.cell '001' %>
        <%= content.cell '在职' %>
        <%= content.cell '2017-01-01' %>
        <%= content.cell class: 'align-right' do %>
          <%= link_to "编辑", '#' %>
          <%= link_to "删除", '#', class: 'warn' %>
        <% end %>
      <% end %>

      <%= row.panel class: 'employee-details' do %>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie tempor ex, sit amet scelerisque lorem viverra et. Praesent id condimentum dui. Nam porta odio bibendum orci porta, eu euismod ipsum accumsan. Cras dignissim, urna a auctor scelerisque, eros ex tincidunt justo, condimentum blandit mi ante quis nulla. Vestibulum tortor enim, porta ut volutpat cursus, efficitur in justo. Fusce varius ante orci, eget malesuada sem rhoncus eget. Praesent sit amet leo odio. Duis quis leo sit amet arcu ultricies vehicula. Pellentesque magna nunc, finibus nec tincidunt nec, eleifend eget mauris. Cras nunc lorem, fermentum eu justo sit amet, placerat dapibus arcu. Donec vel nunc elit. Nam commodo turpis in sem feugiat, auctor dictum dolor pretium. In quis luctus arcu. Vestibulum placerat velit eget placerat porttitor. Aliquam commodo lorem eget urna sodales hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
      <% end %>
    <% end %>

    <%= body.row do |row| %>
      <%= row.content class: 'employee-2' do |content| %>
        <%= content.cell '小董' %>
        <%= content.cell '002' %>
        <%= content.cell '在职' %>
        <%= content.cell '2017-01-01' %>
        <%= content.cell class: 'align-right' do %>
          <%= link_to "编辑", '#' %>
          <%= link_to "删除", '#', class: 'warn' %>
        <% end %>
      <% end %>

      <%= row.panel class: 'employee-details' do %>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie tempor ex, sit amet scelerisque lorem viverra et. Praesent id condimentum dui. Nam porta odio bibendum orci porta, eu euismod ipsum accumsan. Cras dignissim, urna a auctor scelerisque, eros ex tincidunt justo, condimentum blandit mi ante quis nulla. Vestibulum tortor enim, porta ut volutpat cursus, efficitur in justo. Fusce varius ante orci, eget malesuada sem rhoncus eget. Praesent sit amet leo odio. Duis quis leo sit amet arcu ultricies vehicula. Pellentesque magna nunc, finibus nec tincidunt nec, eleifend eget mauris. Cras nunc lorem, fermentum eu justo sit amet, placerat dapibus arcu. Donec vel nunc elit. Nam commodo turpis in sem feugiat, auctor dictum dolor pretium. In quis luctus arcu. Vestibulum placerat velit eget placerat porttitor. Aliquam commodo lorem eget urna sodales hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
      <% end %>
    <% end %>

  <% end %>
<% end %>
姓名 工号 状态 入职日期 操作

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie tempor ex, sit amet scelerisque lorem viverra et. Praesent id condimentum dui. Nam porta odio bibendum orci porta, eu euismod ipsum accumsan. Cras dignissim, urna a auctor scelerisque, eros ex tincidunt justo, condimentum blandit mi ante quis nulla. Vestibulum tortor enim, porta ut volutpat cursus, efficitur in justo. Fusce varius ante orci, eget malesuada sem rhoncus eget. Praesent sit amet leo odio. Duis quis leo sit amet arcu ultricies vehicula. Pellentesque magna nunc, finibus nec tincidunt nec, eleifend eget mauris. Cras nunc lorem, fermentum eu justo sit amet, placerat dapibus arcu. Donec vel nunc elit. Nam commodo turpis in sem feugiat, auctor dictum dolor pretium. In quis luctus arcu. Vestibulum placerat velit eget placerat porttitor. Aliquam commodo lorem eget urna sodales hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie tempor ex, sit amet scelerisque lorem viverra et. Praesent id condimentum dui. Nam porta odio bibendum orci porta, eu euismod ipsum accumsan. Cras dignissim, urna a auctor scelerisque, eros ex tincidunt justo, condimentum blandit mi ante quis nulla. Vestibulum tortor enim, porta ut volutpat cursus, efficitur in justo. Fusce varius ante orci, eget malesuada sem rhoncus eget. Praesent sit amet leo odio. Duis quis leo sit amet arcu ultricies vehicula. Pellentesque magna nunc, finibus nec tincidunt nec, eleifend eget mauris. Cras nunc lorem, fermentum eu justo sit amet, placerat dapibus arcu. Donec vel nunc elit. Nam commodo turpis in sem feugiat, auctor dictum dolor pretium. In quis luctus arcu. Vestibulum placerat velit eget placerat porttitor. Aliquam commodo lorem eget urna sodales hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

在 SJR 模版中渲染一行

如果想在 SJR 模版中渲染某一行内容,然后添加到已有到表格中,可以使用 TaoUI 提供的 view helper 来生成 table body builder:

<% tbody = tao_table_body_builder expandable: true, selectable: true %>
$('.employee-table tbody').append('<%= j render @employee, locals: {tbody: tbody} %>');