0
jqWidgetsを使用して、jqxGridをAngularで使用してグリッドを作成しています。jqWidgets:データとグリッドは表示されません。
私はしかし、私はブラウザ内で見るすべては、列名と列と行の周りにいない輪郭であるテーブルグリッド
を取得するには、このデモ here を追っています。また、すべてのデータが設定されているxmlにリンクしていても表示されるデータはありませんが、何も表示されません。
import { Component } from '@angular/core';
import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';
@Component({
templateUrl: 'buttons.component.html',
selector: 'my-app',
})
export class ButtonsComponent {
constructor() { }
source: any =
{
datatype: "xml",
datafields: [
{ name: 'EmployeeNum', type: 'int' },
{ name: 'FullName', type: 'string' },
{ name: 'MarketCenter', type: 'string' },
{ name: 'FunctionTitle', type: 'string' },
{ name: 'HireDate', type: 'date' },
{ name: 'TermDate', type: 'date' }
],
root: "Employees",
record: "Employ",
id: 'EmployeeID',
url: "demos/sampledata/products.xml"
};
dataAdapter: any = new $.jqx.dataAdapter(this.source);
unitsInStockRenderer: any = (row, columnfield, value, defaulthtml, columnproperties, rowdata) =>
{
if (value < 20)
{
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
}
else
{
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
}
};
columns: any[] =
[
{
text: 'Employee #', columngroup: 'ProductDetails',
datafield: 'EmployeeNum', width: 330
},
{
text: 'Name', columngroup: 'ProductDetails',
datafield: 'FullName', width: 330
},
{
text: 'M/C', columngroup: 'ProductDetails',
datafield: 'MarketCenter', width: 330
},
{
text: 'Function', columngroup: 'ProductDetails',
datafield: 'FunctionTitle', width: 330
},
{
text: 'Hire Date', columngroup: 'ProductDetails',
datafeild: 'HireDate', width: 330
},
{
text: 'Term Date', columngroup: 'ProductDetails',
datafeild: 'TermDate', width: 330
}
];
}
次は、表データを含むproducts.xmlファイルです。ここでは一例
<Employees>
<Employ EmployeeID="1">
<EmployeeNum>2793</EmployeeNum>
<FullName>Brian Miller</FullName>
<MarketCenter>458-Salt Lake City</MarketCenter>
<FunctionTitle>Controller</FunctionTitle>
<HireDate>10/12/2008</HireDate>
<TermDate>10/12/2008</TermDate>
</Employ>
</Employees>
として行グリッド内のデータを示す上の任意の助けとなぜに結合した、上記デモに示すように、グリッドなしの周囲輪郭及び列が存在しないです。どんな助けもありがとうございます。おかげ
ことの一つは、あなたが「任意の」いずれかに設定されている場合this.sourceするために設定されていることですあなたのXMLは既にあります。代入元がnullの場合、anyをnullに設定する可能性があります。なぜデータアダプタを直接ソースに設定しないのですか?何か不足している可能性があります。 –
私はそれが上記のデモでやったことは、私がリンクしたことも同様だと信じています。 – Adrew
コンソールで404エラーが表示されます。リソースのロードに失敗しました:サーバーは404(Not Found)のステータスで応答しました。これはproducts.xmlを参照しています。だから何らかの理由でxmlファイルを見つけることができません – Adrew