使用 Angular JS 数据表在其中一列中添加 Jquery datepicker

Posted 2023-05-07

【中文标题】使用 Angular JS 数据表在其中一列中添加 Jquery datepicker

【英文标题】：Add Jquery datepicker in one of the columns using angular JS datatable

【发布时间】：2019-06-06 01:39:46

【问题描述】：

我想在datatable 中显示一些数据，在这些列中我想用Datepicker 显示一个文本框。下面是我的 Angular js 代码，我想添加我的datepicker。

var app = angular.module('MyApp', ['datatables']);
app.controller('homeCtrl', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
    function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) 
        $scope.dtColumns = [
            DTColumnBuilder.newColumn("OBJECTID", "ID"),
            DTColumnBuilder.newColumn("SERVICE_CODE", "Service Code"),
            DTColumnBuilder.newColumn("COND1", "Condition 1"),
            DTColumnBuilder.newColumn("COND2", "Condition 2"),
            DTColumnBuilder.newColumn("COND3", "Condition 3"),
            DTColumnBuilder.newColumn("SERVICE_TYPE", "Service type"),
            DTColumnBuilder.newColumn("REMARK", "Remark"),
            DTColumnBuilder.newColumn("DATE", "date")
        ]
        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', 
            url: "/home/getdata",
            type: "POST"
        )
        .withPaginationType('full_numbers')
        .withDisplayLength(10);
    ])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

那么，我怎样才能添加它？请让我知道，因为我对 Angular JS 完全陌生

更新

【问题讨论】：

您需要添加示例数据以使 sn-p 工作并添加预期输出。

@Justcode：我只想在上面的截图中的列中添加日期选择器，我该怎么做呢？

您希望将哪个日期选择器集成到您的应用中？是 JQuery-UI 还是 Bootstrap 还是别的什么？

@arcquim ：我想要 jquery ui datepicker。请建议您是否可以提供帮助

【参考方案1】：

您可以使用 angular ui datepicker 而不是 jquery datepicker，它是高度可定制的，并且支持 angular js 版本。 以下是 angualr ui datepicker 的链接 https://angular-ui.github.io/bootstrap/#!#datepicker 您可以读取和执行数据并将数据传递给角度日期选择器的日期对象。

【参考方案2】：

您必须以“角度方式”使用 Angular Datatables 才能在表格单元格中包含自定义指令。看看这个plunk 使用带有自定义jQuery UI datepicker 指令的“角度方式”的工作Angular Datatables。从那里，您可以根据使用 ng-if 的条件来控制日期选择器的显示位置。

Angular 数据表“The Angular Way”的链接：https://l-lin.github.io/angular-datatables/archives/#!/angularWay

【讨论】：

我应该在哪里添加我的data.json 数据到我的项目中？？我已经休息了

【参考方案3】：

不是 JQuery 数据表方面的专家，但做了一些研究。这不是一个完整的展示，而是某种第一步教程。

您需要做的第一件事是为您的Date 列定义一个自定义渲染器。你可以这样做：

$scope.dtColumns = [
    ...,
    DTColumnBuilder.newColumn("DATE", "date").renderWith(renderTextBox);
]
...
function renderTextBox(data, type, full, meta) 
    return `<input value="$data" ng-model="date$meta.row" customdatepicker>`;

这里renderWith是DTColumnBuilder的一个api方法，它接受四个参数。其中最重要的是data 和meta - 您当前的值和单元格的元信息（它包含row 和column 数字属性- 单元格坐标）。 ng-model 帮助您将输入值绑定到您的 homeCtrl scope 对象。我相信你需要每一行中的日期选择器，这就是为什么我将它的值绑定到一个依赖于行索引的属性。这意味着您可以随时将您选择的日期作为date0 的值键入homeCtrl scope（对于具有0 索引的行）。此外，customdatepicker 解释如下。

当我们尝试将 datepicker 绑定到 input 元素时，我们正在修改 DOM。在 AngularJS 中，在指令中修改 DOM 是最佳实践。这就是我们定义自定义指令的原因。让我们将其命名为customdatepicker：

angular.module('MyApp').directive('customdatepicker', CustomDatepicker);
function CustomDatepicker() 
    return 
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) 
            $(element).datepicker(
                defaultDate: attrs.value,
                onSelect: function (date) 
                    scope[attrs.ngModel] = date;
                    scope.$apply();
                
            );
        
    ;

让我解释一下。我们使用指令来修改特定元素，这就是我们将其限制为仅属性 (restrict: 'A') 的原因。它需要从一个元素中定义一个ng-model 来修改它——这里使用require: 'ngModel。最后，link 函数在 AngularJS 编译 input 元素时执行。它需要scope 编译它，element 绑定到它，解析元素的attrs 和ngModelCtrl。我们在这里使用简单的 JQuery-UI datepicker 函数。选择日期后，我们修改scope，手动调用scope.$apply()通知homeCtrlscope发生变化。

最后，您的代码可能如下所示：

var app = angular.module('MyApp', ['datatables']);
app.directive('customdatepicker', function () 
    return 
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModelCtrl) 
          $(element).datepicker(
              defaultDate: attrs.value,
              onSelect: function (date) 
                  scope[attrs.ngModel] = date;
                  scope.$apply();
              
          );
      
    ;
);
app.controller('homeCtrl', ['$scope', '$http', '$compile', 'DTOptionsBuilder', 'DTColumnBuilder',
    function ($scope, $http, $compile, DTOptionsBuilder, DTColumnBuilder) 
        $scope.dtColumns = [
            DTColumnBuilder.newColumn("OBJECTID", "ID"),
            DTColumnBuilder.newColumn("SERVICE_CODE", "Service Code"),
            DTColumnBuilder.newColumn("COND1", "Condition 1"),
            DTColumnBuilder.newColumn("COND2", "Condition 2"),
            DTColumnBuilder.newColumn("COND3", "Condition 3"),
            DTColumnBuilder.newColumn("SERVICE_TYPE", "Service type"),
            DTColumnBuilder.newColumn("REMARK", "Remark"),
            DTColumnBuilder.newColumn("DATE", "date").renderWith(renderTextBox)
        ]
        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', 
            url: "/home/getdata",
            type: "POST"
        )
        .withOption('createdRow', function(row) 
            $compile(angular.element(row).contents())($scope);
        )
        .withPaginationType('full_numbers')
        .withDisplayLength(10);

        function renderTextBox(data, type, full, meta) 
            return `<input value="$data" ng-model="date$meta.row" customdatepicker>`;
        
    ]
);

请注意，我们使用createdRow 选项并在此处提供一个回调，该回调会在创建行时触发。在这里，我们针对 homeCtrl $scope 手动 angularjs-compile 行元素 - 这使得绑定工作。

并且不要忘记在您的 JQuery 导入之后将 JQuery-UI CDN 包含到您的项目中。