jqWidgets: данные и сетка не отображаются

Я использую jqWidgets для создания сетки с помощью jqxGrid в Angular.

Я следил за этой демонстрацией здесь Чтобы получить сетку таблицы

Однако все, что я вижу в браузере, — это имя столбца, а не контуры вокруг столбцов и строк. Также данные не отображаются, хотя я ссылаюсь на 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>

Любая помощь в отображении данных в сетке и почему вокруг сетки и столбцов нет контуров, как показано в демонстрации выше, на которую я ссылался. Любая помощь приветствуется. Спасибо


javascript angularjs jqxgrid jqwidget
person Adrew    schedule 12.06.2017    source источник
comment
Одна вещь, которая кажется мне странной, заключается в том, что вы устанавливаете any для this.source, когда для any уже задан ваш xml. Возможно, что во время присваивания источник имеет значение null, что также может привести к установке любого значения null. Почему бы просто не установить адаптер данных непосредственно на источник? Может чего-то не хватает.   -  person RoboYak    schedule 12.06.2017
comment
Я полагаю, что это то, что они сделали в демонстрации выше, на которую я ссылался.   -  person Adrew    schedule 12.06.2017
comment
В консоли выдает ошибку 404. Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найдено). Имеется в виду файл products.xml. Поэтому он не может найти файл xml по какой-то причине   -  person Adrew    schedule 12.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Мне пришлось просто поместить файл xml в папку с ресурсами, и он отлично работает.

person Adrew    schedule 12.06.2017