如何制作'type'colDefn的属性在ui网格中更通用

How to make 'type' property of colDefn more generic in ui-grid

本文关键字：网格 ui type 何制作 colDefn 属性      更新时间：2023-09-26

我是UI网格的新手，我想显示两列，作为名称和值。如果我双击值列中的单元格，它可以编辑，即它的类型=文本。如何使单元格键入复选框、数字或日期。此colDefn类型应该从数据集中获取值。

代码如下

$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（即用于复选框）"。

请提出你的建议。

您可以使用自定义模板，例如：

<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>

是其类型根据字段CCD_ 1而变化的可编辑单元格的基本示例。

我只是复制并粘贴了ui-grid.edit中的基本模板，并在每个模板周围加了一个ng if。

我还没有测试过，但这是唯一的路，IMHO。

相关文章：