DHTMLX 和 Angular.js 集成答案

【问题标题】：DHTMLX and Angular.js integrationDHTMLX 和 Angular.js 集成
【发布时间】：2013-05-25 10:38:54
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript web-applications angularjs integration dhtmlx

【解决方案1】：

目前正在处理这个问题。到目前为止已经构建了一个角度指令并在 js 代码中实例化了一个 dhtmlx 网格。在运行时 obj 似乎是正确的，但它还没有完全显示在屏幕上。如果我让它工作，我会发布代码。

【讨论】：

好的。很好。谢谢，艾伦。我期待看到代码。

【解决方案2】：

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

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

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

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

捆绑宝石

为 Angular 代码创建目录

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中创建以下目录：

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)

)

【讨论】：

很高兴这个答案被接受（如果不是你想要的，或者一些反馈）......
对奉献精神印象深刻 :) 虽然我通常会选择 DHTMLX 以外的东西。