我正在尝试使用Angular处理一个简单的jQWidget treegrid。
使用我所指的Angular SPA的示例如下：https://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs-directives/angularjs-jquery-treegrid.htm
我得到的前端错误是：
`ReferenceError: dataAdapter is not defined
at eval (eval at link (localhost:49479/app/services/directives.js:234:59), <anonymous>:1:27)
at link (localhost:49479/app/services/directives.js:234:28)`
[app] [HT Error] dataAdapter is not defined
Object {exception: ReferenceError, cause: "<span id="jqxTreeGrid" ng-jqwidgets="jqxTreeGrid" …pageable, columns: columns, disabled: disabled}">"}
cause: "<span id="jqxTreeGrid" ng-jqwidgets="jqxTreeGrid" ng-jqxsettings="{theme: 'metro', source: dataAdapter, width: 850, sortable: sortable, pageable: pageable, columns: columns, disabled: disabled}">"
exception: ReferenceError
和dataAdapter绑定在ng-jqxsettings =“{theme：'metro'，source：dataAdapter ...}”。
我还注意到，当我在chorme f12中调试时，我的$ scope.dataAdapater没有我在源var中的数据。换句话说，'source'包含有效数据但从未分配给dataApapter：
$scope.dataAdapter = new $.jqx.dataAdapter(source);
我的dashboard.html包含<span id="jqxTreeGrid" ...>，这给了我麻烦：
<section id="dashboard-view" class="mainbar" data-ng-controller="dashboard as vm">
<section class="matter">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12"> <!-- HIERARCHY GRID -->
<div class="widget wlightblue">
<div data-cc-widget-header title="{{'Hierarchy'}}" subtitle="" allow-collapse="true"></div>
<div class="widget-content text-left text-info" style="float:left; border:none;">
<span>THIS IS A TEST</span>
<span id="jqxTreeGrid" ng-jqwidgets="jqxTreeGrid"
ng-jqxsettings="{theme: 'metro', source: dataAdapter, width: 850, sortable: sortable, pageable: pageable, columns: columns, disabled: disabled}">
</span>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
我的控制器是：
(function () {
'use strict';
var controllerId = 'dashboard';
angular.module('app').controller(controllerId, ['common', 'datacontext', '$scope', dashboard ]);
function dashboard(common, datacontext, $scope) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var vm = this;
vm.news = {
title: 'Test Online',
description: 'queries to dynamically aggregate data. .'
};
activate();
function activate($scope) {
var promises = [getMessageCount(), getCountries(), getMemberMtm(), initJqTreeGrid()];
common.activateController(promises, controllerId)
.then(function () { log('Activated Dashboard View'); });
}
///jQWidgets treegrid settings
function initJqTreeGrid() {
var source =
{
dataType: "array",
dataFields: [
{ name: "name", type: "string" },
{ name: "quantity", type: "number" },
{ name: "id", type: "string" },
{ name: "parentid", type: "number" },
{ name: "price", type: "number" },
{ name: "date", type: "date" },
{ name: "customer", type: "string" }
],
hierarchy:
{
keyDataField: { name: 'id' },
parentDataField: { name: 'parentid' }
},
id: 'id',
localData: generateordersdata()
};
$scope.dataAdapter = new $.jqx.dataAdapter(source);
$scope.theme = "metro";
$scope.sortable = true;
$scope.pageable = true;
$scope.disabled = false;
$scope.columns = [
{ text: 'Order Name', dataField: "name", align: 'center', width: 200 },
{ text: 'Customer', dataField: "customer", align: 'center', width: 200 },
{ text: 'Price', dataField: "price", cellsFormat: "c2", align: 'center', cellsAlign: 'right', width: 80 },
{
text: 'Order Date', dataField: "date", align: 'center', cellsFormat: "dd-MMMM-yyyy hh:mm", cellsRenderer: function (rowKey, column, cellValue, rowData, cellText) {
if (rowData.level === 0) {
return $scope.dataAdapter.formatDate(cellValue, "dd-MMMM-yyyy");
}
return cellText;
}
}
];
}
我会非常感谢您的建议。
的问候， 鲍勃
答案 0 :(得分：1)
我在他们的教程中使用了一个不同的例子，并且能够让它运行起来。稍有不同，我在控制器定义中设置了我的设置，而不是内联。我有更好的运气。装货订单也有所不同。这是我的网格示例代码。
JavaScript的：
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
// Grid data.
var data = new Array();
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];
var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];
for (var i = 0; i < firstNames.length; i++) {
var row = {};
row["firstname"] = firstNames[i];
row["lastname"] = lastNames[i];
row["title"] = titles[i];
row["city"] = city[i];
row["country"] = country[i];
data[i] = row;
}
$scope.people = data;
$scope.bindingCompleted = "";
$scope.settings =
{
altrows: true,
width: 800,
height: 200,
editable: true,
ready: function()
{
$scope.settings.apply('selectrow', 1);
},
sortable: true,
source: $scope.people,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'First Name', datafield: 'firstname', width: 150 },
{ text: 'Last Name', datafield: 'lastname', width: 150 },
{ text: 'Title', datafield: 'title', width: 150 },
{ text: 'City', datafield: 'city', width: 150 },
{ text: 'Country', datafield: 'country' }
],
bindingcomplete: function (event) {
$scope.bindingCompleted = "binding is completed";
}
}
});
</script>
HTML：
<div ng-app="demoApp" ng-controller="demoController">
<jqx-grid jqx-settings="settings"></jqx-grid>
</div>