Làm thế nào để có được góc ui lưới footerTemplate để làm việc?

Question

Góc giao diện người dùng-lưới có thuộc tính được gọi là footerTemplate, được cho là cung cấp khả năng tạo mẫu chân trang tùy chỉnh. Tôi đã thử nhập nội dung html (một div với một số văn bản) trong một chuỗi, tôi cũng đã cố gắng thêm một tên tệp .html trong chuỗi và thậm chí ID của một kết xuất div, nhưng không ai trong số họ dường như làm việc. Nó cũng không rõ ràng cho tôi nếu tôi cần phải kích hoạt showGridFooter cho điều này hay không, vì vậy tôi đã thử cả hai, nhưng footerTemplate hoặc là không hiển thị ở tất cả, hoặc nếu tôi đặt showGridFooter thành true, nó sẽ hiển thị chân trang mặc định (tổng cộng dòng trong lưới). Tôi thiếu gì ở đây?

Answer 1

Đối với góc-ui-grid 3.0.x nó làm việc với các tùy chọn ví dụ sau:

$scope.options = { 
        showGridFooter: true, 
        gridFooterTemplate: '<div>pink floyd</div>' 
}; 

Đối với các phiên bản ng-lưới 2.x, phiên bản Mokgra là tốt.

Answer 2

Tôi đã cập nhật phiên bản ui-grid thành "pre-beta" 3.x và bây giờ tôi đang ở cùng một điểm với bạn. Sử dụng 'showGridFooter' được đặt thành true sẽ hiển thị thông tin tổng số hàng tự động. Chỉ định 'footerTemplate' không làm gì cả. Tôi đã thử với cả 'showGridFooter' và 'showFooter' hiện tại và vắng mặt. Vì vậy, đoạn sau của câu trả lời của tôi chỉ hoạt động cho phiên bản 2.x "ổn định" của ui-grid.

Wierdly, showFooter thuộc tính cần thiết được đặt thành true. Những gì làm việc cho tôi là thêm một tập tin html vào dự án của tôi có chứa một div đầy đủ các goodies (như bạn đã suy nghĩ). Có vẻ như một con bọ. thuộc tính showGridFooter không hoạt động đối với tôi.

$scope.gridOptions1 = { 
    showFooter: true, 
    footerTemplate:'somePath/footerTemplate.html' 
} 

Answer 3

http://ui-grid.info/docs/#/tutorial/105_footer

Bạn chỉ đơn giản là thả các yếu tố html như một div hoặc thẻ neo trong mẫu.

Answer 4

Hãy thử kèm theo chân mẫu bên trong thẻ div như

$scope.gridOptions = { 
      showGridFooter: true, 
      gridFooterTemplate: "<div>Message Here</div>" 
    } 

nếu bạn muốn hiển thị bất kỳ phạm vi biến

$scope.SomeScopeVariable = "Message Here"; 

$scope.gridOptions = { 
     showGridFooter: true, 
     gridFooterTemplate: "<div>Grid Footer: {{grid.appScope.SomeScopeVariable}}</div>" 
} 

grid.appScope phép truy cập vào các biến phạm vi trong các mẫu. thử nghiệm với góc-ui-grid 3.0.x

Answer 5

Nếu bạn muốn xem tổng giá trị hàng sử dụng mã dưới đây có thể hữu ích

{ field: 'age', footerCellTemplate: '<div class="ui-grid-cell-contents">Total {{col.getAggregationValue() }}</div>', aggregationType: uiGridConstants.aggregationTypes.sum }