0

我在尝试让一个简单的 jQWidget treegrid 与 Angular 一起工作时遇到了很糟糕的事情。

我所指的使用 Angular SPA 的示例在这里：https ://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs-directives/angularjs-jquery-treegrid.htm

初始教程页面在这里：https ://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs-directives.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 没有我在源变量中拥有的数据。换句话说，'source' 包含有效数据，但从未分配给 dataAapter ：

 $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;
                }
            }
        ];
    }

我将不胜感激您的建议。

问候，鲍勃

4

1 回答 1

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>
于 2014-09-23T15:50:14.440 回答