DHTMLX与Angular.js的集成
如何在Angular.js应用程序中使用Dhtmlx？
Dhtmlx有很多组件可以使用，但我也希望拥有Angular.js的好处。
可以在Angular.js页面中使用Dhtmlx组件吗？如果是这样的话，是怎么做的？
你能给我看一些示例代码吗？
回答 2
Stack Overflow用户
发布于 2013-07-01 09:39:56
下面是一个在angular指令中使用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/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’中的所有文件复制到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 -否则无法使其工作。
创建一个pages控制器作为起始点
Rails g controller pages show将条目添加到config/routes并删除生成器添加的get pages行
Resources :pages
root :to => 'pages#show'删除public/index.html页面
将views/layout/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)
)Stack Overflow用户
发布于 2013-06-26 05:36:32
我现在正在做这件事。到目前为止，我已经在js代码中构建了一个angular指令并实例化了一个dhtmlx网格。在运行时，obj似乎是正确的，但它还没有完全显示在屏幕上。如果我让它工作，我会发布代码。
https://stackoverflow.com/questions/16826260
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号