J'utilise jqWidgets pour créer une grille à l'aide jqxGrid dans angulaire.jqWidgets: Les données et la grille ne sont pas affichées
J'ai suivi cette démo here Pour obtenir une grille de table
Cependant tout ce que je vois dans le navigateur est le nom de la colonne et sans contour autour des colonnes et des lignes. En outre, il n'y a pas de données affichées, même si je suis un lien vers le fichier XML où toutes les données est définie, mais rien ne s'affiche.
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
}
];
}
Voici le fichier products.xml qui contient les données de la table. Voici une ligne comme un exemple
<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>
Toute aide à montrer les données dans la grille et pourquoi il n'y a pas des contours autour de la grille et des colonnes comme indiqué dans la démo ci-dessus je lié. Toute aide est appréciée. Merci
Une chose qui saute aux yeux comme étrange pour moi est que vous définissez « tout » à this.source quand tout est réglé votre xml déjà. Il est possible que pendant la source de l'assignation soit nul, ce qui peut aussi bien rendre votre any à null. Pourquoi ne pas simplement configurer l'adaptateur de données directement sur la source? Peut-être qu'il manque quelque chose. –
Je crois que c'est ce qu'ils ont fait dans la démo ci-dessus que j'ai liée à fait aussi bien. – Adrew
Dans la console, il ne me donne une erreur 404. Impossible de charger la ressource: le serveur a répondu avec un statut de 404 (non trouvé). Cela fait référence au fichier products.xml. Donc, il ne peut pas trouver le fichier XML pour une raison quelconque – Adrew