Question

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

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

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

你能告诉我一些示例代码吗？

Answer 1

这是在angular指令中使用dhtmlx的网格控件的基本示例。我把它构建成了一个ruby on rails网站，这增加了一些其他的复杂性，但这就是我一直在努力的世界，所以这就是我建立的例子。

我正在构建一个rails 3.1+应用程序，而js代码全部都在coffeescript中。只是试图展示如何将角度与dhtmlxGrid和rails结合在一起。这是一个仅查看网格，此示例中没有将网格数据绑定到后端数据库。我构建了一个angularjs指令来封装dhtmlxgrid并添加了控制属性的属性。我将把它作为练习让读者对指令属性进行一些动态控制。希望这有助于某些人...我仍然对这一切都很陌生，所以构建起来很有趣。

创建新的rails应用将gem添加到gemfile：

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

捆绑宝石

为角度代码

创建目录

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

将代码添加到app / assets / javascripts / application.js，以便将资产添加到项目中（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/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 ---否则无法使其工作。

创建一个页面控制器作为起点

Rails g controller pages show

向配置/路由添加条目并删除由生成器添加的获取页面行

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)

)

Answer 2

我正在努力解决这个问题。到目前为止已经构建了一个angular指令并在js代码中实例化了一个dhtmlx网格。在运行时，obj似乎是正确的，但它还没有完全出现在屏幕上。如果我得到它的工作，我会发布代码。

DHTMLX和Angular.js集成

2 个答案: