Fatal编程技术网
  • javascript/
  • Javascript AngularJS-ng网格-日期列问题

Javascript AngularJS-ng网格-日期列问题

javascript jquery angularjs

Javascript AngularJS-ng网格-日期列问题,javascript,jquery,angularjs,datepicker,ng-grid,Javascript,Jquery,Angularjs,Datepicker,Ng Grid,我使用的是角度ui网格。在编辑模式下，有一列出生日期需要日期选择器 当我点击该列时，它会显示日期选择器，但所选日期值不会在日期选择器中被选中。此外，日期选择器在版本完成后不会被删除 columnDefs: [ { field: 'name' }, { field: 'dob', cellFilter: 'date', enableCellEdit: true, editableCellTemplate: '&

我使用的是角度ui网格。在编辑模式下，有一列
出生日期
需要
日期选择器

当我点击该列时，它会显示
日期选择器
，但所选日期值不会在日期选择器中被选中。此外，日期选择器在版本完成后不会被删除

columnDefs: [
      { field: 'name' },
      {
        field: 'dob',
        cellFilter: 'date',
        enableCellEdit: true,
        editableCellTemplate: '<input type="date" />'
      }

columnDefs：[
{字段：'名称'}，
{
字段：“dob”，
cellFilter:'日期'，
enableCellEdit:true，
editableCellTemplate:“”
}
谢谢

您需要columnDef中的
editableCellTemplate
选项来设置模板，具体取决于您正在使用的日期选择器插件。举个例子（在准备范围变量之前它是不可行的）

columnDefs：[
{字段：'名称'}，
{
字段：“dob”，
cellFilter:'日期'，
enableCellEdit:true，
editableCellTemplate:“”
},
...
]
您需要在columnDef中使用
editableCellTemplate
选项，根据您使用的datepicker插件设置模板。举个例子（在准备范围变量之前不可行）

columnDefs：[
{字段：'名称'}，
{
字段：“dob”，
cellFilter:'日期'，
enableCellEdit:true，
editableCellTemplate:“”
},
...
]
试试
ui-grid
，它是由同一个家伙重构的下一代
ng-grid
。它设计良好，由插件松散耦合：

html:


海关抢劫犯
js:

var-app=angular.module（'myApp'，['ui.grid'，'ui.grid.edit']）；
app.controller（'MyCtrl'，['$scope'，函数（$scope）{
$scope.myData=[{name:“Moroni”，dob:'1985-01-01'}，
{名称：“天康”，dob:'1956-11-21'}，
{姓名：“雅各布”，dob:'1980-03-08'}，
{名称：“尼菲”，dob:'1974-08-08'}，
{名称：“Enos”，dob:'1991-07-17'}]；
$scope.gridOptions={
数据：“myData”，
//行模板：“”，
columnDefs：[
{
名称：“dob”，
displayName:'DOB'，
cellFilter:'日期'，
键入：“日期”
},
{name:'name'，displayName:'name'}
]
}
}]);
试试
ui-grid
，它是由同一个家伙重构的下一代
ng-grid
。它设计良好，由插件松散耦合：

html:


海关抢劫犯
js:

var-app=angular.module（'myApp'，['ui.grid'，'ui.grid.edit']）；
app.controller（'MyCtrl'，['$scope'，函数（$scope）{
$scope.myData=[{name:“Moroni”，dob:'1985-01-01'}，
{名称：“天康”，dob:'1956-11-21'}，
{姓名：“雅各布”，dob:'1980-03-08'}，
{名称：“尼菲”，dob:'1974-08-08'}，
{名称：“Enos”，dob:'1991-07-17'}]；
$scope.gridOptions={
数据：“myData”，
//行模板：“”，
columnDefs：[
{
名称：“dob”，
displayName:'DOB'，
cellFilter:'日期'，
键入：“日期”
},
{name:'name'，displayName:'name'}
]
}
}]);
尝试将
放入指令中。并在网格内使用该指令

我记得这对我很有效。NG网格倾向于吞下某些事件，如果没有指令，选择日期可能不起作用。

尝试将
放入指令中。并在网格中使用该指令

我记得这对我很有效。NG grid倾向于吞下某些事件，如果没有指令，选择日期可能不起作用。

可能重复-我检查了链接，没有完美的答案..！可能重复-我检查了链接，没有完美的答案..！好吧，因为
NG grid
是一个混乱的位，将要被它的革命版
ui-grid
取代，我强烈建议你改用
ui-grid
。我将为
ui附加另一个答案。grid
正在进行大量的编码…无法取代
ui-grid
。！！有什么解决方案吗？我是一个深度ng网格用户，处理可编辑网格将涉及大量工作字段，您可能需要为本机html datepicker编写一个指令来处理焦点状态之类的事情，并使用
ng model
来绑定所选的日期。此外，当您有固定功能和超过20列时，使用ng grid会让您感到痛苦……好吧，因为
ng grid
是一团糟的nd将被它的革命版
ui-grid
取代，我强烈建议你改用
ui-grid
。我将为
ui.grid
附上另一个答案。正在进行大量的编码…无法取代
ui-grid
。！！有什么解决方案吗？我是一个深度ng-grid用户，将涉及大量的工作对于可编辑字段，您可能需要为本机html datepicker编写一个指令来处理焦点状态之类的事情，并使用
ng model
来绑定所选日期。此外，当您具有固定功能和超过20列时，您将感到与ng grid一起生活的痛苦。。。 
columnDefs: [
    { field: 'name' },
    {
        field: 'dob',
        cellFilter: 'date',
        enableCellEdit: true,
        editableCellTemplate: '<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="\'2015-06-22\'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />'
    },
    ...
]

<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
        <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
        <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
    </body>
</html>

var app = angular.module('myApp', ['ui.grid', 'ui.grid.edit']);

app.controller('MyCtrl', ['$scope', function($scope) {
  $scope.myData = [{name: "Moroni", dob: '1985-01-01'},
                 {name: "Tiancum", dob: '1956-11-21'},
                 {name: "Jacob", dob: '1980-03-08'},
                 {name: "Nephi", dob: '1974-08-08'},
                 {name: "Enos", dob: '1991-07-17'}];

  $scope.gridOptions = {
    data: 'myData',
    // rowTemplate: '<div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" style="overflow: visible"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div>',
    columnDefs: [
      {
        name: 'dob',
        displayName: 'DOB',
        cellFilter: 'date',
        type: 'date'

      },
      { name: 'name' , displayName: 'Name'}
    ]
  }
}]);