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

Question

嗨我需要一个可扩展的ui-gird，同时扩展一行需要在Ul li中显示所选行的详细视图。

我在官方网站上查看，但没有找到任何东西，是否可以在 ui-grid 中使用？

谢谢

Answer 1

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

expandableRowTemplate.html：

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

应用程序.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;
    };
});