草庐IT

javascript - 转换 Javascript 数据表以在 Rails 应用程序中使用 Opal

coder 2024-07-20 原文

我正在使用 ajax-datatables-rails .下面是我的数据表的 JS。我想将 javascript 转换为等效的 Opal.rb。

jQuery(document).ready(function() {
  var table = $('#organizations-datatable');
  var token = $('meta[name=csrf-token]').attr('content');
  table.DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
      "url": "/organizations/datatable.json",
      "type": 'POST',
      "beforeSend": function (xhr) {
          xhr.setRequestHeader('X-CSRF-Token', token)
        }
    },
    "pagingType": "full_numbers",
    "destroy": true,
    "columns": [
      {"data": "name"},
      {"data": "desc"},
      {"data": "industry"},
      {"data": "tags"}
    ],
    "iDisplayLength": 25
  });
});

它包括将 CSRF token 添加到 ajax 数据请求。

为了可读性等,我希望我们所有的 javascript 都写成蛋白石。请不要争论这个选择,我只关心如何通过 opal/rails-ujs/opal-jquery 让它作为 Opalrb 工作

下面的Opal没有实现和上面的JS一样。谁能帮我理解为什么?

Element.expose :DataTable

Document.ready? do
  token     = Element['meta[name=csrf-token]'].attr('content');
  settings  = {
      "processing": true,
      "serverSide": true,
      "ajax": {
        "url": "/organizations/datatable.json",
        "type": 'POST',
        "beforeSend": lambda do
          xhr = `new window.XMLHttpRequest()`
          xhr.setRequestHeader('X-CSRF-Token', token)
        end 
      },
      "pagingType": "full_numbers",
      "destroy": true,
    "columns": [
      {"data": "name"},
      {"data": "desc"},
      {"data": "industry"},
      {"data": "tags"}
    ]
    }
  Element['#organizations-datatable'].DataTable(settings.to_n)

end

我在这里错过了什么?为什么这种蛋白石不好?

编辑:这就是我的路线,这确保 POST 适用于此:

Rails.application.routes.draw do
    concern :with_datatable do
        post 'datatable', on: :collection
    end
    resources :organizations,   concerns: [:with_datatable]
end

这是我使用 gem 的相关 Controller 和数据表代码:

class OrganizationsController < ApplicationController
    def index
        @title              = "Organizations"
        @page_description   = "Organization data warehouse"
        @page_icon          = "institution"
        @organization       = Organization.new
        @load               = {data_table: true}
        @menu               = Menu.new 

      respond_to do |format|
        format.html
        format.json { render json: OrganizationDatatable.new(params) }
      end

    end

    def datatable
        logger.ap "datatable params: #{params}"
        respond_to do |format|
            format.json { render json: OrganizationDatatable.new(params) }
        end
    end

    def get_raw_records
        Organization.all
    end
    def create

    end
    def edit

    end
    def destroy

    end

    def show    
    end

    def update
    end

    def new
    end
end

这是数据表

class OrganizationDatatable < AjaxDatatablesRails::ActiveRecord

  extend Forwardable
  include ActionView::Helpers::TextHelper

  def_delegator :@view, :link_to

  def view_columns
    # Declare strings in this format: ModelName.column_name
    # or in aliased_join_table.column_name format

    @view_columns ||= {
      # id:       { source: "Organization.id"           },
      name:     { source: "Organization.name",cond: :like, searchable: true, orderable: true          },
      desc:     { source: "Organization.description",cond: :like, searchable: true, orderable: true   },
      industry: { source: "Organization.industry",cond: :like, searchable: true, orderable: true      },
      tags:     { source: "Organization.tag_list", searchable: false, orderable: false      }
    }
  end

  def data
    records.map do |record|
      {
        id:       record.id,
        name:     record.name,
        desc:     truncate(record.description,length: 240, separator: ' '),
        industry: record.industry,
        tags:     record.decorate.buttonize_tags,
        DT_RowId: record.id
      }
    end
  end

  def get_raw_records
    Organization.all
  end

end

最佳答案

我将从指出您代码中的一些错误开始,

  1. beforeSend中的代码有问题请引用supplying-an-xhr-method ,改成下面的代码,

    "beforeSend": lambda do |xhr|

    `xhr.setRequestHeader('X-CSRF-Token', token)`

像上面的语句一样,用 (`) 反引号将 xhr 语句括起来

  1. 列应该有二维数组而不是对象数组,

    “列”:[ [“数据”:“名称”], [“数据”:“描述”], [“数据”:“行业”], [“数据”:“标签”] ]

其余代码看起来不错。

下面是测试代码,

Element.expose :DataTable
Document.ready? do
  token     = Element['meta[name=csrf-token]'].attr('content');
  settings  = {
      "ajax": {
        "url": "/data.json",
        "type": 'POST',
        "beforeSend": lambda do |xhr|
          `xhr.setRequestHeader('X-CSRF-Token', token)`
        end 
      },
      "pagingType": "full_numbers",
      "destroy": true,
    "columns": [
      ["data": "Name"],
      ["data": "Position"],
      ["data": "Office"],
      ["data": "Extn."],
      ["data": "Start"],
      ["data": "Salary"]
    ]
    }
  Element['#organizations-datatable'].DataTable(settings.to_n)

end

确保你的data.json文件在rails app的public文件夹中,内容如下,

{
    "data": [
      [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$320,800"
      ],
      [
        "Garrett Winters",
        "Accountant",
        "Tokyo",
        "8422",
        "2011/07/25",
        "$170,750"
      ],
      [
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000"
      ],
      [
        "Cedric Kelly",
        "Senior Javascript Developer",
        "Edinburgh",
        "6224",
        "2012/03/29",
        "$433,060"
      ],
      [
        "Airi Satou",
        "Accountant",
        "Tokyo",
        "5407",
        "2008/11/28",
        "$162,700"
      ],
      [
        "Brielle Williamson",
        "Integration Specialist",
        "New York",
        "4804",
        "2012/12/02",
        "$372,000"
      ],
      [
        "Herrod Chandler",
        "Sales Assistant",
        "San Francisco",
        "9608",
        "2012/08/06",
        "$137,500"
      ],
      [
        "Rhona Davidson",
        "Integration Specialist",
        "Tokyo",
        "6200",
        "2010/10/14",
        "$327,900"
      ],
      [
        "Colleen Hurst",
        "Javascript Developer",
        "San Francisco",
        "2360",
        "2009/09/15",
        "$205,500"
      ],
      [
        "Sonya Frost",
        "Software Engineer",
        "Edinburgh",
        "1667",
        "2008/12/13",
        "$103,600"
      ],
      [
        "Jena Gaines",
        "Office Manager",
        "London",
        "3814",
        "2008/12/19",
        "$90,560"
      ],
      [
        "Quinn Flynn",
        "Support Lead",
        "Edinburgh",
        "9497",
        "2013/03/03",
        "$342,000"
      ],
      [
        "Charde Marshall",
        "Regional Director",
        "San Francisco",
        "6741",
        "2008/10/16",
        "$470,600"
      ],
      [
        "Haley Kennedy",
        "Senior Marketing Designer",
        "London",
        "3597",
        "2012/12/18",
        "$313,500"
      ],
      [
        "Tatyana Fitzpatrick",
        "Regional Director",
        "London",
        "1965",
        "2010/03/17",
        "$385,750"
      ],
      [
        "Michael Silva",
        "Marketing Designer",
        "London",
        "1581",
        "2012/11/27",
        "$198,500"
      ],
      [
        "Paul Byrd",
        "Chief Financial Officer (CFO)",
        "New York",
        "3059",
        "2010/06/09",
        "$725,000"
      ],
      [
        "Gloria Little",
        "Systems Administrator",
        "New York",
        "1721",
        "2009/04/10",
        "$237,500"
      ],
      [
        "Bradley Greer",
        "Software Engineer",
        "London",
        "2558",
        "2012/10/13",
        "$132,000"
      ],
      [
        "Dai Rios",
        "Personnel Lead",
        "Edinburgh",
        "2290",
        "2012/09/26",
        "$217,500"
      ],
      [
        "Jenette Caldwell",
        "Development Lead",
        "New York",
        "1937",
        "2011/09/03",
        "$345,000"
      ],
      [
        "Yuri Berry",
        "Chief Marketing Officer (CMO)",
        "New York",
        "6154",
        "2009/06/25",
        "$675,000"
      ],
      [
        "Caesar Vance",
        "Pre-Sales Support",
        "New York",
        "8330",
        "2011/12/12",
        "$106,450"
      ],
      [
        "Doris Wilder",
        "Sales Assistant",
        "Sidney",
        "3023",
        "2010/09/20",
        "$85,600"
      ],
      [
        "Angelica Ramos",
        "Chief Executive Officer (CEO)",
        "London",
        "5797",
        "2009/10/09",
        "$1,200,000"
      ],
      [
        "Gavin Joyce",
        "Developer",
        "Edinburgh",
        "8822",
        "2010/12/22",
        "$92,575"
      ],
      [
        "Jennifer Chang",
        "Regional Director",
        "Singapore",
        "9239",
        "2010/11/14",
        "$357,650"
      ],
      [
        "Brenden Wagner",
        "Software Engineer",
        "San Francisco",
        "1314",
        "2011/06/07",
        "$206,850"
      ],
      [
        "Fiona Green",
        "Chief Operating Officer (COO)",
        "San Francisco",
        "2947",
        "2010/03/11",
        "$850,000"
      ],
      [
        "Shou Itou",
        "Regional Marketing",
        "Tokyo",
        "8899",
        "2011/08/14",
        "$163,000"
      ],
      [
        "Michelle House",
        "Integration Specialist",
        "Sidney",
        "2769",
        "2011/06/02",
        "$95,400"
      ],
      [
        "Suki Burks",
        "Developer",
        "London",
        "6832",
        "2009/10/22",
        "$114,500"
      ],
      [
        "Prescott Bartlett",
        "Technical Author",
        "London",
        "3606",
        "2011/05/07",
        "$145,000"
      ],
      [
        "Gavin Cortez",
        "Team Leader",
        "San Francisco",
        "2860",
        "2008/10/26",
        "$235,500"
      ],
      [
        "Martena Mccray",
        "Post-Sales support",
        "Edinburgh",
        "8240",
        "2011/03/09",
        "$324,050"
      ],
      [
        "Unity Butler",
        "Marketing Designer",
        "San Francisco",
        "5384",
        "2009/12/09",
        "$85,675"
      ],
      [
        "Howard Hatfield",
        "Office Manager",
        "San Francisco",
        "7031",
        "2008/12/16",
        "$164,500"
      ],
      [
        "Hope Fuentes",
        "Secretary",
        "San Francisco",
        "6318",
        "2010/02/12",
        "$109,850"
      ],
      [
        "Vivian Harrell",
        "Financial Controller",
        "San Francisco",
        "9422",
        "2009/02/14",
        "$452,500"
      ],
      [
        "Timothy Mooney",
        "Office Manager",
        "London",
        "7580",
        "2008/12/11",
        "$136,200"
      ],
      [
        "Jackson Bradshaw",
        "Director",
        "New York",
        "1042",
        "2008/09/26",
        "$645,750"
      ],
      [
        "Olivia Liang",
        "Support Engineer",
        "Singapore",
        "2120",
        "2011/02/03",
        "$234,500"
      ],
      [
        "Bruno Nash",
        "Software Engineer",
        "London",
        "6222",
        "2011/05/03",
        "$163,500"
      ],
      [
        "Sakura Yamamoto",
        "Support Engineer",
        "Tokyo",
        "9383",
        "2009/08/19",
        "$139,575"
      ],
      [
        "Thor Walton",
        "Developer",
        "New York",
        "8327",
        "2013/08/11",
        "$98,540"
      ],
      [
        "Finn Camacho",
        "Support Engineer",
        "San Francisco",
        "2927",
        "2009/07/07",
        "$87,500"
      ],
      [
        "Serge Baldwin",
        "Data Coordinator",
        "Singapore",
        "8352",
        "2012/04/09",
        "$138,575"
      ],
      [
        "Zenaida Frank",
        "Software Engineer",
        "New York",
        "7439",
        "2010/01/04",
        "$125,250"
      ],
      [
        "Zorita Serrano",
        "Software Engineer",
        "San Francisco",
        "4389",
        "2012/06/01",
        "$115,000"
      ],
      [
        "Jennifer Acosta",
        "Junior Javascript Developer",
        "Edinburgh",
        "3431",
        "2013/02/01",
        "$75,650"
      ],
      [
        "Cara Stevens",
        "Sales Assistant",
        "New York",
        "3990",
        "2011/12/06",
        "$145,600"
      ],
      [
        "Hermione Butler",
        "Regional Director",
        "London",
        "1016",
        "2011/03/21",
        "$356,250"
      ],
      [
        "Lael Greer",
        "Systems Administrator",
        "London",
        "6733",
        "2009/02/27",
        "$103,500"
      ],
      [
        "Jonas Alexander",
        "Developer",
        "San Francisco",
        "8196",
        "2010/07/14",
        "$86,500"
      ],
      [
        "Shad Decker",
        "Regional Director",
        "Edinburgh",
        "6373",
        "2008/11/13",
        "$183,000"
      ],
      [
        "Michael Bruce",
        "Javascript Developer",
        "Singapore",
        "5384",
        "2011/06/27",
        "$183,000"
      ],
      [
        "Donna Snider",
        "Customer Support",
        "New York",
        "4226",
        "2011/01/25",
        "$112,000"
      ]
    ]
  }

添加蛋白石Gemfile,

gem 'opal-rails'

gem 'opal-jquery'

application.js.rb内容,

require 'opal'
require 'jquery'
require 'opal-jquery'
require 'datatables.min'
require_tree '.'

添加datatables.min.js文件到app/assets/javascripts文件夹

html,

<table id="organizations-datatable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

注意:- 如果你想让它与 POST 一起工作,你必须调整你的 config/routes.rb

在 routes.rb 中为您的 json 文件添加以下条目,

对我来说,

post '/data.json', :to => redirect('/data.json')

对你来说,

post '/organizations/datatable.json', :to => redirect('/organizations/datatable.json')

完整代码在这里 https://gitlab.com/shoyebsheikh/opal-datatables

Ajax datatables rails gem 解决方案:

假设这是数据源,您可以将以下行添加到您的 route ,

post '/organizations/datatable.json', :to => redirect('/organizations/datatable.json')

你的 Controller 应该是这样的

class OrganizationsController < ApplicationController
    def datatable
        params["columns"] ||= { "0" => {"data" => "" } }
        params["length"]  ||= -1
        respond_to do |format|
            format.html
            format.json { render json: OrganizationDatatable.new(params) }
        end
    end
end

你的数据表如下,

class OrganizationDatatable < AjaxDatatablesRails::ActiveRecord

  def view_columns
    # Declare strings in this format: ModelName.column_name
    # or in aliased_join_table.column_name format

    @view_columns ||= {
      # id:       { source: "Organization.id"           },
      name:     { source: "Organization.name",cond: :like, searchable: true, orderable: true          },
      desc:     { source: "Organization.description",cond: :like, searchable: true, orderable: true   },
      industry: { source: "Organization.industry",cond: :like, searchable: true, orderable: true      },
      tags:     { source: "Organization.tag_list", searchable: false, orderable: false      }
    }
  end

  def data
    records.map do |record|
      {
        # id:       record.id,
        name:     record.name,
        desc:     truncate(record.description,length: 240, separator: ' '),
        industry: record.industry,
        tags:     record.decorate.buttonize_tags,
        DT_RowId: record.id
      }
    end
  end

  def get_raw_records
    Organization.all
  end

end

在您的 organizations.js.rb 中有蛋白石代码,

Document.ready? do
  token     = Element['meta[name=csrf-token]'].attr('content');
  settings  = {
      "ajax": {
        "url": Element['#organizations-datatable'].data('source'),
        "type": 'POST',
        "beforeSend": lambda do |xhr|
          `xhr.setRequestHeader('X-CSRF-Token', token)`
        end 
      },
      "pagingType": "full_numbers",
      "destroy": true,
    "columns": [
      {"data": "name"},
      {"data": "desc"},
      {"data": "industry"},
      {"data": "tags"}
    ]
    }
  Element['#organizations-datatable'].dataTable(settings.to_n)

end

在 html 中,

<table id="organizations-datatable" data-source="<%= organizations_index_path(format: :json) %>">
  <thead>
    <tr>
      <th>Name</th>
      <th>Desc</th>
      <th>Industry</th>
      <th>tags</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

organizations_index_path 可以是 organizations_path 或像 organization_index_pathorganization_path 这样的单数形式,具体取决于您的 Controller 名称

请引用https://gitlab.com/shoyebsheikh/ajax-datatables-rails-with-opal了解更多信息。

注意:

  1. 使用 mysql2 gem。
  2. 运行迁移并将条目添加到表中 rails CLI 或手动在表中。
  3. 如果您在安装所有依赖项并运行迁移后运行项目,请访问 http://localhost:3000/user/indexhttp://localhost:3000/hello_world/index

关于javascript - 转换 Javascript 数据表以在 Rails 应用程序中使用 Opal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55693725/

有关javascript - 转换 Javascript 数据表以在 Rails 应用程序中使用 Opal的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇,就使用ruby​​onrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提

  2. ruby-on-rails - rails : keeping DRY with ActiveRecord models that share similar complex attributes - 2

    这似乎应该有一个直截了当的答案,但在Google上花了很多时间,所以我找不到它。这可能是缺少正确关键字的情况。在我的RoR应用程序中,我有几个模型共享一种特定类型的字符串属性,该属性具有特殊验证和其他功能。我能想到的最接近的类似示例是表示URL的字符串。这会导致模型中出现大量重复(甚至单元测试中会出现更多重复),但我不确定如何让它更DRY。我能想到几个可能的方向...按照“validates_url_format_of”插件,但这只会让验证干给这个特殊的字符串它自己的模型,但这看起来很像重溶液为这个特殊的字符串创建一个ruby​​类,但是我如何得到ActiveRecord关联这个类模型

  3. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入,例如“100兆字节”或“1GB”,并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前,我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效,但前提是输入是倍数(“gigabytes”,而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以,功能正常,

  4. ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2

    作为我的Rails应用程序的一部分,我编写了一个小导入程序,它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是,与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存,我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关,因为当我删除对LDAP内容的调用时,内存使用情况会很好地稳定下来。此外,不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray,它们都是LDAP库的一部分。当我运行导入时,内存使用量最终达到超过1GB的峰值。如果问题存在,我需要找到一些方法来更正我的代

  5. ruby-on-rails - unicode 字符串的长度 - 2

    在我的Rails(2.3,Ruby1.8.7)应用程序中,我需要将字符串截断到一定长度。该字符串是unicode,在控制台中运行测试时,例如'א'.length,我意识到返回了双倍长度。我想要一个与编码无关的长度,以便对unicode字符串或latin1编码字符串进行相同的截断。我已经了解了Ruby的大部分unicode资料,但仍然有些一头雾水。应该如何解决这个问题? 最佳答案 Rails有一个返回多字节字符的mb_chars方法。试试unicode_string.mb_chars.slice(0,50)

  6. ruby-on-rails - Ruby on Rails 迁移,将表更改为 MyISAM - 2

    如何正确创建Rails迁移,以便将表更改为MySQL中的MyISAM?目前是InnoDB。运行原始执行语句会更改表,但它不会更新db/schema.rb,因此当在测试环境中重新创建表时,它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移,以便将现有表修改为MyISAM并更新schema.rb,以便我的数据库和相应的测试数据库得到相应更新? 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb,然后运行:rakedb:schema:load,但是,这将覆盖您的数据。我的做法是(假设

  7. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou

  8. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  9. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情? 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中,使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件,我们在StackOverflow上找到一个类似的问题

  10. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息? 最佳答案 在Rails3中,update_all不返回任何有意义的信息,除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

随机推荐