Как я могу использовать Dhtmlx внутри приложения Angular.js?
В Dhtmlx есть много готовых к использованию компонентов, но я хотел бы также использовать преимущества Angular.js.
Можно ли использовать компоненты Dhtmlx внутри страниц Angular.js? Если да, то как?
Можете ли вы показать мне пример кода?
Вот базовый пример использования элемента управления сеткой dhtmlx в директиве angular. Я встроил его в сайт ruby on rails, что добавило некоторую сложность, но это мир, в котором я работал, так что это пример, который я построил.
Я создаю приложение для рельсов 3.1+, и весь код js находится в coffeescript. Просто пытаюсь показать, как включить angular с dhtmlxGrid и rails. Это сетка только для просмотра, в этом примере данные сетки не привязываются к серверной базе данных. Я создал директиву angularjs для инкапсуляции dhtmlxgrid и добавил атрибуты для управления свойствами. Я оставлю читателю в качестве упражнения возможность динамического управления атрибутами директивы. Надеюсь, это кому-нибудь поможет... Я все еще довольно новичок во всем этом, так что было весело строить.
Создайте новое приложение rails. Добавьте драгоценные камни в 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» в соответствующие папки приложения Rails в каталоге «vendor/assets»:
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
Добавьте записи в config/routes и удалите строку получения страниц, добавленную генератором
Resources :pages
root :to => 'pages#show'
Удалить страницу public/index.html
Измените HTML-тег body в файле views/layouts/application.html.erb на:
<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 в коде js. во время выполнения объект кажется правильным, но он еще не отображается на экране. если я заработаю, я опубликую код.
