AngularJS中Ui-Grid添加单选按钮及列配置与选中校验求助

Hey there! Let's break down how to implement each of your requirements for the Ui-Grid, step by step:

1. Hide Specific Columns (Id, IsDeleted) #

You can explicitly define your column definitions and set the visible property to false for the columns you want to hide. This overrides any auto-generated columns and keeps your grid clean:

$scope.gridOptions = {
  data: yourProductDataset,
  columnDefs: [
    // We'll add the radio button column first here
    { name: 'select', displayName: '', width: 50, cellTemplate: '<div class="ui-grid-cell-contents"><input type="radio" ng-model="row.entity.selected" ng-click="grid.appScope.handleRowSelection(row)"></div>' },
    // Define your visible columns explicitly
    { name: 'TypeName', displayName: 'Type Name' },
    { name: 'ProductName', displayName: 'Product Name' },
    // Hide these columns from view
    { name: 'Id', visible: false },
    { name: 'IsDeleted', visible: false },
    // Add any other columns you need to display here
  ]
};

2. Add Radio Buttons to the First Column #

The custom select column uses a cellTemplate to render a radio button per row. To ensure only one row can be selected at a time (true single-select behavior), add this handler function to your controller:

$scope.selectedProduct = null;

$scope.handleRowSelection = function(row) {
  // Deselect all other rows first
  $scope.gridOptions.data.forEach(item => {
    item.selected = false;
  });
  // Mark the clicked row as selected
  row.entity.selected = true;
  $scope.selectedProduct = row.entity;
};

This ensures clicking any radio button will deselect all others and track the currently selected product.

3. Validate At Least One Row is Selected on Button Click #

Add a button to your UI (wherever makes sense for your workflow) and attach a click handler to check for a selected row:

<button class="btn btn-primary" ng-click="validateSelection()">Confirm Selection</button>

Then implement the validation logic in your controller:

$scope.validateSelection = function() {
  const hasSelectedRow = $scope.gridOptions.data.some(item => item.selected);
  if (!hasSelectedRow) {
    alert('Please select at least one product before proceeding!');
    // You can replace this alert with a more polished notification (like an AngularJS toast or modal)
    return;
  }
  // If validation passes, proceed with your business logic
  console.log('Selected product details:', $scope.selectedProduct);
};

4. Keep Your Existing Accordion Setup #

Your original HTML code works perfectly with the updated grid configuration—just ensure gridOptions is properly attached to your scope so the grid can access it:

<accordion-group heading="{{product.TypeName}}">
  <div id="grid1" ui-grid="gridOptions" ui-grid-auto-resize class="grid"></div>
</accordion-group>

Quick Notes: #

• If your product data loads asynchronously, make sure to update gridOptions.data once the data is fully fetched.
• You can style the radio buttons with custom CSS to match your app's design.
• For large datasets, this approach remains performant since we're directly manipulating row entities instead of relying on heavy grid modules.

内容的提问来源于stack exchange，提问作者Sana