ruby-on-rails - 如何在 Ruby on Rails 中使用 jTable？

Question

我想用 jTable Ruby on Rails 4 中的 jQuery 插件。最好的方法是什么？ Turbolink 兼容性对我来说很重要。

Answer 1

我在vendor目录下安装了jTable js和css(需要jQuery UI，我用了jquery-ui-rails gem)

我创建了一个 Controller (称为tables_controller)，并使用了一些棘手的方法使其易于使用且对rails 友好。

请参阅以下示例。我使用了一个特殊的命名约定来简化这个过程:字段的名称包含表名和列名，以“__”分隔 - 例如 visitors__id .您将看到它如何帮助处理自动订购。

应用程序/ Controller /tables_controller.erb:

class TablesController < ApplicationController
  def demo
    respond_to do |format|
      format.json {
        page_size = params[:jtPageSize].to_i
        start_index = params[:jtStartIndex].to_i
        start_page = start_index / page_size + 1
        sort_by = params[:jtSorting].gsub('__', '.')
        filter = params[:filter]
        if filter
          @visitors_count = Visitor.joins(:city).
              where('visitors.name like ? OR cities.name like ?', "%#{filter}%", "%#{filter}%").size()
          @visitors = Visitor.joins(:city ).
              where('visitors.name like ? OR cities.name like ?', "%#{filter}%", "%#{filter}%").order(sort_by).
              paginate(:page => start_page, :per_page => page_size)
        else
          @visitors_count = Visitor.all.size()
          @visitors = Visitor.joins(:city).order(sort_by).
              paginate(:page => start_page, :per_page => page_size)
        end
      }
      format.html {}
      format.js {}
    end
  end
  def demo_delete
    @visitor = Visitor.find(params[:visitors__id])
    if @visitor
      if @visitor.destroy
        render js: '{"Result":"OK"}'
      end
    end
  end
end

应用程序/ View /表/demo.json.jbuilder:

json.Result "OK"
json.TotalRecordCount @visitors_count
json.Records do
  json.array!(@visitors) do |visitor|
    json.visitors__id visitor.id
    json.visitors__name visitor.name
    json.visitors__age visitor.age
    json.cities__name visitor.city.name
  end
end

应用程序/ View /表/demo.html.erb:

<div class="jtable-filter">
  <form class="jtable-filter">
    <input type="text" name="filter" id="filter"/>
    <button type="submit" data-jtable-filter="demo">Filter</button>
  </form>
</div>
<div id="demo" data-jtable-config="/demo">
</div>

应用程序/ View /表/demo.js.erb:

var jtable_config = {
    title: '',
    paging: true, //Enable paging
    pageSize: 10, //Set page size (default: 10)
    sorting: true, //Enable sorting
    defaultSorting: 'visitors__name ASC', //Set default sorting
    defaultDateFormat: 'yy-mm-dd',
    gotoPageArea: 'combobox',
    actions: {
        listAction: '/demo',
        deleteAction: '/demo/delete'
    },
    fields: {
        visitors__id: {
            key: true,
            list: false
        },
        visitors__name: {
            title: 'Name',
            width: '30%'
        },
        visitors__age: {
            title: 'Age',
            width: '20%'
        },
        cities__name: {
            title: 'City',
            width: '20%'
        }
    }
};

应用程序.js:

(function ($) {
    jQuery.fn.jtable_ou = function () {
        return this.each(function () {
            var $this = $(this);
            var config_url=$this.attr("data-jtable-config");
            $.getScript( config_url, function( data, textStatus, jqxhr ) {
                $this.jtable(jtable_config);
                $this.jtable('load');
            });
        });
    };
})(jQuery);

$(document).on("page:change", function() {
    $('[data-jtable-config]').jtable_ou();
    $('button[data-jtable-filter]').click(function (e) {
        e.preventDefault();
        var target=this.getAttribute("data-jtable-filter");
        $('#'+target).jtable('load', {
            filter: $('#filter').val()
        });
    });
});

gem 文件:

match '/demo',   to: 'tables#demo',   via: [:get, :post]
match '/demo/delete',   to: 'tables#demo_delete',   via: [:post]

它对 turbolink 友好，并使用不显眼的 JavaScript。

您可以找到详细说明 in this post .