Не эксперт в области данных 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 - это метод API DTColumnBuilder, который принимает четыре параметра. Наиболее важными из них являются data и meta - ваше текущее значение и метаинформация ячейки (она содержит row и column числовые свойства - координаты ячейки). ng-model помогает вам связать входное значение с вашим homeCtrl scope объектом. Я считаю, что вам нужен указатель даты в каждой строке, поэтому я связываю его значение с атрибутом, зависящим от индекса строки. Это означает, что в любое время вы можете получить выбранную дату в виде значения date0, введите homeCtrl scope (для строки с индексом 0). Кроме того, customdatepicker объясняется ниже.
Поскольку мы пытаемся связать указатель даты с элементом 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 выполняется, когда элемент input компилируется AngularJS. Требуется scope, для которого он скомпилирован, element, к которому он привязан, проанализированный attrs элемента и ngModelCtrl. Мы используем простую функцию JQuery-UI datepicker здесь. После выбора даты мы изменяем scope и вручную вызываем scope.$apply(), чтобы уведомить homeCtrl об scope изменении.
Наконец, ваш код может выглядеть так:
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 и предоставляем обратный вызов, который запускается при создании строки. Здесь мы вручную скомпилируем элемент строки angularjs против homeCtrl $scope - что делает привязку работающей.
И не забудьте включить CDN JQuery-UI в свой проект после импорта JQuery.