description

استفاده از jqwidgets component برای react

- 8 ماه پیش
Saeed_mn ( 100 تجربه )
8 ماه پیش

سلام.خسته نباشید
من دارم برای نشون دادن اطلاعات از کتابخونه jqwidget استفاده میکنم ..همونطور که شما گفتید اطلاعات رو به صورت ajax با axios دریافت میکنم.
برای نمایش این اطلاعات دارم از jqxgrid استفاده میکنم..ولی نمیدونم چطور اطلاعات رو بهش پاس بدم ..هر کاری که کردم اطلاعات داخل grid نمایش داده نمیشه...الان باید جای localdata اطلاعات دریافتی نمایش داده بشه..ممنون میشم راهنماییم کنید..

import React from 'react';
import ReactDOM from 'react-dom';

import JqxGrid, { jqx } from 'jqwidgets-react/react_jqxgrid.js';

class App extends React.Component { 
    render() {       
        let source =
        {
            localdata: [
                ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
                ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
                ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
            ],
            datafields: [
                { name: 'CompanyName', type: 'string', map: '0' },
                { name: 'ContactName', type: 'string', map: '1' },
                { name: 'Title', type: 'string', map: '2' },
                { name: 'Address', type: 'string', map: '3' },
                { name: 'City', type: 'string', map: '4' },
                { name: 'Country', type: 'string', map: '5' }
            ],
            datatype: 'array'
        };

        let dataAdapter = new jqx.dataAdapter(source);

        let columns =
        [
            { text: 'Company Name', datafield: 'CompanyName', width: 200 },
            { text: 'Contact Name', datafield: 'ContactName', width: 150 },
            { text: 'Contact Title', datafield: 'Title', width: 100 },
            { text: 'Address', datafield: 'Address', width: 100 },
            { text: 'City', datafield: 'City', width: 100 },
            { text: 'Country', datafield: 'Country' }
        ];
        return (
            <JqxGrid ref='myGrid'
                width={850} source={dataAdapter} columns={columns} altstart={1}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));
برای ارسال پاسخ باید وارد سایت شوید