如何在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'屬性更通用

回答

相關問題