jqWidgets:不显示数据和网格

时间:2017-06-12 18:32:44

标签: javascript angularjs jqxgrid jqwidget

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

我已经按照这个演示了 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>

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

1 个答案:

答案 0 :(得分:0)

我不得不将xml文件放在assets文件夹中,它可以正常工作