jjzjj

javascript - DHTMLX 和 Angular.js 集成

coder 2025-03-09 原文

如何在 Angular.js 应用程序中使用 Dhtmlx？

Dhtmlx 有很多组件可供使用，但我也想享受 Angular.js 的好处。

是否可以在 Angular.js 页面中使用 Dhtmlx 组件？如果是，怎么办？

你能给我一些示例代码吗？

最佳答案

这是在 Angular Directive(指令)中使用 dhtmlx 的网格控件的基本示例。我已经将它构建到一个 ruby​​ on rails 站点中，这增加了一些其他的复杂性，但这就是我一直在工作的世界，所以这就是我构建的示例。

我正在构建一个 Rails 3.1+ 应用程序，js 代码全部在 coffeescript 中。只是想展示如何将 angular 与 dhtmlxGrid 和 rails 结合起来。这是一个仅供查看的网格，在此示例中没有将网格数据绑定(bind)到后端数据库。我构建了一个 angularjs 指令来封装 dhtmlxgrid 并添加了属性来控制属性。我将把它作为练习留给读者，以合并对指令属性的一些动态控制。希望这对某人有帮助……我对这一切还很陌生，所以构建起来很有趣。

创建新的 Rails 应用程序 将 gem 添加到 gemfile:

gem 'ngmin-rails'
gem 'ng-rails-csrf'
gem 'angularjs-rails'
gem 'jquery-ui-rails'

捆绑 gem

为 Angular 代码创建目录

app/assets/javascripts/angular/controllers
app/assets/javascripts/angular/directives
app/assets/javascripts/angular/services

将代码添加到 app/assets/javascripts/application.js，以便将 Assets 添加到项目中(require_tree 可能不需要所有这些。但我有它们)

//= require jquery
//= require jquery_ujs
//= require angular
//= require ng-rails-csrf
//= require angular-resource
//= require_tree ./angular/controllers/.
//= require_tree ./angular/directives/.
//= require_tree ./angular/services/.
//= require_tree ./angular/.
//= require dhtmlx/dhtmlxcommon
//= require dhtmlx/dhtmlxgrid
//= require dhtmlx/dhtmlxgridcell
//= require dhtmlx/dhtmlxdataprocessor

将以下内容添加到/assets/javascripts/application.js: angular.module("myapp", ["ng-rails-csrf", "MyGridDirective"]);

下载 dhtmlx 库文件:http://www.dhtmlx.com/x/download/regular/dhtmlxGrid.zip

您需要解压文件并将库文件分发到特定位置以便在 rails 中使用:在 vendor 中创建以下目录:

Vendor/assets/javascripts/dhtmlx/calendar
Vendor/assets/javascripts/dhtmlx/excells
Vendor/assets/javascripts/dhtmlx/ext
Vendor/assets/sytlesheets/dhtmlx/calendar
Vendor/assets/sytlesheets/dhtmlx/skins

将“dhtmlxgrid/codebase”中的所有文件复制到目录“vendor/assets”中 Rails 应用程序的相应文件夹中:

js files – copy in ‘vendor/assets/javascripts/dhtmlx’
css files – copy in ‘vendor/assets/stylesheets/dhtmlx’
images – copy in ‘vendor/assets/images/dhtmlx’

将所有图像文件复制到 public/images/dhtmlx --- 否则无法正常工作。

创建一个页面 Controller 作为起点

Rails g controller pages show

将条目添加到 config/routes 并删除由生成器添加的获取页面行

Resources :pages
root :to => 'pages#show'

删除 public/index.html 页面

将 views/layouts/application.html.erb 中的 body html 标签更改为:

<body ng-app="myapp">

将/views/pages/show.html.erb 文件内容更改为以下代码:

<h1>AngularJS dhtmlx Grid</h1>
<div>
  <dhtmlxgrid ht='500'
              width='800'
              theme='dhx_skyblue'
              header1='"contact list,#cspan,#cspan,#cspan,#cspan,#cspan"'
              header2='"id,title,author,price,in stock,date"'
              colwidths='"100,200,150,100,75,150"'
              colalignments='"center,center,center,center,center,center"'
              coltypes='"ro,ro,ro,ro,ro,ro"'
              colsorting='"int,str,str,currency,int,date"'></dhtmlxgrid>
</div>

使用以下内容创建文件/app/assets/javascripts/angular/directives/dhtmlxgrid.js.coffee

angular.module("MyGridDirective", []).directive("dhtmlxgrid", () ->
  restrict: 'E'
  replace: true
  templateUrl: "/partials/dhtmlx.html"
  scope:
    theme: "="
    ht: "="
    width: "="
    header1: "="
    header2: "="
    colwidths: "="
    colalignments: "="
    coltypes: "="
    colsorting: "="

  link: (scope, element, attrs) ->
    scope.data = {rows:  [
      {id: 1001, data: ["100", "A Time to Kill No ONE!", "John Grisham", "12.99", "1", "05/01/1998"]},
      {id: 1002, data: ["1000", "Blood and Smoke", "Stephen King", "0", "1", "01/01/2000"]},
      {id: 1003, data: ["-200", "The Rainmaker", "John Grisham", "7.99", "0", "12/01/2001"]},
      {id: 1004, data: ["350", "The Green Mile", "Stephen King", "11.10", "1", "01/01/1992"]}
    ]}

    refreshChart = (scope) ->
      scope.mygrid = new dhtmlXGridObject("gridbox")
      scope.mygrid.setImagePath "/images/dhtmlx/imgs/"
      scope.mygrid.setHeader scope.header1
      scope.mygrid.attachHeader scope.header2
      scope.mygrid.setInitWidths scope.colwidths
      scope.mygrid.setColAlign scope.colalignments
      scope.mygrid.setColTypes scope.coltypes
      scope.mygrid.setColSorting scope.colsorting
      scope.mygrid.init()
      scope.mygrid.setSkin scope.theme
      scope.mygrid.parse scope.data, "json"

    refreshChart(scope)

)

关于javascript - DHTMLX 和 Angular.js 集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16826260/

javascriptAngular34scopedhtmlxweb-applicationsangularjsintegration

有关javascript - DHTMLX 和 Angular.js 集成的更多相关文章

  1. ruby-on-rails - 如何使辅助方法在 Rails 集成测试中可用？ - 2

    我在app/helpers/sessions_helper.rb中有一个帮助程序文件，其中包含一个方法my_preference，它返回当前登录用户的首选项。我想在集成测试中访问该方法。例如，这样我就可以在测试中使用getuser_path(my_preference)。在其他帖子中，我读到这可以通过在测试文件中包含requiresessions_helper来实现，但我仍然收到错误NameError:undefinedlocalvariableormethod'my_preference'.我做错了什么？require'test_helper'require'sessions_hel

  2. ruby-on-rails - 我如何将 Hoptoad 与 DelayedJob 和 DaemonSpawn 集成？ - 2

    我一直很高兴地使用DelayedJob习惯用法:foo.send_later(:bar)这会调用DelayedJob进程中对象foo的方法bar。我一直在使用DaemonSpawn在我的服务器上启动DelayedJob进程。但是...如果foo抛出异常，Hoptoad不会捕获它。这是任何这些包中的错误...还是我需要更改某些配置...或者我是否需要在DS或DJ中插入一些异常处理来调用Hoptoad通知程序？回应下面的第一条评论。classDelayedJobWorker 最佳答案 尝试monkeypatchingDelayed::W

  3. jenkins部署1--jenkins+gitee持续集成 - 2

    前置步骤我们都操作完了，这篇开始介绍jenkins的集成。话不多说，看操作1、登录进入jenkins后会让你选择安装插件，选择第一个默认的就行。安装完成后设置账号密码，重新登录。2、配置JDK和Git都需要执行路径，所以需要先把执行路径找到，先进入服务器的docker容器，2.1JDK的路径root@69eef9ee86cf:/usr/bin#echo$JAVA_HOME/usr/local/openjdk-82.2Git的路径root@69eef9ee86cf:/#whichgit/usr/bin/git3、先配置JDK和Git。点击：ManageJenkins>>GlobalToolCon

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  6. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

  9. 三分钟集成 TapTap 防沉迷 SDK（Unity 版） - 2

    三分钟集成Tap防沉迷SDK（Unity版）一、SDK介绍基于国家对上线所有游戏必须增加防沉迷功能的政策下，TapTap推出防沉迷SDK，供游戏开发者进行接入；允许未成年用户在周五、六、日以及法定节假日晚上8:00-9:00进行游戏，防沉谜时间段进入游戏会弹窗进行提示！开发环境要求：Unity2019.4或更高版本iOS10或更高版本Android5.0（APIlevel21）或更高版本🔗Unity集成Demo参考链接🔗UnityTapSDK功能体验APK下载链接二、集成前准备1.创建应用进入开发者后台,按照提示开始创建应用；2.开通服务在使用TDS实名认证和防沉迷服务之前，需要在上面创建的应

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐