use*_*575 5 javascript integration web-applications dhtmlx angularjs
如何在Angular.js应用程序中使用Dhtmlx？
Dhtmlx有很多组件可以使用,但我想也有Angular.js的好处.
是否可以在Angular.js页面中使用Dhtmlx组件？如果是这样,怎么样？
你能告诉我一些示例代码吗？
这是在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)
)
我现在正在研究这个问题。到目前为止，我们已经构建了一个 Angular 指令并在 js 代码中实例化了一个 dhtmlx 网格。在运行时，该 obj 似乎是正确的，但尚未完全显示在屏幕上。如果我让它工作，我会发布代码。
| 归档时间： |
|
| 查看次数： |
4506 次 |
| 最近记录： |