如何在 ui-grid 中使 colDefn 的“type”属性更通用

Question

我是 UI-Grid 的新手，我想显示两列，作为名称和值。 如果我双击值列中的单元格，它会变得可编辑，即它的类型=文本。 如何让单元格输入复选框、数字或日期。 这个 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 (ie is for checkbox)"。

请提出您的建议。

Answer 1

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

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

我没有测试过这个，但这是唯一的方法，恕我直言。