Question

我正在尝试使用angularjs指令创建jqxGrid（JQWdidgets）。我试图访问指令中提到的网格ID，因此尝试使用函数jqxGrid（）在控制器中设置一些网格属性。但我收到了以下错误

TypeError: $(...).jqxGrid is not a function

我在git中设置了项目，项目有gulp文件。我添加了gulp任务来加载jqwidgets的依赖项。

gulp.task('vendorScripts', function() {
    return gulp.src([
            'bower_components/**/dist/jquery.js',
            'bower_components/**/assets/javascripts/bootstrap.js',
            'bower_components/**/angular.js',
            'bower_components/**/angular-route.js',
            'bower_components/**/highcharts.js',
            'bower_components/**/modules/exporting.js',
            'bower_components/**/release/angular-ui-router.min.js',
            'bower_components/**/ui-bootstrap-tpls.js',
            'bower_components/**/dist/jquery.min.js',
            'bower_components/**/jqwidgets/jqxcore.js',
            'bower_components/**/jqwidgets/jqxdata.js',
            'bower_components/**/jqwidgets/jqxbuttons.js',
            'bower_components/**/jqwidgets/jqxscrollbar.js',
            'bower_components/**/jqwidgets/jqxmenu.js',
            'bower_components/**/jqwidgets/jqxcheckbox.js',
            'bower_components/**/jqwidgets/jqxlistbox.js',
            'bower_components/**/jqwidgets/jqxdropdownlist.js',
            'bower_components/**/jqwidgets/jqxgrid.js',
            'bower_components/**/jqwidgets/jqxgrid.sort.js',
            'bower_components/**/jqwidgets/jqxgrid.pager.js',
            'bower_components/**/jqwidgets/jqxgrid.selection.js',
            'bower_components/**/jqwidgets/jqxgrid.edit.js',
            'bower_components/**/jqwidgets/jqxangular.js'
        ])
        .pipe(plumber())
        .pipe(concat('vendor.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});



gulp.start('vendorScripts');

这就是我使用指令的方式：

<jqx-grid id="cs-grid" jqx-settings="$root.settings" jqx-source="$root.gridData"></jqx-grid>

我的控制器实施：

$scope.PageSize = 3;
            $rootScope.settings = {
                theme: 'bootstrap',
                width: '100%',
                height: '100%',
                selectionmode: 'none',
                sortable: true,
                pageable: true,
                pagermode: 'simple',
                pagerheight: 0,
                pagesizeoptions: [3, 5, 10],
                pagesize: $scope.PageSize,
                columns: $rootScope.columns,
                pagerrenderer: function() {
                    return '';
                },
                bindingcomplete: function() {
                    $scope.pagingInfo = $("#cs-grid").jqxGrid('getpaginginformation');
                    $scope.PageNum = 0; 
                }
            };

我曾怀疑，jqxWidget依赖项未正确加载。但是当我通过gulp生成的vendor.js时，我发现相关的方法（jqxGrid等）可用。

我正在努力解决这个错误。请帮助我，

提前致谢

Answer 1

尝试重新排序包含文件，特别是＆＃34; jqwidgets文件标记＆＃34;。当我遇到类似的问题时，我以这样的方式重新排序，我将datepicker文件带到了tag-stack的顶部。然后，它运作良好。当然，在您的情况下，datepicker不是问题。不过，重新排序可能有所帮助。

我得到TypeError：$（...）。jqxGrid不是一个函数

1 个答案: