如何在UI网格中使colDefn的'type'属性更通用

-1

我是UI-Grid的新手，我想显示两列，名称和值。如果我双击值列中的单元格，它将得到可编辑，即它的类型=文本。如何使单元格类型复选框，数字或日期。这个colDefn类型应该从数据集中获取值。如何在UI网格中使colDefn的'type'属性更通用

代码如下

$scope.gridOptions.data = [{ 
        "index": 0, 
        "type": "Text", 
        "id": "name", 
        "title": "Name", 
        "value": "Some Name", 
       }, 
       { 
        "index": 1, 
        "type": "date", 
        "id": "dob", 
        "title": "DOB", 
        "value": "1989-02-21T23:02:31+06:00", 
       }, 
{ 
        "index": 2, 
        "type": "number", 
        "id": "age", 
        "title": "Age", 
        "value": 30, 
       }]; 

$scope.gridOptions.columnDefs = [ 
      { field: 'title', displayName: 'Name', enableCellEdit: false, width: '30%'}, 
      { field: 'value', displayName: 'Value', width: '50%'}]

我知道作出具体列单类型。但是如何使单个列包含所有类型的字段，如type =“number”或“date”或“boolean（即用于复选框）”。

请给出您的建议。

来源

2015-11-05 BHARATH RAJ

我发现这个plunker：http://plnkr.co/edit/hy4TJCJMO94gEGqsM2o0?p=preview它有帮助吗？ –

谢谢你的回复，但这个盗贼是针对不同情况的。我需要实现一个能够包含所有字段的列（数字，复选框，下拉列表，日期）。我知道如何实现只包含一个字段的列（通过指定type =“number”或type =“date”），我们可以在该列上获得整列相同的类型..i.e列只包含数字字段，或仅包含日期字段。但在我的情况下，我需要一个列（单列），应该能够包含数字字段，复选框基于我们提供的日期。请提供建议... –

您可以使用自定义模板，比如这一个：

<div><div ng-if="!row.entity.typeCol || row.entity.typeCol === 'text' || row.entity.typeCol === 'date' || row.entity.typeCol === 'boolean'" > 
    <form 
    name="inputForm"> 
    <input 
     type="INPUT_TYPE" 
     ng-class="'colt' + col.uid" 
     ui-grid-editor 
     ng-model="MODEL_COL_FIELD" /> 
    </form> 
</div> 

<div ng-if="row.entity.typeCol === 'dropdown'"> 
    <form 
    name="inputForm"> 
    <select 
     ng-class="'colt' + col.uid" 
     ui-grid-edit-dropdown 
     ng-model="MODEL_COL_FIELD" 
     ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray"> 
    </select> 
    </form> 
</div> 

<div ng-if="row.entity.typeCol === 'file'"> 
    <form 
    name="inputForm"> 
    <input 
     ng-class="'colt' + col.uid" 
     ui-grid-edit-file-chooser 
     type="file" 
     id="files" 
     name="files[]" 
     ng-model="MODEL_COL_FIELD"/> 
    </form> 
</div> 
</div>

是一个可编辑的细胞，其类型取决于场typeCol变化的一个基本的例子。

我刚刚从ui-grid.edit复制并粘贴了基本模板，并在它们中间放置了一个ng-if。

我没有测试过这个，但它是唯一的出路，恕我直言。

来源

2015-11-07 14:29:42 imbalind

感谢您的回复..，是否有任何其他替代解决方案，用我们的代码覆盖ui-grid的默认属性。因为我试着用上面的解决方案，但它没有按预期工作。 –

我想不到。可悲的是，模板链接到列的方式不够灵活，无法满足您的需求。但是，作为一个开源项目的UI网格，您可以随时创建一个PR并实现您所期望的逻辑。 – imbalind

如何在UI网格中使colDefn的'type'属性更通用

回答

相关问题