Question

我正在使用ui-grid。我使用ui-grid-edit启用了编辑功能。问题是datepicker。我希望datepicker可以在所有浏览器中使用，但是通过启用类型不能实现：＆＃34; date＆＃34;因为它将提供HTML5支持的相同日期选择器。所以我想到使用自定义模板为角度启用bootstrap datepicker 通过添加editableCellTemplate

columnDefs : {
    field:'accbirthdate',displayName :"Birth Date",enableCellEditOnFocus:true,editableCellTemplate: '<input type="text" ng-input="COL_FIELD" ng-model="COL_FIELD" datepicker-popup="dd-MM-yyyy" datepicker-append-to-body="true"/>'}
}

但根本不起作用。我发现即使输入文本中的ng-click也不起作用。所以请任何人帮助如何在角度ui-grid中启用bootstarp日期选择器

Answer 1

是的，因为我认为这是因为我们在editableCellTemplate上直接使用HTML代码时没有编译。有关Angular Template Compiling Works的详细信息，请参阅此处 Angular Template Compiling

以下是我要解决此问题的方法。我将我的列defs editableCellTemplate替换为以下

columnDefs : {
    field:'accbirthdate',displayName :"Birth Date",enableCellEditOnFocus: true,editableCellTemplate: '<input type="text" class="form-control" datepicker-popup="dd/MM/yyyy" ng-class="\'colt\' + col.index" ng-model="row.entity[col.field]" datepicker-append-to-body="true" is-open="istableDate" close-text="Close" table-date/>'}
}

就像gridEditor一样，我在我的directive.js中创建了自己的指令，我创建了指令

app.directive('tableDate',function($filter){
   function parseDateString(dateString) {
      if (typeof(dateString) === 'undefined' || dateString === '') {
        return null;
      }
      var parts = dateString.split('/');
      if (parts.length !== 3) {
        return null;
      }
      var year = parseInt(parts[2], 10);
      var month = parseInt(parts[1], 10);
      var day = parseInt(parts[0], 10);

      if (month < 1 || year < 1 || day < 1) {
        return null;
      }
      return new Date(year, (month - 1), day);
    }
    function pad(s) { return (s < 10) ? '0' + s : s; }
    return {
        priority: -100, // run after default uiGridEditor directive
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
          scope.istableDate = false;

          scope.$on( 'uiGridEventBeginCellEdit', function () { 
            scope.istableDate = true;
          });

          element.on("click",function(){
            scope.istableDate = true;
          });

          element.bind( 'blur', function () { 
            if(!scope.istableDate){
              scope.$emit( 'uiGridEventEndCellEdit' ); 
            }else{
              scope.istableDate =  false;
            }
          }); //when leaving the input element, emit the 'end cell edit' event

          if (ngModel) {
            ngModel.$formatters.push(function (modelValue) {
              var modelValue= new Date(modelValue);
              ngModel.$setValidity(null,(!modelValue || !isNaN(modelValue.getTime())));
              return $filter('date')(modelValue, 'dd/MM/yyyy');
            });

            ngModel.$parsers.push(function (viewValue) {
              if (viewValue ) {
                var dateString =  [pad(viewValue.getDate()), pad(viewValue.getMonth()+1), viewValue.getFullYear()].join('/')
                var dateValue = parseDateString(dateString);
                ngModel.$setValidity(null, (dateValue && !isNaN(dateValue.getTime())));
                return dateValue;
              }
              else {
                ngModel.$setValidity(null, true);
                return null;
              }
            });
          }
        }
      };
});

我的日期格式是dd / MM / yyyy，一旦我们发出它将被提及为更改的事件，请选择您的日期格式。现在，我的引导日期选择器在所有浏览器上为我的ui-grid工作。

如果您对此有任何疑问，请随时问我。我花了一天时间，我想与其他人分享我的经验。

不在IE6中哎呀：）

Answer 2

我在一个月之前就遇到了同样的问题。但我找不到解决方案。所以我改变主意去定制网格。

我使用table，tr，td标签

看到这是我的HTML代码

 <table ng-show="TimeSheetList.length!==0" class="table">
            <tr>
                <th style="background-color: #BBE1EF">Start Date</th>
                <th style="background-color: #BBE1EF">Start Time</th>
                <th style="background-color: #BBE1EF">End Time</th>
                <th style="background-color: #BBE1EF">Total Hours</th>
                <th style="background-color: #BBE1EF">Description</th>
                <th style="background-color: #BBE1EF">Remarks</th>
            </tr>
            <tr ng-repeat="timesheetlist in TimeSheetList">
                <td ng-dblclick="ChangeVal(this,'StartDate')"><span ng-hide="timesheetlist.IsEditStartDate">{{timesheetlist.StartDate}}</span>
                    <input style="width: 150px" type="text" class="form-control" date-time required="true" view="hours" partial="true" ng-blur="UpdateTimeSheet(this.timesheetlist)" id="StartDate{{$index}}" ng-show="timesheetlist.IsEditStartDate" ng-model="timesheetlist.StartDate" />
                </td>
                <td><span ng-dblclick="ChangeVal(this,'StartTime')" ng-hide="timesheetlist.IsEditStartTime">{{timesheetlist.StartTime}}</span>
                    <timepicker hour-step="1" minute-step="1" show-meridian="true" ng-change="UpdateTimeSheet(this.timesheetlist)" ng-blur="UpdateTimeSheet(this.timesheetlist)" id="StartTime{{$index}}" ng-show="timesheetlist.IsEditStartTime" ng-model="timesheetlist.StartTime"></timepicker>

                </td>
                <td><span ng-dblclick="ChangeVal(this,'EndTime')" ng-hide="timesheetlist.IsEditEndTime">{{timesheetlist.EndTime}}</span>
                    <timepicker hour-step="1" minute-step="1" show-meridian="true" ng-change="UpdateTimeSheet(this.timesheetlist)" ng-blur="UpdateTimeSheet(this.timesheetlist)" id="EndTime{{$index}}" ng-show="timesheetlist.IsEditEndTime" ng-model="timesheetlist.EndTime"></timepicker>
                </td>
                <td>
                    <input type="text" readonly="true" class="form-control" ng-model="timesheetlist.TotalHours" style="width: 200px" autofocus="">
                </td>
                <td><span ng-dblclick="ChangeVal(this,'Description')" ng-hide="timesheetlist.IsEditDescription">{{timesheetlist.Description}}</span>
                    <input style="width: 200px" type="text" class="form-control" ng-blur="UpdateTimeSheet(this.timesheetlist)" ng-show="timesheetlist.IsEditDescription" ng-model="timesheetlist.Description" /></td>
                <td><span ng-dblclick="ChangeVal(this,'Remarks')" ng-hide="timesheetlist.IsEditRemarks">{{timesheetlist.Remarks}}</span>
                    <input style="width: 200px" type="text" class="form-control" ng-blur="UpdateTimeSheet(this.timesheetlist)" ng-show="timesheetlist.IsEditRemarks" ng-model="timesheetlist.Remarks" /></td>
            </tr>
        </table>

这是我的控制器代码

 function loadTimeSheets(date) {
            $http({
                method: 'GET',
                url: rootUrl + '/api/TimeSheet/LoadTimeSheet?date=' + date,
                headers: {
                    'Content-Type': "application/json; charset=utf-8"
                }
            }).success(function (response) {
                $scope.TimeSheetList = response;
                if ($scope.TimeSheetList.length == 0) {
                    alert('You did not add your works in this date');
                }
            }).error(function (response, errorCode) {
                if (errorCode == 444) {
                    //toastr.error('Your email address is does not verrified ', 'Error');
                }
            })
        }

我希望您可以根据需要自定义我的网格。

如果您不喜欢，那么您可以使用ng-Grid

Answer 3

我也遇到了datepicker的这个问题，并决定添加一个默认的jquery-ui。实际上，你可以添加任何人。

以下代码需要一些解释。

首先，您的模板应该是这样的：

editableCellTemplate: '<input datepicker ng-model="MODEL_COL_FIELD" readonly>'

它必须包含值为ng-model的{{1}}属性。此值表示您的输入将与单元格的模型绑定。即停止编辑模式后，单元格（通常是MODEL_COL_FIELD元素）将从输入中获取值。 <div>值由具有模型真实名称的ui-grid引擎替换。在我们的例子中，这是MODEL_COL_FIELD。阅读财产row.entity['startDate']时，您可以看到这一点。

$attrs.ngModel

行似乎是因为我们无法知道模型的名称。该名称自动用ui-grid引擎指定。您可以创建一个允许访问eval('$scope.' + $attrs.ngModel + ' = "' + value + '";');解析eval值的值的函数，而不是$scope。

其次，当您创建一些指令时，应在$attrs.ngModel部分替换所有DOM修改。

第三，如果您在ui-grid中为编辑模式创建自己的指令，则必须手动触发BEGIN_CELL_EDIT，CANCEL_CELL_EDIT和END_CELL_EDIT事件（请参阅http://ui-grid.info/docs/#/tutorial/201_editable）。在我们的代码中，我们在datepicker的compile属性中执行此操作。我们不使用onClose，因为我们可以放弃对输入的关注，并且将关闭datepicker，但输入仍将打开。要停止编辑模式，我们必须触发END_CELL_EDIT事件：

onSelect

JS代码：

$scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);

完整代码及其工作原理您可以在此处看到：http://plnkr.co/edit/NfMuGpNDqIjvoAGJ2R1B

ui-grid编辑功能无法正常工作

3 个答案: