ng-grid - 是否可以有多个选择列，如复选框和单选按钮列？

Question

我正在尝试使用 ng-grid（我是 angularjs 和 ng-grid 的新手）创建一个表格，其中包含以下列：

1. 复选框选择列。
2. 单选按钮选择列。
3. 其他列是数据列。

我想要达到的目标：

1. 当用户可以选择/取消选择复选框列中的任何行时。
2. 只有在选中相应的复选框列时，用户才能选择单选按钮。
3. 在所有行中，只应选择一个单选按钮。
4. 限制行的选择，仅使用第一列和第二列。这是必需的，因为当用户单击除一和二之外的列时，该行被选中并触发“afterSelectionChange”事件，但单选按钮和复选框不会切换。

我在 $scope.gridOptions 中所做的事情的片段：

   columnDefs : [ { 
                     field: '', 
                     displayName: 'Checkbox', 
                     cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="true" /></div>'
                   },
                   { 
                     field:'', 
                     displayName:'Radio'
                     cellTemplate :'<div class="ngSelectionCell"><input tabindex="-1" type="radio" ng-checked="{{defaultValue}}"/></div>'
                   },
                   { 
                     field:'name', 
                     displayName:'Name'
                   } ],
    multiSelect: true,
    enableRowSelection: true, // needed to be able to select via radio button
    plugins: [new ngGridFlexibleHeightPlugin()],
    selectedItems:$scope.selectedRows,
    afterSelectionChange: function(rowItem, event) {
        // What should be done?
    }

任何关于我如何实现我想要的目标的建议都会很棒。非常感谢您的宝贵时间。

Answer 1

我不确定它有什么用，但这听起来是个有趣的问题。

您的网格数据应如下所示：

$scope.myData = [{id:1,name: "Moroni", age: 50,changeable:true},
                 {id:2,name: "Tiancum", age: 43,changeable:true},
                 {id:3,name: "Jacob", age: 27,changeable:false},
                 {id:4,name: "Nephi", age: 29,changeable:true},
                 {id:5,name: "Enos", age: 34,changeable:true}];
$scope.selID=2;   

myData 中的id 和changeable 属性用于确定哪一行受复选框影响。

$scope.selID 用于找出单选按钮当前选中了哪一行。

实际的columnDefs 包含模板：

   columnDefs : [ { 
                 field: 'changeable', 
                 displayName: 'Checkbox', 
                 cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-model="row.entity.changeable"/></div>'
               },
               { 
                 field:'name', 
                 displayName:'Radio',
                 cellTemplate :'<div class="ngSelectionCell"><input tabindex="-1" type="radio" ng-disabled="(row.entity.changeable==false)" ng-checked="isChecked(row.entity.id)" ng-click="setSel(row.entity.id)"/></div>'
               },
               { 
                 field:'name', 
                 displayName:'Name'
               },{ 
                 field:'age', 
                 displayName:'Age'
               } ]

在范围内有两个额外的功能来切换（单选）选定的行并确定行是否可以更改：

    $scope.isChecked=function(id){
      if (id==$scope.selID){
        return true;
      }else{
        return false;
      }
    }

   $scope.setSel=function(id){
     $scope.selID=id;
   } 

这是一个Plunker，其中包含几秒钟前对我有用的完整代码。目前它没有显示任何内容，因为the ng-grid server 似乎已关闭（再次！）。请过几个小时再试一次！