0
データテーブルを使用して拡張子ローを持つことができます+クリックすると行を使い果たし、いくつかのボタンを使って追加データを表示します角度2に移動する前のajaxバージョン：
角2 Datatable展開可能なカスタムhtmlバインディング付きの行
各行には、追加のアクションと情報のための行があります。ここで
はコンポーネントである：ここでは
import {Component, Input, ElementRef, AfterContentInit, OnInit} from '@angular/core';
declare var $: any;
@Component({
selector: 'sa-datatable',
template: `
<table class="dataTable {{tableClass}}" width="{{width}}">
<ng-content></ng-content>
</table>
`,
styles: [
require('smartadmin-plugins/datatables-bundle/datatables.min.css')
]
})
export class DatatableComponent implements OnInit {
@Input() public options:any;
@Input() public filter:any;
@Input() public detailsFormat:any;
@Input() public paginationLength: boolean;
@Input() public columnsHide: boolean;
@Input() public tableClass: string;
@Input() public width: string = '100%';
constructor(private el: ElementRef) {
}
ngOnInit() {
Promise.all([
System.import('script-loader!smartadmin-plugins/datatables-bundle/datatables.min.js'),
]).then(()=>{
this.render()
})
}
render() {
let element = $(this.el.nativeElement.children[0]);
let options = this.options || {}
let toolbar = '';
if (options.buttons)
toolbar += 'B';
if (this.paginationLength)
toolbar += 'l';
if (this.columnsHide)
toolbar += 'C';
if (typeof options.ajax === 'string') {
let url = options.ajax;
options.ajax = {
url: url,
// complete: function (xhr) {
//
// }
}
}
options = $.extend(options, {
"dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" + toolbar + ">r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
oLanguage: {
"sSearch": "<span class='input-group-addon'><i class='glyphicon glyphicon-search'></i></span> ",
"sLengthMenu": "_MENU_"
},
"autoWidth": false,
retrieve: true,
responsive: true,
initComplete: (settings, json)=> {
element.parent().find('.input-sm',).removeClass("input-sm").addClass('input-md');
}
});
const _dataTable = element.DataTable(options);
if (this.filter) {
// Apply the filter
element.on('keyup change', 'thead th input[type=text]', function() {
_dataTable
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
}
if (!toolbar) {
element.parent().find(".dt-toolbar").append('<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>');
}
if(this.detailsFormat){
let format = this.detailsFormat
element.on('click', 'td.details-control', function() {
var tr = $(this).closest('tr');
var row = _dataTable.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
}
else {
row.child(format(row.data())).show();
tr.addClass('shown');
}
})
}
}
}
は、私は、テンプレートのHTML内の他のコンポーネントからそれを使用する方法である：ここでは
<div class="well">
<h1>Store Items</h1>
<sa-datatable [options]="options"
[detailsFormat]="detailsFormat"
tableClass="display projects-table table table-striped table-bordered table-hover"
width="100%">
<thead>
<tr>
<th data-hide="phone"></th>
<th data-hide="phone">Item</th>
<th data-class="expand"><i
class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i>
UUID
</th>
<th data-hide="phone"><i
class="fa fa-fw fa-phone text-muted hidden-md hidden-sm hidden-xs"></i>
Item ID
</th>
<th>Profit</th>
<th data-hide="phone,tablet"><i
class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i>
FTP Status
</th>
</tr>
</thead>
</sa-datatable>
</div>
は私のコンポーネントです：
import {Component, OnInit, ChangeDetectionStrategy, ElementRef} from '@angular/core';
import {FadeInTop} from "../../../shared/animations/fade-in-top.decorator";
declare var $: any;
@FadeInTop()
@Component({
selector: 'store-items',
templateUrl: './store-items-datatable.html',
styleUrls: ['./store-items-datatable.css'],
changeDetection:ChangeDetectionStrategy.OnPush
})
export class StoreItemsDatatable {
constructor() {
}
public options = {
"ajax": 'assets/roi/items.json',
"iDisplayLength": 15,
"columns": [
{
"class": 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
//each line is a column
{data: "title"},
{data: "uuid"},
{data: "status"},
],
"order": [[1, 'asc']]
}
public detailsFormat(d) {
return `<table cellpadding="5" cellspacing="0" border="0" class="table table-hover table-condensed">
<tr>
<td style="width:100px">Actions:</td>
<td><a href='${d.generalInfo.link}' target="_blank">Go To Item</a>
<td>`+this.getActions(d)+`</td>
</tr>
</table>`
}
getActions(data) {
return `
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Upload Item to FTP</h4>
</div>
<div class="modal-body">
<a class="btn btn-default btn-xs" id="uploadItemToFTP" rel="tooltip" data-placement="top" data-original-title="Upload Item to FTP" (click)='someMethod()'>Upload</a>
</div>
</div>
</div>`;
}
}
detailsFormat htmlテンプレートで渡されました[detailsFormat]="detailsFormat"
問題は、detailsFormatのメソッドを押すと、追加のhtmlコンテンツが返されますが、ボタンのバインディングが機能していないため、+ボタンをクリックした後にページを再度レンダリングする方法があることです。アップロードボタンは機能しますか？
要求された最終結果は(click)='someMethod()'我々は正確に同じ問題を抱えている