是否可以使用自定义模板创建可扩展的UI网格作为Ul li显示

Posted 2021-03-27

嗨我需要一个可扩展的ui网格，而扩展行需要显示Ul li中所选行的详细视图。

我检查官方网站，但没有找到任何东西，是否有可能在ui-grid？

谢谢

答案

您需要提供自己的expandableRowTemplate，显示该行的详细信息。例如，根据示例的Plunkr，请参阅此Plunkr：

expandableRowTemplate.html：

<div >{{row.entity.name}} ({{row.entity.age}})</div>

app.js：

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable']);

app.controller('MainCtrl', function MainCtrl($http, $log) {
  var vm = this;

  vm.gridOptions = {
    expandableRowTemplate: 'expandableRowTemplate.html',
    expandableRowHeight: '*',
    showExpandAllButton: false
  };

  vm.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'age'},
    { name: 'address.city'}
  ];

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .then(function(response) {
      vm.gridOptions.data = response.data;
    });

    vm.gridOptions.onRegisterApi = function(gridApi){
      vm.gridApi = gridApi;
    };
});