2017-06-12 19 views
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> 

として行グリッド内のデータを示す上の任意の助けとなぜに結合した、上記デモに示すように、グリッドなしの周囲輪郭及び列が存在しないです。どんな助けもありがとうございます。おかげ

+0

ことの一つは、あなたが「任意の」いずれかに設定されている場合this.sourceするために設定されていることですあなたのXMLは既にあります。代入元がnullの場合、anyをnullに設定する可能性があります。なぜデータアダプタを直接ソースに設定しないのですか?何か不足している可能性があります。 –

+0

私はそれが上記のデモでやったことは、私がリンクしたことも同様だと信じています。 – Adrew

+0

コンソールで404エラーが表示されます。リソースのロードに失敗しました:サーバーは404(Not Found)のステータスで応答しました。これはproducts.xmlを参照しています。だから何らかの理由でxmlファイルを見つけることができません – Adrew

答えて

0

私は、資産フォルダ内のxmlファイルを入れていた、それが正常に動作します

私にとして奇数飛び出し
関連する問題