jqWidgets：不显示数据和网格

Question

我正在使用 jqWidgets 在 Angular 中使用 jqxGrid 创建网格。

我已经关注了这个演示 here 获得 table 网格

然而，我在浏览器中看到的只是列名，列和行周围没有轮廓。即使我链接到设置了所有数据的 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
    }
]; 

}

这是包含 table 数据的 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>

关于在网格内显示数据以及为什么网格和列周围没有轮廓的任何帮助，如我链接到的上面的演示所示。任何帮助表示赞赏。谢谢

Answer 1

我不得不将 xml 文件放在资产文件夹中，它工作正常

jqWidgets：不显示数据和网格

jqWidgets: Data and grid are not displayed

javascript

angularjs

jqxgrid

jqwidget