7

我有一张表格，我想在该表格中添加在线编辑。我从 ng-grid 开始，然而，我决定虽然它运行良好，但我花了太多时间尝试修复样式，以使其与我网站的整体主题相匹配。我从头开始，现在使用一个普通的旧 html 表，在幕后使用 angularjs，因为它具有令人敬畏的双向数据绑定属性。

一切都进行得很顺利，除了我坚持尝试使用 bootstrap-datepicker 进行内联编辑：http ://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter 。我在 xeditable 说您应该使用的 ui-bootstrap datepicker 上使用这个 datepicker 的原因是因为它在我的网站上看起来或感觉不正确。这是 ui-bootstrap datepicker 的样子http://jsfiddle.net/NfPcH/23/。我喜欢 bootstrap datepicker 简单明了的外观。

这是一个带有 xeditable 和日期字段的表的 plunker，用于尝试和编辑PLUNKER

使用 bootstrap-datepicker 作为输入字段可以正常工作，使用自定义指令来正确更新模型：

editablegrid.directive('datepicker', function() {
return {
    restrict : 'A',
    require : 'ngModel',
    link : function(scope, element, attrs, ngModelCtrl) {
        $(function() {
            var dp = $(element).datepicker({
                format : 'MM dd, yyyy'
            });

            dp.on('changeDate', function(e) {
                ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
                scope.$apply();
            });
        });
    }
}

我将 xeditable 源代码更改为使用 bootstrap-datepicker（参见 xeditable.js 的第 78-84 行）

/*
The New directive I've made for xeditable to use with the bootstrap-datepicker
*/
angular.module('xeditable').directive('editableBsdateNew', ['editableDirectiveFactory',
  function(editableDirectiveFactory) {
    return editableDirectiveFactory({
      directiveName: 'editableBsdateNew',
      inputTpl: '<input type="text" class="form-control form-control-inline input-sm" datepicker>'
     });
}]);

，但是问题在于 xeditable 以及它如何更新所选行的模型。

xeditable 非常适合在线编辑文本和下拉菜单，但事实证明，尝试与 bootstrap-datepicker 集成是很困难的。

如果有其他方法可以使用 bootstrap-datepicker 进行内联编辑，我不会反对尝试一下。我在想，如果这不起作用，也许 ng-show 和 ng-hide 可能会起作用。

4

2 回答 2

6

1 > 确保你安装了两个库 - angular-xeditable - angular-bootstrap-datepicker

2> 创建新指令

/* 我为 xeditable 制作的新指令与 bootstrap-datepicker 一起使用 */ 

angular.module('xeditable').directive('editableBootstrapDatepicker', ['editableDirectiveFactory',   function(editableDirectiveFactory) {
     return editableDirectiveFactory({
       directiveName: 'editableBsdateNew',
       inputTpl: '<span ng-datepicker ng-options="datepickerOptions"></span>'
     });   } ]);

3> 在 HTML 中输入如下内容：

<span editable-bootstrap-datepicker="yourDateModel" onbeforesave="validateBeforeSaveDate($data)">Date ...</span>
于 2015-03-03T07:35:13.730 回答
1

尝试这个：

dp.on('changeDate', function(e) {
    ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
    scope.$apply();
    scope.row.dueDate = e.format('MM dd, yyyy'); //<--- new line
});
于 2014-10-21T08:55:46.260 回答