Question

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

复选框选择列。
单选按钮选择列。
其他列是数据列。

我想要实现的目标：

当用户可以选中/取消选中复选框列中的任何行时。
用户只能在选中相应的复选框列时选择单选按钮。
在所有行中，只应选择一个单选按钮。
仅使用第一列和第二列限制行的选择。这是必需的，因为当用户点击除1和2之外的列时，该行被选中并且'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;

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

$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似乎已经失效（再次！）。几个小时后再试一次！

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

1 个答案: